渲染器
¥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