pixi.js
    Preparing search index...

    Class WebGLRenderer<T>

    The WebGL PixiJS Renderer. This renderer allows you to use the most common graphics API, WebGL (and WebGL2).

    // Create a new renderer
    const renderer = new WebGLRenderer();
    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({
       preference:'webgl',
    });

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

    WebGL Core Systems Systems that are specific to the WebGL renderer
    GlUboSystem This manages WebGL2 uniform buffer objects feature for shaders
    GlBackBufferSystem manages the back buffer, used so that we can pixi can pixels from the screen
    GlContextSystem This manages the WebGL context and its extensions
    GlBufferSystem This manages buffers and their GPU resources, keeps everything in sync
    GlTextureSystem This manages textures and their GPU resources, keeps everything in sync
    GlRenderTargetSystem This manages what we render too. For example the screen, or another texture
    GlGeometrySystem This manages geometry, used for drawing meshes via the GPU
    GlUniformGroupSystem This manages uniform groups. Syncing shader properties with the GPU
    GlShaderSystem This manages shaders, programs that run on the GPU to output lovely pixels
    GlEncoderSystem This manages encoders, a WebGPU Paradigm, use it to draw a mesh + shader
    GlStateSystem This manages the state of the WebGL context. eg the various flags that can be set blend modes / depthTesting etc
    GlStencilSystem This manages the stencil buffer. Used primarily for masking
    GlColorMaskSystem This manages the color mask. Used for color masking

    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 backBuffer background buffer canvasText colorMask context encoder events extract filter geometry gl globalUniforms graphicsContext hello htmlText initHook limits name renderableGC renderGroup renderTarget scheduler shader state stencil texture textureGC textureGenerator ubo uniformGroup 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
    backBuffer: GlBackBufferSystem

    BackBufferSystem instance.

    background: BackgroundSystem

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

    buffer: GlBufferSystem

    BufferSystem instance.

    canvasText: CanvasTextSystem
    colorMask: GlColorMaskSystem

    ColorMaskSystem instance.

    context: GlContextSystem

    ContextSystem instance.

    encoder: GlEncoderSystem

    EncoderSystem instance.

    events: EventSystem
    extract: ExtractSystem
    filter: FilterSystem
    geometry: GlGeometrySystem

    GeometrySystem instance.

    gl: WebGL2RenderingContext
    globalUniforms: GlobalUniformSystem
    graphicsContext: GraphicsContextSystem
    hello: HelloSystem
    htmlText: HTMLTextSystem
    initHook: RendererInitHook
    limits: GlLimitsSystem
    name: string

    The name of the renderer.

    renderableGC: RenderableGCSystem
    renderGroup: RenderGroupSystem
    renderTarget: GlRenderTargetSystem

    RenderTargetSystem instance.

    scheduler: SchedulerSystem
    shader: GlShaderSystem

    ShaderSystem instance.

    state: GlStateSystem

    StateSystem instance.

    stencil: GlStencilSystem

    StencilSystem instance.

    texture: GlTextureSystem

    TextureSystem instance.

    textureGC: TextureGCSystem
    textureGenerator: GenerateTextureSystem

    System that manages the generation of textures from the renderer

    ubo: GlUboSystem

    UboSystem instance.

    uniformGroup: GlUniformGroupSystem

    UniformGroupSystem 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