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
-
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
-
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.
-
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) to1
(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.
-
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.
-
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.
-
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.
-
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.
-
The options for the batcher.
Properties:
Name Type Description maxTextures
number The maximum number of textures per batch.
-
an interface that allows a resource to be bound to the gpu in a bind group
-
Simple bounds implementation instead of more ambiguous [number, number, number, number]
-
Options for caching a container as a texture.
- See:
-
- RenderGroup#textureOptions
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.
-
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
totrue
on renderer. -
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. -
Represents a batchable mesh element with default batch properties.
-
Represents a batchable quad element with default batch properties.
-
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.
- 0: No rounding (default)
- 1: Round to nearest pixel This can help with visual consistency, especially for pixel art styles.
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.
transform
Matrix The transform matrix of the element. This matrix represents the position, scale, rotation, and skew of the element.
-
An effect that can be applied to a container. This is used to create effects such as filters/masks etc.
-
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'
-
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
-
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.
-
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. -
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.
-
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)
-
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.
-
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.
-
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
-
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.
-
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.
-
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.
-
The options for rendering a view.
-
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 .
-
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
-
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
-
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) to1
(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.
-
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
-
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.
-
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
-
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
-
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.
-
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) to1
(fully opaque).view
ICanvas -
Options for WebGLRenderer.
Properties:
Name Type Default Description useBackBuffer
boolean false
if true will use the back buffer where required
-
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.
-
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
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
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
The culling mode to use. It can be either none
, front
or back
.
Options for extracting and downloading content from a renderer.
Properties:
Name | Type | Description |
---|---|---|
filename |
string |
The filename to use when downloading the content. |
Options for extracting an HTMLImage from the renderer.
Options for extracting content from a renderer.
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. |
a map the maps names of uniforms to group indexes
a WebGPU descriptions of how the program is laid out
Properties:
Name | Type | Default | Description |
---|---|---|---|
accessibility |
rendering.AccessibilitySystem |
AccessibilitySystem instance. Requires |
|
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 |
|
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 |
|
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. |
A render surface is a texture, canvas, or render target
- See:
A record of BindGroup's used by the shader.
Record<number, BindGroup>
A descriptor for a shader
A descriptor for a shader with groups.
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
The different topology types supported by the renderer used to describe how the geometry should be renderer
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 |
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 |
The UVs data structure for a texture.
The different types of vertex formats supported by the renderer
Methods
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 |
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'
}
});
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 |
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 |
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) |