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()，以及用于管理画布、纹理垃圾回收、事件等的共享系统。

🌐 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 画布的备用渲染器。❌ 即将推出
info

WebGPU 渲染器功能完整，然而，浏览器实现的不一致可能导致意外行为。建议在生产应用中使用 WebGL 渲染器。

创建渲染器​

🌐 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