Rendering

PixiJS renderers are responsible for drawing your scene to a canvas using either WebGL/WebGL2 or WebGPU. These renderers are high-performance GPU-accelerated engines and are composed of modular systems that manage everything from texture uploads to rendering pipelines.

All PixiJS renderers inherit from a common base, which provides consistent methods such as .render(), .resize(), and .clear() as well as shared systems for managing the canvas, texture GC, events, and more.

Renderer Types

Renderer	Description	Status
WebGLRenderer	Default renderer using WebGL/WebGL2. Well supported and stable.	✅ Recommended
WebGPURenderer	Modern GPU renderer using WebGPU. More performant, still maturing.	🚧 Experimental
CanvasRenderer	Fallback renderer using 2D canvas.	❌ Coming-soon

Creating a Renderer

You can use autoDetectRenderer() to create the best renderer for the environment:

import { autoDetectRenderer } from 'pixi.js';

const renderer = await autoDetectRenderer({
    preference: 'webgpu', // or 'webgl'
});
Copy

Or construct one explicitly:

import { WebGLRenderer, WebGPURenderer } from 'pixi.js';

const renderer = new WebGLRenderer();
await renderer.init(options);
Copy

Rendering a Scene

To render a scene, you can use the render() method. This will draw the specified container to the screen or a texture:

import { Container } from 'pixi.js';

const container = new Container();
renderer.render(container);

// or provide a complete set of options
renderer.render({
    target: container,
    clear: true, // clear the screen before rendering
    transform: new Matrix(), // optional transform to apply to the container
});
Copy

Rendering to Mip Levels

When rendering to a texture-backed target, you can optionally specify mipLevel to render into a specific mip level of the target's underlying texture storage.

import { RenderTexture } from 'pixi.js';

const rt = RenderTexture.create({
    width: 256,
    height: 256,
    mipLevelCount: 4,
    autoGenerateMipmaps: false,
});

// Render into mip 1 (128x128)
renderer.render({
    container,
    target: rt,
    mipLevel: 1,
});
Copy

Frame semantics:

• If your target is a Texture with a frame (e.g. an atlas sub-texture), that frame is interpreted in mip 0 pixel space and is scaled/clamped when rendering to mipLevel > 0.

Resizing the Renderer

To resize the renderer, use the resize() method. This will adjust the canvas size and update the resolution:

renderer.resize(window.innerWidth, window.innerHeight);
Copy

Generating Textures

You can generate textures from containers using the generateTexture() method. This is useful for creating textures from dynamic content:

import { Sprite } from 'pixi.js';

const sprite = new Sprite();
const texture = renderer.generateTexture(sprite);
Copy

Resetting State

To reset the renderer's state, use the resetState() method. This is useful when mixing PixiJS with other libraries like Three.js:

function render() {
    // Render the Three.js scene
    threeRenderer.resetState();
    threeRenderer.render(scene, camera);

    // Render the PixiJS stage
    pixiRenderer.resetState();
    pixiRenderer.render({ container: stage });

    requestAnimationFrame(render);
}

requestAnimationFrame(render);
Copy

Related Documentation

• See WebGLRenderer for WebGL-specific features
• See WebGPURenderer for WebGPU-specific features
• See autoDetectRenderer for automatic renderer detection
• See ExtractSystem for extracting textures from the renderer
• See GenerateTextureSystem for creating textures from display objects
• See RenderTexture for rendering to textures
• See Texture for managing textures
• See Container for managing display objects