PixiJS

Class: WebGLRenderer

WebGLRenderer

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.

Extends

Implements

Members

backBuffer GlBackBufferSystem

BackBufferSystem instance.

buffer GlBufferSystem

BufferSystem instance.

colorMask GlColorMaskSystem

ColorMaskSystem instance.

context GlContextSystem

ContextSystem instance.

encoder GlEncoderSystem

EncoderSystem instance.

geometry GlGeometrySystem

GeometrySystem instance.

renderTarget GlRenderTargetSystem

RenderTargetSystem instance.

shader GlShaderSystem

ShaderSystem instance.

state GlStateSystem

StateSystem instance.

stencil GlStencilSystem

StencilSystem instance.

texture GlTextureSystem overrides

TextureSystem instance.

ubo GlUboSystem

UboSystem instance.

uniformGroup GlUniformGroupSystem

UniformGroupSystem instance.

Inherited Properties

From class AbstractRenderer

accessibility rendering.AccessibilitySystem inherited

AccessibilitySystem instance. Requires import 'pixi.js/accessibility'.

background BackgroundSystem inherited

The background system manages the background color and alpha of the main view.

canvas ICanvas inherited

The canvas element that everything is drawn to.

events rendering.EventSystem inherited

EventSystem instance.

extract ExtractSystem inherited

ExtractSystem instance. Requires import 'pixi.js/extract'.

filter FilterSystem inherited

FilterSystem instance.

globalUniforms GlobalUniformSystem inherited

GlobalUniformSystem instance.

height number inherited

Same as view.height, actual number of pixels in the canvas by vertical.

Default Value:
  • 600

hello HelloSystem inherited

HelloSystem instance.

lastObjectRendered Container readonly inherited

the last object rendered by the renderer. Useful for other plugins like interaction managers

name string readonly inherited

The name of the renderer.

prepare PrepareSystem inherited

PrepareSystem instance. Requires import 'pixi.js/prepare'.

renderGroup RenderGroupSystem inherited

RenderGroupSystem instance.

renderingToScreen boolean readonly inherited

Flag if we are rendering to the screen vs renderTexture

Default Value:
  • true

resolution number inherited

The resolution / device pixel ratio of the renderer.

roundPixels boolean inherited

Whether the renderer will round coordinates to whole pixels when rendering. Can be overridden on a per scene item basis.

screen Rectangle inherited

Measurements of the screen. (0, 0, screenWidth, screenHeight).

Its safe to use as filterArea or hitArea for the whole stage.

textureGC TextureGCSystem inherited

TextureGCSystem instance.

textureGenerator GenerateTextureSystem inherited

System that manages the generation of textures from the renderer

view ViewSystem inherited

The view system manages the main canvas that is attached to the DOM

width number readonly inherited

Same as view.width, actual number of pixels in the canvas by horizontal.

Default Value:
  • 800

Inherited Methods

From class AbstractRenderer

generateTexture (options) Texture inherited

ts:504

Generate a texture from a container.

Name Type Description
options GenerateTextureOptions | Container

options or container target to use when generating the texture
Returns:
Type Description
Texture a texture

init (options) inherited

ts:214

Initialize the renderer.

Name Type Description
options Partial<OPTIONS>

The options to use to create the renderer.

render (options) void inherited

ts:250

Renders the object to its view.

Name Type Attributes Description
options RenderOptions | Container

The options to render with.
options.container

The container to render.
options.target <optional>

The target to render to.

render (container, options) void Deprecated`` : since 8.0.0 inherited

ts:257
Name Type Description
container Container
options {
   renderTexture: any
}

resize (desiredScreenWidth, desiredScreenHeight, resolution) void inherited

ts:308

Resizes the WebGL view to the specified width and height.

Name Type Attributes Description
desiredScreenWidth number

The desired width of the screen.
desiredScreenHeight number

The desired height of the screen.
resolution number <optional>

The resolution / device pixel ratio of the renderer.