Namespace: rendering

Classes

AbstractRenderer

BackgroundSystem

Batch

BatchTextureArray

BindGroup

BindGroupSystem

BlendModePipe

Bounds

Buffer

BufferResource

CanvasPool

CanvasTextSystem

CustomRenderPipe

ExtractSystem

FilterSystem

GenerateTextureSystem

Geometry

GlBackBufferSystem

GlBufferSystem

GlColorMaskSystem

GlContextSystem

GlEncoderSystem

GlGeometrySystem

GlobalUniformSystem

GlProgram

GlRenderTargetSystem

GlShaderSystem

GlStateSystem

GlStencilSystem

GlTextureSystem

GlUboSystem

GlUniformGroupSystem

GpuBufferSystem

GpuColorMaskSystem

GpuDeviceSystem

GpuEncoderSystem

GpuProgram

GpuRenderTargetSystem

GpuShaderSystem

GpuStateSystem

GpuStencilSystem

GpuTextureSystem

GpuUboSystem

GraphicsContextSystem

HelloSystem

HTMLTextSystem

InstructionSet

PipelineSystem

PrepareBase

PrepareQueue

PrepareSystem

PrepareUpload

RenderGroup

RenderGroupSystem

RenderTarget

RenderTargetSystem

RenderTexture

Shader

State

SystemRunner

Texture

TextureGCSystem

TextureMatrix

TexturePool

TextureSource

TextureStyle

UboSystem

UniformGroup

VideoSource

ViewSystem

WebGLRenderer

WebGPURenderer

TextureUvs

Interface Definitions

Attribute

The attribute data for a geometries attributes

Properties:

Name	Type	Description
buffer	Buffer	the buffer that this attributes data belongs to
format	VertexFormat	the format of the attribute
instance	boolean	is this an instanced buffer? (defaults to false)
location	number	set where the shader location is for this attribute
offset	number	the offset of the attribute from the buffer, defaults to 0
size	number	The number of elements to be rendered. If not specified, all vertices after the starting vertex will be drawn.
start	number	The starting vertex in the geometry to start drawing from. If not specified, drawing will start from the first vertex.
stride	number	the stride of the data in the buffer
type	number	the type of attribute

AutoDetectOptions

Options for autoDetectRenderer.

Properties:

Name	Type	Description
manageImports	boolean	Whether to manage the dynamic imports of the renderer code. It is true by default, this means PixiJS will load all the default pixi systems and extensions. If you set this to false, then you as the dev will need to manually import the systems and extensions you need.
preference	"webgl" | "webgpu"	The preferred renderer type. WebGPU is recommended as its generally faster than WebGL.
webgl	Partial<WebGLOptions>	Optional WebGLOptions to pass only to the WebGL renderer
webgpu	Partial<WebGPUOptions>	Optional WebGPUOptions to pass only to WebGPU renderer.

BackgroundSystemOptions

Options for the background system.

Properties:

Name	Type	Default	Description
background	ColorSource		Alias for backgroundColor
backgroundAlpha	number	1	Transparency of the background color, value from 0 (fully transparent) to 1 (fully opaque).
backgroundColor	ColorSource	'black'	The background color used to clear the canvas. See ColorSource for accepted color values.
clearBeforeRender	boolean	true	Whether to clear the canvas before new render passes.

BaseExtractOptions

Options for extracting content from a renderer.

Properties:

Name	Type	Description
antialias	boolean	Whether to enable anti-aliasing. This may affect performance.
clearColor	ColorSource	The color used to clear the extracted content.
frame	Rectangle	The region of the target to extract.
resolution	number	The resolution of the extracted content.
target	Container | Texture	The target to extract.

BindResource

an interface that allows a resource to be bound to the gpu in a bind group

BoundsData

Simple bounds implementation instead of more ambiguous [number, number, number, number]

ClearOptions

The options for clearing the render target.

Properties:

Name	Type	Description
clear	CLEAR_OR_BOOL	The clear mode to use.
clearColor	ColorSource	The color to clear with.
target	RenderSurface	The render target to render.

Effect

An effect that can be applied to a container. This is used to create effects such as filters/masks etc.

GeometryDescriptor

the interface that describes the structure of the geometry

Properties:

