Skip to main content

渲染器

¥Renderers

PixiJS 渲染器负责使用 WebGL/WebGL2 或 WebGPU 将场景绘制到画布上。这些渲染器是高性能 GPU 加速引擎，由模块化系统组成，可管理从纹理上传到渲染管线的所有内容。

¥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.

所有 PixiJS 渲染器都继承自一个通用基类，该基类提供一致的方法，例如 .render()、.resize() 和 .clear()，以及用于管理画布、纹理 GC、事件等的共享系统。

¥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

渲染器描述状态
WebGLRenderer使用 WebGL/WebGL2 的默认渲染器。支持良好且稳定。✅ 推荐
WebGPURenderer使用 WebGPU 的现代 GPU 渲染器。性能更佳，仍在不断完善中。🚧 实验性
CanvasRenderer使用 2D 画布的后备渲染器。❌ 即将推出
信息

WebGPU 渲染器功能齐全，但是，浏览器实现的不一致可能会导致意外行为。建议在生产环境中使用 WebGL 渲染器。

¥The WebGPU renderer is feature complete, however, inconsistencies in browser implementations may lead to unexpected behavior. It is recommended to use the WebGL renderer for production applications.

创建渲染器​

¥Creating a Renderer

你可以使用 autoDetectRenderer() 创建最适合你环境的渲染器：

¥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'
});

或明确构造一个：

¥Or construct one explicitly:

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

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

渲染场景​

¥Rendering a Scene

要渲染场景，你可以使用 render() 方法。这将将指定的容器绘制到屏幕或纹理上：

¥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
});

调整渲染器大小​

¥Resizing the Renderer

要调整渲染器的大小，请使用 resize() 方法。这将调整画布大小并更新分辨率：

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

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

生成纹理​

¥Generating Textures

你可以使用 generateTexture() 方法从容器生成纹理。这对于从动态内容创建纹理非常有用：

¥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);

重置状态​

¥Resetting State

要重置渲染器的状态，请使用 resetState() 方法。这在将 PixiJS 与其他库（如 Three.js）混合使用时非常有用：

¥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);

更多详情，请参阅我们关于 将 PixiJS 与 Three.js 混合使用 的完整指南。

¥See our full guide on mixing PixiJS with Three.js for more details.

API 参考​

¥API Reference