pixi.js
    Preparing search index...

    Class WebGPURenderer<T>

    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.

    import { autoDetectRenderer } from 'pixi.js';
    // Create a new renderer
    const renderer = await 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.

    Type Parameters

    Hierarchy (View Summary)

    Implements

    Index

    rendering

    prepare

    Other

    constructor accessibility background bindGroup buffer canvasText colorMask device encoder events extract filter globalUniforms gpu graphicsContext hello htmlText initHook limits name pipeline renderableGC renderGroup renderTarget scheduler shader state stencil texture textureGC textureGenerator ubo view defaultOptions canvas height lastObjectRendered renderingToScreen resolution roundPixels screen width clear destroy generateTexture init render resetState resize

    rendering

    prepare: PrepareBase

    The prepare mixin provides methods to prepare display objects for rendering. It is used to ensure that textures and other resources are ready before rendering.

    Other

    accessibility: AccessibilitySystem
    background: BackgroundSystem

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

    bindGroup: BindGroupSystem

    BindGroupSystem instance.

    buffer: GpuBufferSystem

    BufferSystem instance.

    canvasText: CanvasTextSystem
    colorMask: GpuColorMaskSystem

    ColorMaskSystem instance.

    device: GpuDeviceSystem

    DeviceSystem instance.

    encoder: GpuEncoderSystem

    EncoderSystem instance.

    events: EventSystem
    extract: ExtractSystem
    filter: FilterSystem
    globalUniforms: GlobalUniformSystem
    gpu: GPU

    The WebGPU Device.

    graphicsContext: GraphicsContextSystem
    hello: HelloSystem
    htmlText: HTMLTextSystem
    initHook: RendererInitHook
    limits: GpuLimitsSystem
    name: string

    The name of the renderer.

    pipeline: PipelineSystem

    PipelineSystem instance.

    renderableGC: RenderableGCSystem
    renderGroup: RenderGroupSystem
    renderTarget: GpuRenderTargetSystem

    RenderTargetSystem instance.

    scheduler: SchedulerSystem
    shader: GpuShaderSystem

    ShaderSystem instance.

    state: GpuStateSystem

    StateSystem instance.

    stencil: GpuStencilSystem

    StencilSystem instance.

    texture: GpuTextureSystem

    TextureSystem instance.

    textureGC: TextureGCSystem
    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

    defaultOptions: {
        failIfMajorPerformanceCaveat: boolean;
        resolution: number;
        roundPixels: boolean;
    } = ...

    The default options for the renderer.

    Type declaration

    • failIfMajorPerformanceCaveat: boolean

      Should the failIfMajorPerformanceCaveat flag be enabled as a context option used in the isWebGLSupported function. If set to true, a WebGL renderer can fail to be created if the browser thinks there could be performance issues when using WebGL.

      In PixiJS v6 this has changed from true to false by default, to allow WebGL to work in as many scenarios as possible. However, some users may have a poor experience, for example, if a user has a gpu or driver version blacklisted by the browser.

      If your application requires high performance rendering, you may wish to set this to false. We recommend one of two options if you decide to set this flag to false:

      1: Use the Canvas renderer as a fallback in case high performance WebGL is not supported.

      2: Call isWebGLSupported (which if found in the utils package) in your code before attempting to create a PixiJS renderer, and show an error message to the user if the function returns false, explaining that their device & browser combination does not support high performance WebGL. This is a much better strategy than trying to create a PixiJS renderer and finding it then fails.

      false
    • resolution: number

      Default resolution / device pixel ratio of the renderer.

      1
    • roundPixels: boolean

      Should round pixels be forced when rendering?

      false
    • get canvas(): CANVAS

      The canvas element that everything is drawn to.

      Returns CANVAS

    • get height(): number

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

      Returns number

      600
    • get lastObjectRendered(): Container

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

      Returns Container

    • get renderingToScreen(): boolean

      Flag if we are rendering to the screen vs renderTexture

      Returns boolean

      true
    • get resolution(): number

      The resolution / device pixel ratio of the renderer.

      Returns number

    • set resolution(value: number): void

      Parameters

      • value: number

      Returns void

    • get roundPixels(): boolean

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

      Returns boolean

    • get screen(): Rectangle

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

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

      Returns Rectangle

    • get width(): number

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

      Returns number

      800
    • Advanced

      Clears the render target.

      Parameters

      • options: ClearOptions = {}

        The options to use when clearing the render target.

        The options for clearing the render target.

        • Optionalclear?: CLEAR_OR_BOOL

          The clear mode to use.

        • OptionalclearColor?: ColorSource

          The color to clear with.

        • Optionaltarget?: 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.

      Returns void

    • Advanced

      Resets the rendering state of the renderer. This is useful when you want to use the WebGL context directly and need to ensure PixiJS's internal state stays synchronized. When modifying the WebGL context state externally, calling this method before the next Pixi render will reset all internal caches and ensure it executes correctly.

      This is particularly useful when combining PixiJS with other rendering engines like Three.js:

      // Reset Three.js state
      threeRenderer.resetState();

      // Render a Three.js scene
      threeRenderer.render(threeScene, threeCamera);

      // Reset PixiJS state since Three.js modified the WebGL context
      pixiRenderer.resetState();

      // Now render Pixi content
      pixiRenderer.render(pixiScene);

      Returns void

    • Resizes the WebGL view to the specified width and height.

      Parameters

      • desiredScreenWidth: number

        The desired width of the screen.

      • desiredScreenHeight: number

        The desired height of the screen.

      • Optionalresolution: number

        The resolution / device pixel ratio of the renderer.

      Returns void

    Settings

    Member Visibility

    On This Page

    rendering
    Other