Руководство по производительности 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) {
    // …
  }
}

Теперь вместо выделения переменных в каждой итерации цикла мы используем глобальные константы (или константы члена класса). Это имеет несколько преимуществ:

• Выделенная для каждого значения или структуры память не должна перевыделяться каждый кадр. Это уменьшает вероятность вызова сборки мусора и оптимизирует использование памяти.
• Вы не можете случайно удалить объекты, содержащие ваши векторы и матрицы, так как они являются константами.
• Однако вы по-прежнему можете изменять содержимое каждого из этих объектов, так что они являются многоразовыми.

Теперь вы защищены от нескольких возможных ошибок программирования, и вся анимация будет работать плавнее и с большей производительностью.