Skip to main content

渲染群组

¥Render Groups

了解 PixiJS 中的 RenderGroups​

¥Understanding RenderGroups in PixiJS

当你深入研究 PixiJS（尤其是版本 8）时，你将遇到一个称为 RenderGroups 的强大功能。将渲染组视为场景图中的专用容器，其行为类似于迷你场景图本身。为了在项目中有效地使用渲染组，你需要了解以下内容：

¥As you delve deeper into PixiJS, especially with version 8, you'll encounter a powerful feature known as RenderGroups. Think of RenderGroups as specialized containers within your scene graph that act like mini scene graphs themselves. Here's what you need to know to effectively use Render Groups in your projects:

什么是渲染群组？​

¥What Are Render Groups?

渲染组本质上是 PixiJS 视为独立场景图的容器。当你将场景的一部分分配给渲染组时，你就是在告诉 PixiJS 将这些对象作为一个单元进行管理。这种管理包括监视变化以及专门为该组准备一组渲染指令。这是优化渲染过程的强大工具。

¥Render Groups are essentially containers that PixiJS treats as self-contained scene graphs. When you assign parts of your scene to a Render Group, you're telling PixiJS to manage these objects together as a unit. This management includes monitoring for changes and preparing a set of render instructions specifically for the group. This is a powerful tool for optimizing your rendering process.

为什么使用渲染群组？​

¥Why Use Render Groups?

使用渲染组的主要优点在于其优化功能。它们允许将某些计算（例如变换（位置、缩放、旋转）、色调和 Alpha 调整）卸载到 GPU。这意味着移动或调整渲染组等操作可以在对 CPU 影响最小的情况下完成，从而使你的应用性能更加高效。

¥The main advantage of using Render Groups lies in their optimization capabilities. They allow for certain calculations, like transformations (position, scale, rotation), tint, and alpha adjustments, to be offloaded to the GPU. This means that operations like moving or adjusting the Render Group can be done with minimal CPU impact, making your application more performance-efficient.

实际上，即使没有明确的意识，你也会使用渲染组。你传递给 PixiJS 渲染函数的根元素会自动转换为 RenderGroup，因为这是其渲染指令将存储的位置。不过，你还可以选择根据需要显式创建其他渲染组以进一步优化你的项目。

¥In practice, you're utilizing Render Groups even without explicit awareness. The root element you pass to the render function in PixiJS is automatically converted into a RenderGroup as this is where its render instructions will be stored. Though you also have the option to explicitly create additional RenderGroups as needed to further optimize your project.

此功能特别有利于：

¥This feature is particularly beneficial for:

  • 静态内容：对于不经常更改的内容，渲染组可以显着减少 CPU 的计算负载。在这种情况下，静态指的是场景图结构，而不是其中 PixiJS 元素的实际值（例如位置、事物的比例）。

    ¥Static Content: For content that doesn't change often, a Render Group can significantly reduce the computational load on the CPU. In this case static refers to the scene graph structure, not that actual values of the PixiJS elements inside it (eg position, scale of things).

  • 独特的场景部分：你可以将场景分成逻辑部分，例如游戏世界和 HUD（平视显示器）。每个部分都可以单独优化，从而获得更好的整体性能。

    ¥Distinct Scene Parts: You can separate your scene into logical parts, such as the game world and the HUD (Heads-Up Display). Each part can be optimized individually, leading to overall better performance.

示例​

¥Examples

const myGameWorld = new Container({
  isRenderGroup:true
})

const myHud = new Container({
  isRenderGroup:true
})

scene.addChild(myGameWorld, myHud)

renderer.render(scene) // this action will actually convert the scene to a render group under the hood

看看 容器示例。

¥Check out the container example.

最佳实践​

¥Best Practices

  • 不要过度使用：虽然渲染组功能强大，但使用太多实际上会降低性能。目标是找到一种平衡，既可以优化渲染，又不会因过多的单独组而压垮系统。使用它们时请务必进行配置文件。大多数时候你根本不需要使用它们！

    ¥Don't Overuse: While Render Groups are powerful, using too many can actually degrade performance. The goal is to find a balance that optimizes rendering without overwhelming the system with too many separate groups. Make sure to profile when using them. The majority of the time you won't need to use them at all!

  • 战略分组：考虑场景的哪些部分一起变化，哪些部分保持静态。将动态元素与静态元素分开分组可以提高性能。

    ¥Strategic Grouping: Consider what parts of your scene change together and which parts remain static. Grouping dynamic elements separately from static elements can lead to performance gains.

通过了解和利用渲染组，你可以充分利用 PixiJS 的渲染功能，使你的应用更流畅、更高效。此功能是 PixiJS 提供的优化工具包中的一个强大工具，使开发者能够创建在不同设备上流畅运行的丰富的交互式场景。

¥By understanding and utilizing Render Groups, you can take full advantage of PixiJS's rendering capabilities, making your applications smoother and more efficient. This feature represents a powerful tool in the optimization toolkit offered by PixiJS, enabling developers to create rich, interactive scenes that run smoothly across different devices.