Pixi’VNClass: WebGLRenderer<T>
Defined in: node_modules/pixi.js/lib/rendering/renderers/gl/WebGLRenderer.d.ts:41
The WebGL PixiJS Renderer. This renderer allows you to use the most common graphics API, WebGL (and WebGL2).
// Create a new renderer
const renderer = new WebGLRenderer();
await renderer.init();
// Add the renderer to the stage
document.body.appendChild(renderer.canvas);
// Create a new stage
const stage = new Container();
// Render the stage
renderer.render(stage);
You can use autoDetectRenderer to create a renderer that will automatically detect the best renderer for the environment.
// Create a new renderer
const renderer = await rendering.autoDetectRenderer({
preference:'webgl',
});
The renderer is composed of systems that manage specific tasks. The following systems are added by default whenever you create a WebGL renderer:
| WebGL Core Systems | Systems that are specific to the WebGL renderer | | ------------------------------------------- | ----------------------------------------------------------------------------- | | GlUboSystem | This manages WebGL2 uniform buffer objects feature for shaders | | GlBackBufferSystem | manages the back buffer, used so that we can pixi can pixels from the screen | | GlContextSystem | This manages the WebGL context and its extensions | | GlBufferSystem | This manages buffers and their GPU resources, keeps everything in sync | | GlTextureSystem | This manages textures and their GPU resources, keeps everything in sync | | GlRenderTargetSystem | This manages what we render too. For example the screen, or another texture | | GlGeometrySystem | This manages geometry, used for drawing meshes via the GPU | | GlUniformGroupSystem | This manages uniform groups. Syncing shader properties with the GPU | | GlShaderSystem | This manages shaders, programs that run on the GPU to output lovely pixels | | GlEncoderSystem | This manages encoders, a WebGPU Paradigm, use it to draw a mesh + shader | | GlStateSystem | This manages the state of the WebGL context. eg the various flags that can be set blend modes / depthTesting etc | | GlStencilSystem | This manages the stencil buffer. Used primarily for masking | | GlColorMaskSystem | This manages the color mask. Used for color masking |
The breadth of the API surface provided by the renderer is contained within these systems.
Standard
Extends
Type Parameters
T
T extends ICanvas = HTMLCanvasElement
Implements
Constructors
Constructor
> new WebGLRenderer<T>(): WebGLRenderer<T>
Defined in: node_modules/pixi.js/lib/rendering/renderers/gl/WebGLRenderer.d.ts:111
Returns
WebGLRenderer<T>
Inherited from
Other
__devtoolInjected?
> optional __devtoolInjected?: boolean
Defined in: node_modules/@pixi/devtools/global.d.ts:41
Implementation of
WebGLSystems.__devtoolInjected
Inherited from
WebGLSystems.__devtoolInjected
_initOptions
> protected _initOptions: WebGLOptions
Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/system/AbstractRenderer.d.ts:208
Inherited from
_roundPixels
> _roundPixels: 0 | 1
Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/system/AbstractRenderer.d.ts:197
Internal
Inherited from
accessibility
> accessibility: AccessibilitySystem
Defined in: node_modules/pixi.js/lib/accessibility/AccessibilityMixins.d.ts:14
Implementation of
Inherited from
backBuffer
> backBuffer: GlBackBufferSystem
BackBufferSystem instance.
Implementation of
Inherited from
background
> background: BackgroundSystem
Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/system/AbstractRenderer.d.ts:205
The background system manages the background color and alpha of the main view.
Implementation of
Inherited from
buffer
> buffer: GlBufferSystem
BufferSystem instance.
Implementation of
Inherited from
canvasText
> canvasText: AbstractTextSystem
Defined in: node_modules/pixi.js/lib/scene/text/TextMixins.d.ts:7
Implementation of
Inherited from
colorMask
> colorMask: GlColorMaskSystem
ColorMaskSystem instance.
Implementation of
Inherited from
config
> protected config: RendererConfig
Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/system/AbstractRenderer.d.ts:209
Inherited from
context
> context: GlContextSystem
ContextSystem instance.
Implementation of
Inherited from
encoder
> encoder: GlEncoderSystem
EncoderSystem instance.
Implementation of
Inherited from
events
> events: EventSystem
Defined in: node_modules/pixi.js/lib/events/EventsMixins.d.ts:78
Implementation of
Inherited from
extract
> extract: ExtractSystem
Implementation of
Inherited from
filter
> filter: FilterSystem
Defined in: node_modules/pixi.js/lib/filters/FilterMixins.d.ts:7
Implementation of
Inherited from
gc
> gc: GCSystem
Implementation of
Inherited from
geometry
> geometry: GlGeometrySystem
GeometrySystem instance.
Implementation of
Inherited from
gl
> gl: WebGL2RenderingContext
Defined in: node_modules/pixi.js/lib/rendering/renderers/gl/WebGLRenderer.d.ts:110
globalUniforms
> globalUniforms: GlobalUniformSystem
Implementation of
Inherited from
graphicsContext
> graphicsContext: GraphicsContextSystem
Defined in: node_modules/pixi.js/lib/scene/graphics/GraphicsMixins.d.ts:7
Implementation of
Inherited from
hello
> hello: HelloSystem
Implementation of
Inherited from
htmlText
> htmlText: HTMLTextSystem
Defined in: node_modules/pixi.js/lib/scene/text-html/TextHTMLMixins.d.ts:7
Implementation of
Inherited from
initHook
> initHook: RendererInitHook
Implementation of
Inherited from
limits
> limits: GlLimitsSystem
Implementation of
Inherited from
name
> readonly name: string
Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/system/AbstractRenderer.d.ts:191
The name of the renderer.
Inherited from
renderableGC
> renderableGC: RenderableGCSystem
Implementation of
Inherited from
renderGroup
> renderGroup: RenderGroupSystem
Implementation of
Inherited from
renderPipes
> readonly renderPipes: WebGLPipes
Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/system/AbstractRenderer.d.ts:201
Internal
Inherited from
renderTarget
> renderTarget: GlRenderTargetSystem
RenderTargetSystem instance.
Implementation of
Inherited from
runners
> readonly runners: Runners
Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/system/AbstractRenderer.d.ts:199
Internal
Inherited from
scheduler
> scheduler: SchedulerSystem
Implementation of
Inherited from
shader
> shader: GlShaderSystem
ShaderSystem instance.
Implementation of
Inherited from
state
> state: GlStateSystem
StateSystem instance.
Implementation of
Inherited from
stencil
> stencil: GlStencilSystem
StencilSystem instance.
Implementation of
Inherited from
texture
> texture: GlTextureSystem
TextureSystem instance.
Implementation of
Inherited from
textureGC
> textureGC: TextureGCSystem
Implementation of
Inherited from
textureGenerator
> textureGenerator: GenerateTextureSystem
Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/system/AbstractRenderer.d.ts:207
System that manages the generation of textures from the renderer
Implementation of
Inherited from
AbstractRenderer.textureGenerator
tick
> tick: number
Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/system/AbstractRenderer.d.ts:193
The current tick of the renderer.
Inherited from
type
> readonly type: number
Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/system/AbstractRenderer.d.ts:189
Internal
Inherited from
ubo
> ubo: GlUboSystem
UboSystem instance.
Implementation of
Inherited from
uid
> readonly uid: number
Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/system/AbstractRenderer.d.ts:195
Internal
Inherited from
uniformGroup
> uniformGroup: GlUniformGroupSystem
UniformGroupSystem instance.
Implementation of
Inherited from
view
> view: ViewSystem
Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/system/AbstractRenderer.d.ts:203
The view system manages the main canvas that is attached to the DOM
Implementation of
Inherited from
defaultOptions
> static defaultOptions: object
Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/system/AbstractRenderer.d.ts:153
The default options for the renderer.
failIfMajorPerformanceCaveat
> failIfMajorPerformanceCaveat: boolean
Should the failIfMajorPerformanceCaveat flag be enabled as a context option used in the isWebGLSupported
function. If set to true, a WebGL renderer can fail to be created if the browser thinks there could be
performance issues when using WebGL.
In PixiJS v6 this has changed from true to false by default, to allow WebGL to work in as many scenarios as possible. However, some users may have a poor experience, for example, if a user has a gpu or driver version blacklisted by the browser.
If your application requires high performance rendering, you may wish to set this to false. We recommend one of two options if you decide to set this flag to false:
1: Use the Canvas renderer as a fallback in case high performance WebGL is not supported.
2: Call isWebGLSupported (which if found in the utils package) in your code before attempting to create a
PixiJS renderer, and show an error message to the user if the function returns false, explaining that their
device & browser combination does not support high performance WebGL.
This is a much better strategy than trying to create a PixiJS renderer and finding it then fails.
Default
false
resolution
> resolution: number
Default resolution / device pixel ratio of the renderer.
Default
1
roundPixels
> roundPixels: boolean
Should round pixels be forced when rendering?
Default
false
Inherited from
AbstractRenderer.defaultOptions
prefixed
> static prefixed: string | boolean
Defined in: node_modules/eventemitter3/index.d.ts:9
Inherited from
canvas
Get Signature
> get canvas(): CANVAS
Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/system/AbstractRenderer.d.ts:269
The canvas element that everything is drawn to.
Returns
CANVAS
Inherited from
height
Get Signature
> get height(): number
Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/system/AbstractRenderer.d.ts:264
Same as view.height, actual number of pixels in the canvas by vertical.
Default
600
Returns
number
Inherited from
lastObjectRendered
Get Signature
> get lastObjectRendered(): Container
Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/system/AbstractRenderer.d.ts:274
the last object rendered by the renderer. Useful for other plugins like interaction managers
Returns
Inherited from
AbstractRenderer.lastObjectRendered
renderingToScreen
Get Signature
> get renderingToScreen(): boolean
Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/system/AbstractRenderer.d.ts:280
Flag if we are rendering to the screen vs renderTexture
Default
true
Returns
boolean
Inherited from
AbstractRenderer.renderingToScreen
resolution
Get Signature
> get resolution(): number
Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/system/AbstractRenderer.d.ts:251
The resolution / device pixel ratio of the renderer.
Returns
number
Set Signature
> set resolution(value): void
Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/system/AbstractRenderer.d.ts:252
Parameters
value
number
Returns
void
Inherited from
roundPixels
Get Signature
> get roundPixels(): boolean
Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/system/AbstractRenderer.d.ts:315
Whether the renderer will round coordinates to whole pixels when rendering. Can be overridden on a per scene item basis.
Returns
boolean
Inherited from
screen
Get Signature
> get screen(): Rectangle
Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/system/AbstractRenderer.d.ts:286
Measurements of the screen. (0, 0, screenWidth, screenHeight).
Its safe to use as filterArea or hitArea for the whole stage.
Returns
Inherited from
width
Get Signature
> get width(): number
Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/system/AbstractRenderer.d.ts:259
Same as view.width, actual number of pixels in the canvas by horizontal.
Default
800
Returns
number
Inherited from
addListener()
> addListener<T>(event, fn, context?): this
Defined in: node_modules/eventemitter3/index.d.ts:45
Type Parameters
T
T extends "resize"
Parameters
event
T
fn
(...args) => void
context?
any
Returns
this
Inherited from
AbstractRenderer.addListener
clear()
> clear(options?): void
Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/system/AbstractRenderer.d.ts:249
Clears the render target.
Parameters
options?
The options to use when clearing the render target.
Returns
void
Advanced
Inherited from
destroy()
> destroy(options?): void
Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/system/AbstractRenderer.d.ts:304
Parameters
options?
Returns
void
Inherited from
emit()
> emit<T>(event, ...args): boolean
Defined in: node_modules/eventemitter3/index.d.ts:32
Calls each of the listeners registered for a given event.
Type Parameters
T
T extends "resize"
Parameters
event
T
args
...ArgumentMap<{ resize: [number, number, number]; }>[Extract<T, "resize">]
Returns
boolean
Inherited from
AbstractRenderer.emit
eventNames()
> eventNames(): "resize"[]
Defined in: node_modules/eventemitter3/index.d.ts:15
Return an array listing the events for which the emitter has registered listeners.
Returns
"resize"[]
Inherited from
AbstractRenderer.eventNames
generateTexture()
> generateTexture(options): Texture
Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/system/AbstractRenderer.d.ts:310
Generate a texture from a container.
Parameters
options
Container<ContainerChild> | GenerateTextureOptions
options or container target to use when generating the texture
Returns
a texture
Inherited from
AbstractRenderer.generateTexture
init()
> init(options?): Promise<void>
Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/system/AbstractRenderer.d.ts:222
Initialize the renderer.
Parameters
options?
Partial<WebGLOptions>
The options to use to create the renderer.
Returns
Promise<void>
Inherited from
listenerCount()
> listenerCount(event): number
Defined in: node_modules/eventemitter3/index.d.ts:27
Return the number of listeners listening to a given event.
Parameters
event
"resize"
Returns
number
Inherited from
AbstractRenderer.listenerCount
listeners()
> listeners<T>(event): (...args) => void[]
Defined in: node_modules/eventemitter3/index.d.ts:20
Return the listeners registered for a given event.
Type Parameters
T
T extends "resize"
Parameters
event
T
Returns
(...args) => void[]
Inherited from
AbstractRenderer.listeners
off()
> off<T>(event, fn?, context?, once?): this
Defined in: node_modules/eventemitter3/index.d.ts:69
Type Parameters
T
T extends "resize"
Parameters
event
T
fn?
(...args) => void
context?
any
once?
boolean
Returns
this
Inherited from
AbstractRenderer.off
on()
> on<T>(event, fn, context?): this
Defined in: node_modules/eventemitter3/index.d.ts:40
Add a listener for a given event.
Type Parameters
T
T extends "resize"
Parameters
event
T
fn
(...args) => void
context?
any
Returns
this
Inherited from
AbstractRenderer.on
once()
> once<T>(event, fn, context?): this
Defined in: node_modules/eventemitter3/index.d.ts:54
Add a one-time listener for a given event.
Type Parameters
T
T extends "resize"
Parameters
event
T
fn
(...args) => void
context?
any
Returns
this
Inherited from
AbstractRenderer.once
removeAllListeners()
> removeAllListeners(event?): this
Defined in: node_modules/eventemitter3/index.d.ts:79
Remove all listeners, or those of the specified event.
Parameters
event?
"resize"
Returns
this
Inherited from
AbstractRenderer.removeAllListeners
removeListener()
> removeListener<T>(event, fn?, context?, once?): this
Defined in: node_modules/eventemitter3/index.d.ts:63
Remove the listeners of a given event.
Type Parameters
T
T extends "resize"
Parameters
event
T
fn?
(...args) => void
context?
any
once?
boolean
Returns
this
Inherited from
AbstractRenderer.removeListener
render()
Call Signature
> render(options): void
Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/system/AbstractRenderer.d.ts:229
Renders the object to its view.
Parameters
options
Container<ContainerChild> | RenderOptions
The options to render with.
Returns
void
Inherited from
Call Signature
> render(container, options): void
Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/system/AbstractRenderer.d.ts:231
Parameters
container
options
renderTexture
any
Returns
void
Deprecated
since 8.0.0
Inherited from
resetState()
> resetState(): void
Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/system/AbstractRenderer.d.ts:345
Resets the rendering state of the renderer. This is useful when you want to use the WebGL context directly and need to ensure PixiJS's internal state stays synchronized. When modifying the WebGL context state externally, calling this method before the next Pixi render will reset all internal caches and ensure it executes correctly.
This is particularly useful when combining PixiJS with other rendering engines like Three.js:
// Reset Three.js state
threeRenderer.resetState();
// Render a Three.js scene
threeRenderer.render(threeScene, threeCamera);
// Reset PixiJS state since Three.js modified the WebGL context
pixiRenderer.resetState();
// Now render Pixi content
pixiRenderer.render(pixiScene);
Returns
void
Advanced
Inherited from
resize()
> resize(desiredScreenWidth, desiredScreenHeight, resolution?): void
Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/system/AbstractRenderer.d.ts:240
Resizes the WebGL view to the specified width and height.
Parameters
desiredScreenWidth
number
The desired width of the screen.
desiredScreenHeight
number
The desired height of the screen.
resolution?
number
The resolution / device pixel ratio of the renderer.
Returns
void
Inherited from
rendering
prepare
> prepare: PrepareBase
Defined in: node_modules/pixi.js/lib/prepare/PrepareMixins.d.ts:13
The prepare mixin provides methods to prepare display objects for rendering. It is used to ensure that textures and other resources are ready before rendering.