PixiJS

Class: AbstractRenderer

AbstractRenderer

The base class for a PixiJS Renderer. It contains the shared logic for all renderers.

You should not use this class directly, but instead use {@linkrendering.WebGLRenderer} or WebGPURenderer. Alternatively, you can also use autoDetectRenderer if you want us to determine the best renderer for you.

The renderer is composed of systems that manage specific tasks. The following systems are added by default whenever you create a renderer:

Generic Systems Systems that manage functionality that all renderer types share
ViewSystem This manages the main view of the renderer usually a Canvas
BackgroundSystem This manages the main views background color and alpha
EventSystem This manages UI events.
AccessibilitySystem This manages accessibility features. Requires import 'pixi.js/accessibility'
Core Systems Provide an optimised, easy to use API to work with WebGL/WebGPU
RenderGroupSystem This manages the what what we are rendering to (eg - canvas or texture)
GlobalUniformSystem This manages shaders, programs that run on the GPU to calculate 'em pixels.
TextureGCSystem This will automatically remove textures from the GPU if they are not used.
PixiJS High-Level Systems Set of specific systems designed to work with PixiJS objects
HelloSystem Says hello, buy printing out the pixi version into the console log (along with the renderer type)
GenerateTextureSystem This adds the ability to generate textures from any Container
FilterSystem This manages the filtering pipeline for post-processing effects.
PrepareSystem This manages uploading assets to the GPU. Requires import 'pixi.js/prepare'
ExtractSystem This extracts image data from display objects.

The breadth of the API surface provided by the renderer is contained within these systems.

new AbstractRenderer (config)

ts:197

Set up a system with a collection of SystemClasses and runners. Systems are attached dynamically to this class when added.

Name Type Description
config RendererConfig

the config for the system manager

Members

defaultOptions static

The default options for the renderer.

Properties:
Name Type Default Description
failIfMajorPerformanceCaveat boolean false

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.
resolution number 1

Default resolution / device pixel ratio of the renderer.
roundPixels boolean false

Should round pixels be forced when rendering?

accessibility rendering.AccessibilitySystem

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

background BackgroundSystem

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

canvas ICanvas

The canvas element that everything is drawn to.

events rendering.EventSystem

EventSystem instance.

extract ExtractSystem

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

filter FilterSystem

FilterSystem instance.

globalUniforms GlobalUniformSystem

GlobalUniformSystem instance.

height number

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

Default Value:
  • 600

hello HelloSystem

HelloSystem instance.

lastObjectRendered Container readonly

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

name string readonly

The name of the renderer.

prepare PrepareSystem

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

renderGroup RenderGroupSystem

RenderGroupSystem instance.

renderingToScreen boolean readonly

Flag if we are rendering to the screen vs renderTexture

Default Value:
  • true

resolution number

The resolution / device pixel ratio of the renderer.

roundPixels boolean

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

screen Rectangle

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

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

texture rendering.TextureSystem

TextureSystem instance.

textureGC TextureGCSystem

TextureGCSystem instance.

textureGenerator GenerateTextureSystem

System that manages the generation of textures from the renderer

view ViewSystem

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

width number readonly

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

Default Value:
  • 800

Methods

generateTexture (options) Texture

ts:517

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)

ts:216

Initialize the renderer.

Name Type Description
options Partial<OPTIONS>

The options to use to create the renderer.

render (options) void

ts:252

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

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

resetState () void

ts:550

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);

resize (desiredScreenWidth, desiredScreenHeight, resolution) void

ts:315

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.