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

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

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