Name	Type	Description
attributes	Record<string, AttributesOption>	the attributes that make up the geometry
indexBuffer	Buffer | TypedArray | number[]	optional index buffer for this geometry
label	string	an optional label to easily identify the geometry
topology	Topology	the topology of the geometry, defaults to 'triangle-list'

GlProgramOptions

The options for the gl program

Properties:

Name	Type	Description
fragment	string	The fragment glsl shader source.
name	string	the name of the program, defaults to 'pixi-program'
preferredFragmentPrecision	string	the preferred fragment precision for the shader, this may not be used if the device does not support it
preferredVertexPrecision	string	the preferred vertex precision for the shader, this may not be used if the device does not support it
vertex	string	The vertex glsl shader source.

GpuContextOptions

Options for the WebGPU context.

Properties:

Name	Type	Description
forceFallbackAdapter	boolean	Force the use of the fallback adapter
powerPreference	GpuPowerPreference	An optional hint indicating what configuration of GPU is suitable for the WebGPU context, can be 'high-performance' or 'low-power'. Setting to 'high-performance' will prioritize rendering performance over power consumption, while setting to 'low-power' will prioritize power saving over rendering performance.

GpuProgramOptions

The options for the gpu program

Properties:

Name	Type	Description
fragment	ProgramSource	The fragment glsl shader source.
gpuLayout	ProgramPipelineLayoutDescription	The gpu layout of the program. If not provided, it will be generated from the shader sources.
layout	ProgramLayout	The layout of the program. If not provided, it will be generated from the shader sources.
name	string	the name of the program, this is added to the label of the GPU Program created under the hood. Makes it much easier to debug!
vertex	ProgramSource	The vertex glsl shader source.

GraphicsContextSystemOptions

Options for the GraphicsContextSystem.

Properties:

Name	Type	Description
bezierSmoothness	number	A value from 0 to 1 that controls the smoothness of bezier curves (the higher the smoother)

ImageOptions

Options for creating an image from a renderer.

Properties:

Name	Type	Description
format	Formats	The format of the image.
quality	number	The quality of the image.

Instruction

An instruction that can be executed by the renderer

Properties:

Name	Type	Description
action	string	the name of the instruction
canBundle	boolean	true if this instruction can be compiled into a WebGPU bundle
renderPipeId	string	a the id of the render pipe that can run this instruction

InstructionPipe

An interface for a pipe that can be used to build instructions for the renderer. InstructionPipes are specifically used to manage the state of the renderer. For example, the BlendModePipe is used to set the blend mode of the renderer.

Properties:

Name	Type	Description
execute	(instruction: INSTRUCTION) => void	this is where the actual instruction is executed - eg make the draw call activate a filter. Any instructions that have the same renderPipeId have their execute method called
pop	(effect: Effect, targetContainer: Container, instructionSet: InstructionSet) => void	Used by effect pipes to pop effects from the renderer.
push	(effect: Effect, targetContainer: Container, instructionSet: InstructionSet) => void	Used by the effect pipes push and pop effects to the renderer. A push effect allows the renderer to change its state to support the effect. A pop effect allows the renderer to return to its previous state. An example of this would be the filter effect.
renderEnd	() => void	Called just after the render ends giving the RenderPipes a chance to do any cleanup
renderStart	() => void	Called just before the render starts giving the RenderPipes a chance to do any setup
upload	(instructionSet: InstructionSet) => void	called just before we execute the draw calls , this is where the pipes have an opportunity to upload data to the GPU. This is only called if data changes.

ProgramSource

the program source

Properties:

Name	Type	Description
entryPoint	string	The main function to run in this shader
source	string	The wgsl source code of the shader.

RenderOptions

The options for rendering a view.

Properties:

Name	Type	Description
container	Container	The container to render.
transform	Matrix	the transform to apply to the container.

RenderPipe

An interface for a pipe that can be used to build instructions for the renderer. RenderPipes are specifically used to render Renderables like a Mesh.

Properties:

