PixiJS API Documentation

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:195

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

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?

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:

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:

Methods

generateTexture (options) Texture

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)

ts:214

Initialize the renderer.

Name	Type	Description
`options`	Partial<OPTIONS>	The options to use to create the renderer.

render (options) void

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

ts:257

Name	Type	Description
`container`	Container
`options`	{ renderTexture: any }

resize (desiredScreenWidth, desiredScreenHeight, resolution) void

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.