WebXR 效能指南

渲染技巧

討論一些通用內容，例如限制渲染過程中的迴圈數量、避免不必要的繪製等。

還可以包含此 規範倉庫中的 explainer 的內容

管理渲染質量

本節部分內容將來自此 規範倉庫中的 explainer

管理幀率

關於幀率管理的內容。

管理深度使用

本節將結合來自此 explainer 和此 explainer 的資訊，這些 explainer 均位於規範倉庫中。

最佳化記憶體使用

在使用執行矩陣數學等操作的庫時，通常會有一些工作變數，各種向量、矩陣和四元數會隨著時間的推移透過這些變數。因此，擁有一個有限的這些物件集合，並在每次需要使用它們時替換其內容，這是有意義的。可以將它們視為類似於微處理器中的暫存器：用於特定資料型別或用例的有限記憶體儲存槽。

雖然單個向量或矩陣佔用的記憶體量不大，但構建 3D 場景的每一幀所使用的向量、矩陣和其他結構的數量非常龐大，因此如果您不斷地分配和取消分配記憶體物件，記憶體管理最終會成為一個問題。

考慮以下示例

function drawScene(gl, view, programInfo, buffers, texture, deltaTime) {
  // …
  for (const object in scene) {
    const vertexList = [
      /* … */
    ];
    const normalMatrix = mat4.create();
    const modelViewMatrix = mat4.create();
    const objectMatrix = mat4.create();

    // Apply rotation updates to the object if needed

    mat4.rotate(/* … */);
  }
}

這會渲染一個場景。但效率低下，因為它將包括至少兩個矩陣、一個頂點陣列以及更多內容在內的許多內容分配為區域性變數。這意味著對於每一幀，JavaScript 執行時都必須為這些分配記憶體並進行設定——可能會觸發垃圾回收——然後在迴圈的每次迭代完成後，記憶體將被釋放。

一個小小的改變就能顯著最佳化這一點

const vertexList = [
  /* … */
];
const normalMatrix = mat4.create();
const modelViewMatrix = mat4.create();

function drawScene(gl, view, programInfo, buffers, texture, deltaTime) {
  // …
  for (const object in scene) {
    // …
  }
}

現在，我們不再在每次迴圈迭代時分配變數，而是使用全域性常量（或類成員常量）。這有多個好處：

• 為每個值或結構分配的記憶體不必在每一幀都重新分配。這減少了觸發垃圾回收的可能性，並優化了記憶體使用。
• 由於它們是常量，您無法意外刪除包含向量和矩陣的物件。
• 但是，您仍然可以替換這些物件中的每一個的內容，因此它們是可重用的。

您現在可以避免幾種可能的編碼錯誤，並且您的整個動畫將更流暢、效能更好。