Name	Type	Description
addRenderable	(renderable: RENDERABLE, instructionSet: InstructionSet) => void	This is where the renderable is added to the instruction set. This is called once per renderable. For instance, a MeshRenderPipe could be used to enqueue a 'draw mesh' command to the rendering instruction set, catering to the rendering of mesh geometry. In more complex scenarios, such as the SpritePipe, this seamlessly coordinates with a batchPipe to efficiently batch and add batch instructions to the instructions set Add is called when the instructions set is being built.
destroyRenderable	(renderable: RENDERABLE) => void	Called whenever a renderable is destroyed, often the pipes keep a webGL / webGPU specific representation of the renderable that needs to be tidied up when the renderable is destroyed.
updateRenderable	(renderable: RENDERABLE, instructionSet: InstructionSet) => void	Called whenever a renderable has been been updated, eg its position has changed. This is only called in the render loop if the instructions set is being reused from the last frame. Otherwise addRenderable is called.
validateRenderable	(renderable: RENDERABLE) => boolean	This function is called when the renderer is determining if it can use the same instruction set again to improve performance. If this function returns false, the renderer will rebuild the whole instruction set for the scene. This is only called if the scene has not its changed its structure .

RenderTargetOptions

Options for creating a render target.

Properties:

Name	Type	Description
antialias	boolean	should this render target be antialiased?
colorTextures	BindableTexture[] | number	an array of textures, or a number indicating how many color textures there should be
depth	boolean	should this render target have a depth buffer?
depthStencilTexture	BindableTexture | boolean	a depth stencil texture that the depth and stencil outputs will be written to
height	number	the height of the RenderTarget
isRoot	boolean	is this a root element, true if this is gl context owners render target
resolution	number	the resolution of the RenderTarget
stencil	boolean	should this render target have a stencil buffer?
width	number	the width of the RenderTarget

TextureBorders

Stores the width of the non-scalable borders, for example when used with NineSlicePlane texture.

Properties:

Name	Type	Description
bottom	number	bottom border in pixels
left	number	left border in pixels
right	number	right border in pixels
top	number	top border in pixels

TextureGCSystemOptions

Options for the TextureGCSystem.

Properties:

Name	Type	Default	Description
textureGCActive	boolean	true	If set to true, this will enable the garbage collector on the GPU.
textureGCAMaxIdle	number	60 * 60	The maximum idle frames before a texture is destroyed by garbage collection.
textureGCCheckCountMax	number	600	Frames between two garbage collections.

TextureOptions

The options that can be passed to a new Texture

Properties:

Name	Type	Description
defaultAnchor	{    x: number,    y: number }	Default anchor point used for sprite placement / rotation
defaultBorders	TextureBorders	Default borders used for 9-slice scaling NineSlicePlane
frame	Rectangle	The rectangle frame of the texture to show
label	string	optional label, for debugging
orig	Rectangle	The area of original texture
rotate	number	indicates how the texture was rotated by texture packer. See groupD8
source	TextureSource	the underlying texture data that this texture will use
trim	Rectangle	Trimmed rectangle of original texture

TextureSourceOptions

options for creating a new TextureSource

Properties:

Name	Type	Description
alphaMode	ALPHA_MODES	the alpha mode of the texture
antialias	boolean	Only really affects RenderTextures. Should we use antialiasing for this texture. It will look better, but may impact performance as a Blit operation will be required to resolve the texture.
autoGarbageCollect	boolean	If true, the Garbage Collector will unload this texture if it is not used after a period of time
autoGenerateMipmaps	boolean	Should we auto generate mipmaps for this texture? This will automatically generate mipmaps for this texture when uploading to the GPU. Mipmapped textures take up more memory, but can look better when scaled down. For performance reasons, it is recommended to NOT use this with RenderTextures, as they are often updated every frame. If you do, make sure to call updateMipmaps after you update the texture.
dimensions	TEXTURE_DIMENSIONS	how many dimensions does this texture have? currently v8 only supports 2d
format	TEXTURE_FORMATS	the format that the texture data has
height	number	the pixel height of this texture source. This is the REAL pure number, not accounting resolution
label	string	optional label, can be used for debugging
mipLevelCount	number	The number of mip levels to generate for this texture. this is overridden if autoGenerateMipmaps is true
resolution	number	the resolution of the texture.
resource	T	the resource that will be upladed to the GPU. This is where we get our pixels from eg an ImageBimt / Canvas / Video etc
width	number	the pixel width of this texture source. This is the REAL pure number, not accounting resolution

