Namespace: rendering

rendering

The rendering namespace contains all the classes used for core rendering in PixiJS this includes all the lower level resources such as Textures, Shaders, State, Buffers, Geometry and the systems required to use them. This covers WebGL and WebGPU and their shared classes.

To automatically create a renderer based on available resources, see the autoDetectRenderer function.

Classes

AbstractRenderer
BackgroundSystem
Batch
Batcher
BatcherPipe
BatchTextureArray
BindGroup
BindGroupSystem
BlendModePipe
Bounds
Buffer
BufferResource
CanvasPool
CanvasTextSystem
CustomRenderPipe
DefaultBatcher
DefaultShader
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
RendererInitHook
RenderGroup
RenderGroupSystem
RenderTarget
RenderTargetSystem
RenderTexture
SchedulerSystem
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

divisor number

attribute divisor for instanced rendering. Note: this is a WebGL-only feature, the WebGPU renderer will issue a warning if one of the attributes has divisor set.

format VertexFormat

the format of the attribute

instance boolean

is this an instanced buffer? (defaults to false)

offset number

the offset of the attribute from the buffer, defaults to 0 - in bytes

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 - in bytes

AutoDetectOptions

Options for autoDetectRenderer.

Properties:
Name Type Description
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 Attributes Default Description
background ColorSource <optional>

Alias for backgroundColor

backgroundAlpha number <optional>
1

Transparency of the background color, value from 0 (fully transparent) to 1 (fully opaque).

backgroundColor ColorSource <optional>
'black'

The background color used to clear the canvas. See ColorSource for accepted color values.

clearBeforeRender boolean <optional>
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.

BatchableElement

Represents an element that can be batched for rendering.

Properties:
Name Type Description
attributeSize number

The size of the attribute data.

batcherName string

The name of the batcher to use. Must be registered.

blendMode BLEND_MODES

The blend mode to be applied.

indexSize number

The size of the index data.

packAsQuad boolean

Whether the element should be packed as a quad for better performance.

texture Texture

The texture to be used for rendering.

topology Topology

The topology to be used for rendering.

_attributeStart number

The starting position in the attribute buffer.

_batch Batch

Reference to the batch.

_batcher Batcher

Reference to the batcher.

_indexStart number

The starting position in the index buffer.

_textureId number

The texture ID, stored for efficient updating.

BatchableMeshElement

Represents a batchable mesh element.

Properties:
Name Type Description
attributeOffset number

The offset in the attribute buffer.

indexOffset number

The offset in the index buffer.

indices Array<number> | Uint16Array | Uint32Array

The indices of the mesh.

packAsQuad false

Indicates that this element should not be packed as a quad.

positions Array<number> | Float32Array

The vertex positions of the mesh.

uvs Array<number> | Float32Array

The UV coordinates of the mesh.

BatchableQuadElement

Represents a batchable quad element.

Properties:
Name Type Description
attributeSize 4

The size of the attribute data for this quad element.

bounds BoundsData

The bounds data for this quad element.

indexSize 6

The size of the index data for this quad element.

packAsQuad true

Indicates that this element should be packed as a quad.

BatcherOptions

The options for the batcher.

Properties:
Name Type Description
maxTextures number

The maximum number of textures per batch.

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]

CacheAsTextureOptions

Options for caching a container as a texture.

Properties:
Name Type Default Description
antialias boolean false

If true, the texture will be antialiased. This smooths out the edges of the texture.

resolution number

The resolution of the texture. A higher resolution means a sharper texture but uses more memory. By default the resolution is 1 which is the same as the rendererers resolution.

See:
  • RenderGroup#textureOptions

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. if this target is a canvas and you are using the WebGL renderer, please ensure you have set multiView to true on renderer.

ContextSystemOptions

Options for the context system.

Properties:
Name Type Attributes Default Description
antialias boolean <optional>

Whether to enable antialiasing.

context WebGL2RenderingContext | unknown <optional>
null

User-provided WebGL rendering context object.

powerPreference GpuPowerPreference <optional>
'default'

An optional hint indicating what configuration of GPU is suitable for the WebGL 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.

preferWebGLVersion 1 | 2 <optional>
2

The preferred WebGL version to use.

premultipliedAlpha boolean <optional>
true

