跳到主要內容
版本：v8.x

渲染組

瞭解 PixiJS 中的 RenderGroups​

深入 PixiJS，尤其是在版本 8 時，您將會遇到一個稱為 RenderGroups 的強大功能。將 RenderGroups 視為場景圖形中的特殊容器，它們本身就像小型場景圖形。以下是您需要知道的事項，才能在您的專案中有效使用 Render Groups

什麼是 Render Group？​

Render Groups 本質上是容器，PixiJS 將它們視為獨立的場景圖形。當您將部分場景指定給 Render Group 時，您是在指示 PixiJS 將這些物件作為一個單元一起管理。這個管理包含監控變更，並準備專門針對該組的一組渲染指令。這是最佳化您的渲染程序的有力工具。

為什麼要使用 Render Groups？​

使用 Render Group 的主要好處在於其最佳化能力。它們允許將某些運算，例如轉換（位置、縮放、旋轉）、色調和 alpha 調整，卸載到 GPU。這表示移動或調整 Render Group 之類的操作可以以最小的 CPU 影響來執行，使您的應用程式更具效能。

實際上，即使沒有明確的意識，您仍使用 Render Groups。您傳遞至 PixiJS 中的渲染函式的根元素會自動轉換成 RenderGroup，因為這是渲染指令的儲存位置。雖然您也可以選擇明確建立其他 RenderGroups，以進一步最佳化您的專案。

這個功能特別有利於

  • 靜態內容：對於不常變更的內容，Render Group 可以顯著降低 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 提供的最佳化工具組中的一項強大工具，可讓開發人員創作出在不同裝置上都能順利運行的豐富互動場景。