跳至主要内容
版本：v8.x

渲染组

了解 PixiJS 中的 RenderGroups​

随着您深入使用 PixiJS，特别是第 8 版，您会遇到一个称为 RenderGroups 的强大功能。将 RenderGroups 视为场景图中像微型场景图一样运作的专用容器。以下是如何在项目中有效使用 Render Group 所需了解的内容

什么是 Render Groups？​

Render Groups 本质上是 PixiJS 作为自包含场景图处理的容器。当您将场景的各个部分分配给 Render Group 时，您告诉 PixiJS 将这些对象作为一个单元进行管理。此管理包括监控更改并专门为组准备一组渲染指令。这是优化渲染过程的强大工具。

为什么使用 Render Groups？​

使用 Render Groups 的主要优点在于它们具有优化功能。它们允许将某些计算（如变换（位置、比例、旋转）、色彩和 alpha 调整）卸载到 GPU。这意味着像移动或调整 Render Group 之类的操作可以用最小的 CPU 影响来完成，从而使您的应用程序更具性能效率。

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

此功能对于

  • 静态内容：对于不常更改的内容，渲染组可以显著降低 CPU 上的计算负载。在这种情况下，静态指的是场景图结构，而不是其内部 PixiJS 元素的实际值（例如位置、比例）。
  • 不同的场景部分：您可以将场景划分为逻辑部分，例如游戏世界和 HUD（抬头显示）。每个部分都可以单独进行优化，从而大幅提升整体性能。

示例​

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

查看[容器示例](../../examples/basic/container)。

最佳实践​

  • 不过度使用：虽然渲染组非常强大，但过度使用实际上会降低性能。目标是找到一种平衡，在优化渲染的同时，不会用过多单独的组压垮系统。务必在使用时进行分析。大多数时候您根本不需要使用它们！
  • 战略分组：考虑场景中的哪些部分一起发生改变，哪些部分保持静态。将动态元素与静态元素分组可以获得性能提升。

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