Whether the compositor will assume the drawing buffer contains colors with premultiplied alpha.

preserveDrawingBuffer boolean <optional>
false

Whether to enable drawing buffer preservation. If enabled, the drawing buffer will preserve its value until cleared or overwritten. Enable this if you need to call toDataUrl on the WebGL context.

DefaultBatchableMeshElement

Represents a batchable mesh element with default batch properties.

DefaultBatchableQuadElement

Represents a batchable quad element with default batch properties.

DefaultBatchElements

Represents the common elements for default batch rendering. This interface defines the properties that are used by the DefaultBatcher to render elements efficiently in a batch.

Properties:
Name Type Description
color number

The color of the element that will be multiplied with the texture color. This is typically represented as a 32-bit integer in RGBA format.

roundPixels 0 | 1

Determines whether the element should be rounded to the nearest pixel.

  • 0: No rounding (default)
  • 1: Round to nearest pixel This can help with visual consistency, especially for pixel art styles.
transform Matrix

The transform matrix of the element. This matrix represents the position, scale, rotation, and skew of the element.

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 AttributeOptions

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'

GlBackBufferOptions

The options for the back buffer system.

Properties:
Name Type Attributes Default Description
antialias boolean <optional>
false

if true will ensure the texture is antialiased

useBackBuffer boolean <optional>
false

if true will use the back buffer where required

antialias boolean

if true will ensure the texture is antialiased

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 Attributes Default Description
forceFallbackAdapter boolean <optional>
false

Force the use of the fallback adapter

powerPreference GpuPowerPreference <optional>
default

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)

HelloSystemOptions

Options for the startup system.

Properties:
Name Type Attributes Default Description
hello boolean <optional>
false

Whether to log the version and type information of renderer to console.

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.

RenderableGCSystemOptions

Options for the RenderableGCSystem.

Properties:
Name Type Attributes Default Description
renderableGCActive boolean <optional>
true

If set to true, this will enable the garbage collector on the renderables.

renderableGCAMaxIdle number <optional>
60000

The maximum idle frames before a texture is destroyed by garbage collection.

renderableGCCheckCountMax number <optional>
60000

time between two garbage collections.

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) => 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 true, 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

ShaderSystem

System plugin to the renderer to manage the shaders.

Properties:
Name Type Description
maxTextures number

the maximum number of textures that can be bound to a shader

SharedRendererOptions

Options for the shared systems of a renderer.

Properties:
Name Type Default 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.

This is only supported for HTMLCanvasElement and will be ignored if the canvas is an OffscreenCanvas.

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.

canvas ICanvas

The canvas to use as a view, optional.

clearBeforeRender boolean true

Whether to clear the canvas before new render passes.

context WebGL2RenderingContext | null null

User-provided WebGL rendering context object.

depth boolean

Whether to ensure the main view has can make use of the depth buffer. Always true for WebGL renderer.

height number 600

The height of the screen.

hello boolean false

Whether to log the version and type information of renderer to console.

manageImports boolean true
multiView boolean false

Whether to enable multi-view rendering. Set to true when rendering to multiple canvases on the dom.

powerPreference GpuPowerPreference undefined

An optional hint indicating what configuration of GPU is suitable for the WebGL 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.

preferWebGLVersion 1 | 2 2

The preferred WebGL version to use.

premultipliedAlpha boolean true

Whether the compositor will assume the drawing buffer contains colors with premultiplied alpha.

preserveDrawingBuffer boolean false

Whether to enable drawing buffer preservation. If enabled, the drawing buffer will preserve its value until cleared or overwritten. Enable this if you need to call toDataUrl on the WebGL context.

renderableGCActive boolean true

If set to true, this will enable the garbage collector on the GPU.

renderableGCFrequency number 600

Frames between two garbage collections.

renderableGCMaxUnusedTime number 60 * 60

The maximum idle frames before a texture is destroyed by garbage collection.

resolution number

The resolution / device pixel ratio of the renderer.

skipExtensionImports boolean false

Whether to stop PixiJS from dynamically importing default extensions for the renderer. It is false by default, and means PixiJS will load all the default extensions, based on the environment e.g browser/webworker. If you set this to true, then you will need to manually import the systems and extensions you need.

e.g.