VideoSourceOptions

Options for video sources.

Properties:

Name	Type	Description
alphaMode	ALPHA_MODES	The alpha mode of the video.
autoLoad	boolean	If true, the video will start loading immediately.
autoPlay	boolean	If true, the video will start playing as soon as it is loaded.
crossorigin	boolean | string	If true, the video will be loaded with the crossorigin attribute.
loop	boolean	If true, the video will loop when it ends.
muted	boolean	If true, the video will be muted.
playsinline	boolean	If true, the video will play inline.
preload	boolean	If true, the video will be preloaded.
preloadTimeoutMs	number	The time in milliseconds to wait for the video to preload before timing out.
updateFPS	number	The number of times a second to update the texture from the video. Leave at 0 to update at every render.

ViewSystemOptions

Options passed to the ViewSystem

Properties:

Name	Type	Description
antialias	boolean	Whether to enable anti-aliasing. This may affect performance.
autoDensity	boolean	Resizes renderer view in CSS pixels to allow for resolutions other than 1.
canvas	ICanvas	The canvas to use as a view, optional.
depth	boolean	Whether to ensure the main view has can make use of the depth buffer. Always true for WebGL renderer.
height	number	The height of the screen.
multiView	boolean	TODO: multiView
resolution	number	The resolution / device pixel ratio of the renderer.
view	ICanvas
width	number	The width of the screen.

WebGLOptions

Options for WebGLRenderer.

WebGLRenderer

The default WebGL renderer, uses WebGL2 contexts.

Properties:

Name	Type	Default	Description
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	600	Same as view.height, actual number of pixels in the canvas by vertical.
hello	HelloSystem		HelloSystem instance.
lastObjectRendered	Container		the last object rendered by the renderer. Useful for other plugins like interaction managers
name	string		The name of the renderer.
prepare	PrepareSystem		PrepareSystem instance. Requires import 'pixi.js/prepare'.
renderGroup	RenderGroupSystem		RenderGroupSystem instance.
renderingToScreen	boolean	true	Flag if we are rendering to the screen vs renderTexture
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	800	Same as view.width, actual number of pixels in the canvas by horizontal.

Members

Enums

Properties:

Name	Description
COPY_DST	The buffer can be used as the destination of a copy or write operation. (Examples: as the destination argument of a copyBufferToBuffer() or copyTextureToBuffer() call, or as the target of a writeBuffer() call.)
COPY_SRC	The buffer can be used as the source of a copy operation. (Examples: as the source argument of a copyBufferToBuffer() or copyBufferToTexture() call.)
INDEX	The buffer can be used as an index buffer. (Example: passed to setIndexBuffer().)
INDIRECT	The buffer can be used as to store indirect command arguments. (Examples: as the indirectBuffer argument of a drawIndirect() or dispatchWorkgroupsIndirect() call.)
MAP_READ	The buffer can be mapped for reading. (Example: calling mapAsync() with GPUMapMode.READ) May only be combined with COPY_DST.
MAP_WRITE	The buffer can be mapped for writing. (Example: calling mapAsync() with GPUMapMode.WRITE) May only be combined with COPY_SRC.
QUERY_RESOLVE	The buffer can be used to capture query results. (Example: as the destination argument of a resolveQuerySet() call.)
STATIC	the buffer will not be updated frequently
STORAGE	The buffer can be used as a storage buffer. (Example: as a bind group entry for a GPUBufferBindingLayout with a buffer.type of "storage" or "read-only-storage".)
UNIFORM	The buffer can be used as a uniform buffer. (Example: as a bind group entry for a GPUBufferBindingLayout with a buffer.type of "uniform".)
VERTEX	The buffer can be used as a vertex buffer. (Example: passed to setVertexBuffer().)

Type Definitions

Methods

 // create a renderer
 const renderer = await autoDetectRenderer({
   width: 800,
   height: 600,
   antialias: true,
 });

 // custom for each renderer
 const renderer = await autoDetectRenderer({
   width: 800,
   height: 600,
   webgpu:{
     antialias: true,
     backgroundColor: 'red'
   },
   webgl:{
     antialias: true,
     backgroundColor: 'green'
   }
  });