PixiJS

Class: WebGPURenderer

WebGPURenderer

The WebGPU PixiJS Renderer. This renderer allows you to use the next-generation graphics API, WebGPU.

// Create a new renderer
const renderer = new WebGPURenderer();
await renderer.init();

// Add the renderer to the stage
document.body.appendChild(renderer.canvas);

// Create a new stage
const stage = new Container();

// Render the stage
renderer.render(stage);

You can use autoDetectRenderer to create a renderer that will automatically detect the best renderer for the environment.

// Create a new renderer
const renderer = await rendering.autoDetectRenderer();

The renderer is composed of systems that manage specific tasks. The following systems are added by default whenever you create a WebGPU renderer:

WebGPU Core Systems Systems that are specific to the WebGL renderer
GpuUboSystem This manages WebGPU uniform buffer objects feature for shaders
GpuEncoderSystem This manages the WebGPU command encoder
GpuDeviceSystem This manages the WebGPU Device and its extensions
GpuBufferSystem This manages buffers and their GPU resources, keeps everything in sync
GpuTextureSystem This manages textures and their GPU resources, keeps everything in sync
GpuRenderTargetSystem This manages what we render too. For example the screen, or another texture
GpuShaderSystem This manages shaders, programs that run on the GPU to output lovely pixels
GpuStateSystem This manages the state of the WebGPU Pipelines. eg the various flags that can be set blend modes / depthTesting etc
PipelineSystem This manages the WebGPU pipelines, used for rendering
GpuColorMaskSystem This manages the color mask. Used for color masking
GpuStencilSystem This manages the stencil buffer. Used primarily for masking
BindGroupSystem This manages the WebGPU bind groups. this is how data is bound to a shader when rendering

The breadth of the API surface provided by the renderer is contained within these systems.

Extends

Implements

  • WebGPUSystems

Members

bindGroup BindGroupSystem

BindGroupSystem instance.

buffer GpuBufferSystem

BufferSystem instance.

colorMask GpuColorMaskSystem

ColorMaskSystem instance.

device GpuDeviceSystem

DeviceSystem instance.

encoder GpuEncoderSystem

EncoderSystem instance.

gpu GPU

The WebGPU Device.

pipeline PipelineSystem

PipelineSystem instance.

renderTarget GpuRenderTargetSystem

RenderTargetSystem instance.

shader GpuShaderSystem

ShaderSystem instance.

state GpuStateSystem

StateSystem instance.

stencil GpuStencilSystem

StencilSystem instance.

texture GpuTextureSystem overrides

TextureSystem instance.

ubo GpuUboSystem

UboSystem instance.

Inherited Properties

From class AbstractRenderer

accessibility rendering.AccessibilitySystem inherited

AccessibilitySystem instance. Requires import 'pixi.js/accessibility'.

background BackgroundSystem inherited

The background system manages the background color and alpha of the main view.

canvas ICanvas inherited

The canvas element that everything is drawn to.

events rendering.EventSystem inherited

EventSystem instance.

extract ExtractSystem inherited

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

filter FilterSystem inherited

FilterSystem instance.

globalUniforms GlobalUniformSystem inherited

GlobalUniformSystem instance.

height number inherited

Same as view.height, actual number of pixels in the canvas by vertical.

Default Value:
  • 600

hello HelloSystem inherited

HelloSystem instance.

lastObjectRendered Container readonly inherited

the last object rendered by the renderer. Useful for other plugins like interaction managers

name string readonly inherited

The name of the renderer.

prepare PrepareSystem inherited

PrepareSystem instance. Requires import 'pixi.js/prepare'.

renderGroup RenderGroupSystem inherited

RenderGroupSystem instance.

renderingToScreen boolean readonly inherited

Flag if we are rendering to the screen vs renderTexture

Default Value:
  • true

resolution number inherited

The resolution / device pixel ratio of the renderer.

roundPixels boolean inherited

Whether the renderer will round coordinates to whole pixels when rendering. Can be overridden on a per scene item basis.

screen Rectangle inherited

Measurements of the screen. (0, 0, screenWidth, screenHeight).

Its safe to use as filterArea or hitArea for the whole stage.

textureGC TextureGCSystem inherited

TextureGCSystem instance.

textureGenerator GenerateTextureSystem inherited

System that manages the generation of textures from the renderer

view ViewSystem inherited

The view system manages the main canvas that is attached to the DOM

width number readonly inherited

Same as view.width, actual number of pixels in the canvas by horizontal.

Default Value:
  • 800

Inherited Methods

From class AbstractRenderer

generateTexture (options) Texture inherited

ts:504

Generate a texture from a container.

Name Type Description
options GenerateTextureOptions | Container

options or container target to use when generating the texture
Returns:
Type Description
Texture a texture

init (options) inherited

ts:214

Initialize the renderer.

Name Type Description
options Partial<OPTIONS>

The options to use to create the renderer.

render (options) void inherited

ts:250

Renders the object to its view.

Name Type Attributes Description
options RenderOptions | Container

The options to render with.
options.container

The container to render.
options.target <optional>

The target to render to.

render (container, options) void Deprecated`` : since 8.0.0 inherited

ts:257
Name Type Description
container Container
options {
   renderTexture: any
}

resize (desiredScreenWidth, desiredScreenHeight, resolution) void inherited

ts:308

Resizes the WebGL view to the specified width and height.

Name Type Attributes Description
desiredScreenWidth number

The desired width of the screen.
desiredScreenHeight number

The desired height of the screen.
resolution number <optional>

The resolution / device pixel ratio of the renderer.