import 'accessibility';
import 'app';
import 'events';
import 'spritesheet';
import 'graphics';
import 'mesh';
import 'text';
import 'text-bitmap';
import 'text-html';
import { autoDetectRenderer } from 'pixi.js';

const renderer = await autoDetectRenderer({
  width: 800,
  height: 600,
  skipExtensionImports: true,
});
textureGCActive boolean true

If set to true, this will enable the garbage collector on the GPU.

textureGCAMaxIdle number
textureGCCheckCountMax number 600

Frames between two garbage collections.

textureGCMaxIdle number 60 * 60

The maximum idle frames before a texture is destroyed by garbage collection.

width number 800

The width of the screen.

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 Attributes Default Description
textureGCActive boolean <optional>
true

If set to true, this will enable the garbage collector on the GPU.

textureGCAMaxIdle number <optional>
60 * 60

The maximum idle frames before a texture is destroyed by garbage collection.

textureGCCheckCountMax number <optional>
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

dynamic boolean

Set to true if you plan on modifying this texture's frame, UVs, or swapping its source at runtime. This is false by default as it improves performance. Generally, it's recommended to create new textures and swap those rather than modifying an existing texture's properties unless you are working with a dynamic frames. Not setting this to true when modifying the texture can lead to visual artifacts.

If this is false and you modify the texture, you can manually update the sprite's texture by calling sprite.onViewUpdate().

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 TextureSourceType

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 uploaded 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 Attributes Default Description
antialias boolean <optional>
false

Whether to enable anti-aliasing. This may affect performance.

autoDensity boolean <optional>
false

Resizes renderer view in CSS pixels to allow for resolutions other than 1. This is only supported for HTMLCanvasElement and will be ignored if the canvas is an OffscreenCanvas.

backgroundAlpha number <optional>

The alpha of the background.

canvas ICanvas <optional>

The canvas to use as a view, optional.

depth boolean <optional>

Whether to ensure the main view has can make use of the depth buffer. Always true for WebGL renderer.

height number <optional>
600

The height of the screen.

multiView boolean <optional>

TODO: multiView

resolution number <optional>

The resolution / device pixel ratio of the renderer.

width number <optional>
800

The width of the screen.

backgroundAlpha number 1

Transparency of the background color, value from 0 (fully transparent) to 1 (fully opaque).

view ICanvas

WebGLOptions

Options for WebGLRenderer.

Properties:
Name Type Default Description
useBackBuffer boolean false

if true will use the back buffer where required

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.

WebGPUOptions

Options for WebGPURenderer.

Properties:
Name Type Default Description
forceFallbackAdapter boolean false

Force the use of the fallback adapter

powerPreference GpuPowerPreference undefined

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.

Members

BLEND_TO_NPM readonly

The map of blend modes supported by Pixi

Enums

BufferUsage

Buffer usage flags. they can be combined using the bitwise OR operator eg : BufferUsage.VERTEX | BufferUsage.INDEX

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().)

STENCIL_MODES

The stencil operation to perform when using the stencil buffer

Type Definitions

AttributeOption

The attribute options used by the constructor for adding geometries attributes extends Attribute but allows for the buffer to be a typed or number array

CULL_MODES

The culling mode to use. It can be either none, front or back.

ExtractDownloadOptions

Options for extracting and downloading content from a renderer.

Properties:
Name Type Description
filename string

The filename to use when downloading the content.

ExtractImageOptions

Options for extracting an HTMLImage from the renderer.

ExtractOptions

Options for extracting content from a renderer.

GenerateTextureOptions

Options for generating a texture from a container.

Properties:
Name Type Description
antialias boolean

Whether to enable anti-aliasing. This may affect performance.

clearColor ColorSource

The color used to clear the texture.

frame Rectangle

The region of the container, that shall be rendered, if no region is specified, defaults to the local bounds of the container.

resolution number

The resolution of the texture being generated.

target Container

The container to generate the texture from

textureSourceOptions GenerateTextureSourceOptions

The options passed to the texture source.

ProgramLayout

a map the maps names of uniforms to group indexes

ProgramPipelineLayoutDescription

a WebGPU descriptions of how the program is laid out

See:

Renderer

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.

bindGroup BindGroupSystem

BindGroupSystem instance.

