Abstract AdvancedSet up a system with a collection of SystemClasses and runners. Systems are attached dynamically to this class when added.
the config for the system manager
The background system manages the background color and alpha of the main view.
ReadonlynameThe name of the renderer.
System that manages the generation of textures from the renderer
The view system manages the main canvas that is attached to the DOM
StaticdefaultThe default options for the renderer.
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 resolution / device pixel ratio of the renderer.
Should round pixels be forced when rendering?
The canvas element that everything is drawn to.
the last object rendered by the renderer. Useful for other plugins like interaction managers
The resolution / device pixel ratio of the renderer.
Whether the renderer will round coordinates to whole pixels when rendering. Can be overridden on a per scene item basis.
Measurements of the screen. (0, 0, screenWidth, screenHeight).
Its safe to use as filterArea or hitArea for the whole stage.
AdvancedClears the render target.
The options to use when clearing the render target.
The options for clearing the render target.
Optionalclear?: CLEAR_OR_BOOLThe clear mode to use.
OptionalclearColor?: ColorSourceThe color to clear with.
Optionaltarget?: RenderSurfaceThe render target to render. if this target is a canvas and you are using the WebGL renderer,
please ensure you have set multiView to true on renderer.
Generate a texture from a container.
options or container target to use when generating the texture
a texture
Renders the object to its view.
The options to render with.
The options for rendering a view.
Optionalclear?: CLEAR_OR_BOOLThe clear mode to use.
OptionalclearColor?: ColorSourceThe color to clear with.
The container to render.
Optionaltarget?: RenderSurfaceThe render target to render. if this target is a canvas and you are using the WebGL renderer,
please ensure you have set multiView to true on renderer.
Optionaltransform?: Matrixthe transform to apply to the container.
AdvancedResets 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);
Resizes the WebGL view to the specified width and height.
The desired width of the screen.
The desired height of the screen.
Optionalresolution: numberThe resolution / device pixel ratio of the renderer.
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 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:
import 'pixi.js/accessibility'import 'pixi.js/prepare'The breadth of the API surface provided by the renderer is contained within these systems.