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