Namespace: rendering

Classes

AbstractRenderer

BackgroundSystem

Batch

BatchableGraphics

BatchableMesh

BatchableSprite

Batcher

BatchTextureArray

BindGroup

BlendModePipe

Bounds

Buffer

BufferResource

CanvasPool

CanvasTextSystem

CustomRenderPipe

ExtractSystem

FilterSystem

GenerateTextureSystem

Geometry

GlBackBufferSystem

GlBatchAdaptor

GlBufferSystem

GlContextSystem

GlGeometrySystem

GlGraphicsAdaptor

GlMeshAdaptor

GlProgram

GlRenderTarget

GlRenderTargetAdaptor

GlShaderSystem

GlStateSystem

GlTexture

GlUboSystem

GlUniformGroupSystem

GpuBatchAdaptor

GpuBufferSystem

GpuDeviceSystem

GpuGraphicsAdaptor

GpuGraphicsContext

GpuMeshAdapter

GpuMipmapGenerator

GpuProgram

GpuRenderTarget

GpuRenderTargetAdaptor

GpuRenderTargetSystem

GpuShaderSystem

GpuStateSystem

GpuUboSystem

GraphicsContextRenderData

GraphicsContextSystem

HelloSystem

HTMLTextSystem

InstructionSet

MaskEffectManagerClass

PrepareBase

PrepareQueue

PrepareSystem

PrepareUpload

RenderGroup

RenderGroupSystem

RenderTargetSystem

RenderTexture

Shader

State

SystemRunner

Texture

TextureGCSystem

TextureMatrix

TexturePool

TextureSource

TextureStyle

UboSystem

UniformGroup

VideoSource

ViewSystem

WebGLRenderer

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.

BindResource

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

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.

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.

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.

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 .

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