WebXR 性能指南

WebXR 应用程序涉及多种技术，这些技术对性能约束高度敏感。因此，您可能会发现需要进行调整或折衷以优化 WebXR 应用程序的性能，使其在尽可能广泛的目标设备上都可用。在本指南中，我们将探讨各种建议和推荐，帮助您使您的 WebXR 应用尽可能高效。

渲染技巧

讨论一些通用内容，例如限制渲染过程中不同循环的数量，避免不必要的绘制等。

还可以包含来自规范存储库中此说明文档的内容。

管理渲染质量

本节内容部分来自规范存储库中此说明文档。

管理帧率

关于帧率管理的内容。

管理深度使用

本节将结合规范存储库中此说明文档和此说明文档中的信息。

优化内存使用

当使用执行诸如矩阵数学运算之类的库时，您通常会有一系列工作变量，各种向量、矩阵和四元数会随着时间的推移传递这些变量。因此，拥有一个有限的这些对象的集合是有意义的，每次需要使用它们时，用新信息替换它们的内容。可以认为它们类似于微处理器中的寄存器：一组有限的内存存储槽，用于特定类型的数据或用例。

虽然单个向量或矩阵不会占用过多的内存，但用于构建 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) {
    // …
  }
}

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

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

您现在可以避免几种可能的编码错误，并且您的整个动画也将更加流畅和高效。