buffer GpuBufferSystem

BufferSystem instance.

canvas ICanvas

The canvas element that everything is drawn to.

colorMask GpuColorMaskSystem

ColorMaskSystem instance.

device GpuDeviceSystem

DeviceSystem instance.

encoder GpuEncoderSystem

EncoderSystem instance.

events rendering.EventSystem

EventSystem instance.

extract ExtractSystem

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

filter FilterSystem

FilterSystem instance.

globalUniforms GlobalUniformSystem

GlobalUniformSystem instance.

gpu GPU

The WebGPU Device.

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.

pipeline PipelineSystem

PipelineSystem instance.

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

renderTarget GpuRenderTargetSystem

RenderTargetSystem instance.

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.

shader GpuShaderSystem

ShaderSystem instance.

state GpuStateSystem

StateSystem instance.

stencil GpuStencilSystem

StencilSystem instance.

texture rendering.TextureSystem

TextureSystem instance.

textureGC TextureGCSystem

TextureGCSystem instance.

textureGenerator GenerateTextureSystem

System that manages the generation of textures from the renderer

ubo GpuUboSystem

UboSystem instance.

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.

RenderSurface

A render surface is a texture, canvas, or render target

See:

ShaderGroups

A record of BindGroup's used by the shader.

Record<number, BindGroup>

ShaderWith

A descriptor for a shader

ShaderWithGroups

A descriptor for a shader with groups.

ShaderWithResources

A descriptor for a shader with resources. This is an easier way to work with uniforms. especially when you are not working with bind groups

Topology

The different topology types supported by the renderer used to describe how the geometry should be renderer

UniformGroupOptions

Uniform group options

Properties:
Name Type Description
isStatic boolean

if true, then you are responsible for when the data is uploaded to the GPU by calling update()

ubo boolean

if true the UniformGroup is handled as an Uniform buffer object. This is the only way WebGPU can work with uniforms. WebGL2 can also use this. So don't set to true if you want to use WebGPU :D

UVs

The UVs data structure for a texture.

VertexFormat

The different types of vertex formats supported by the renderer

Methods

autoDetectRenderer (options) Promise<Renderer>

Automatically determines the most appropriate renderer for the current environment.

The function will prioritize the WebGL renderer as it is the most tested safe API to use. In the near future as WebGPU becomes more stable and ubiquitous, it will be prioritized over WebGL.

The selected renderer's code is then dynamically imported to optimize performance and minimize the initial bundle size.

To maximize the benefits of dynamic imports, it's recommended to use a modern bundler that supports code splitting. This will place the renderer code in a separate chunk, which is loaded only when needed.

Name Type Description
options Partial<AutoDetectOptions>

A partial configuration object based on the AutoDetectOptions type.

Returns:
Type Description
Promise<Renderer> A Promise that resolves to an instance of the selected renderer.
Example
 // 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'
   }
  });

buildUvs (vertices, verticesStride, verticesOffset, uvs, uvsOffset, uvsStride, size, matrix) void

Takes a vertices array and a matrix and transforms the vertices based on the matrix. this out put is written to the uvs array

Name Type Default Description
vertices number[]

the vertices to calculate uvs from

verticesStride number

the stride of the vertice

verticesOffset number

the offset of the vertices

uvs number[]

the uvs to fill

uvsOffset number

the offset of the uvs

uvsStride number

the stride of the uvs

size number

the size of the vertices

matrix Matrix undefined

the matrix to apply to the uvs

ensureIsBuffer (buffer, index) Buffer

Converts something into a buffer. If it is already a buffer it will pass it through if it is a number array it will convert it to a float32 array before being passed into a buffer the buffer will be created with the correct usage flags for geometry attributes

Name Type Description
buffer Buffer | TypedArray | number[]

number array

index boolean

is this an index buffer?

Returns:
Type Description
Buffer a buffer

transformVertices (vertices, m, offset, stride, size)

Transforms the vertices in an array with the given matrix.

Name Type Attributes Description
vertices number[]

the vertices to transform

m Matrix

the matrix to apply to the vertices

offset number <optional>

the offset of the vertices (defaults to 0)

stride number <optional>

the stride of the vertices (defaults to 2)

size number <optional>

the size of the vertices (defaults to vertices.length / stride - offset)