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) {
    // …
  }
}

现在，我们不再在每次循环迭代时分配变量，而是使用全局常量（或类成员常量）。这有多个好处：

• 为每个值或结构分配的内存不必在每一帧都重新分配。这减少了触发垃圾回收的可能性，并优化了内存使用。
• 由于它们是常量，您无法意外删除包含向量和矩阵的对象。
• 但是，您仍然可以替换这些对象中的每一个的内容，因此它们是可重用的。

您现在可以避免几种可能的编码错误，并且您的整个动画将更流畅、性能更好。