XRSession: метод requestAnimationFrame()

Метод XRSession requestAnimationFrame(), подобно методу Window с таким же названием, планирует выполнение обратного вызова в следующий момент, когда браузер готов отобразить виртуальную среду сеанса на XR-дисплей. Указанный обратный вызов выполняется один раз перед следующей перерисовкой; если вы хотите, чтобы он выполнялся для следующей перерисовки, вы должны вызвать requestAnimationFrame() снова. Это можно сделать непосредственно в самом обратном вызове.

Обратный вызов принимает два параметра: XRFrame, описывающий состояние всех отслеживаемых объектов для сеанса, и отметку времени, которую вы можете использовать для расчёта любых анимационных обновлений.

Вы можете отменить ранее запланированную анимацию, вызвав cancelAnimationFrame().

animationFrameCallback

Функция, которая вызывается перед следующей перерисовкой, чтобы позволить обновить и отобразить XR-сцену на основе прошедшего времени, анимации, изменений ввода пользователя и т. д. Обратный вызов получает два параметра в качестве входных данных:

time

DOMHighResTimeStamp, указывающий смещение времени, в котором обновленное состояние зрителя было получено от устройства WebXR.

xrFrame

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

Целочисленное значение, которое служит уникальным, ненулевым идентификатором или дескриптором, который вы можете передать в cancelAnimationFrame(), если вам нужно удалить запрос на кадр анимации.

В следующем примере запрашивается XRSession с режимом «встроенный», чтобы он мог отображаться в элементе HTML (без необходимости в отдельном устройстве AR или VR).

// Obtain XR object
const XR = navigator.xr;

// Request a new XRSession
XR.requestSession("inline").then((xrSession) => {
  xrSession.requestAnimationFrame((time, xrFrame) => {
    const viewer = xrFrame.getViewerPose(xrReferenceSpace);

    gl.bindFramebuffer(xrWebGLLayer.framebuffer);
    for (const xrView of viewer.views) {
      const xrViewport = xrWebGLLayer.getViewport(xrView);
      gl.viewport(
        xrViewport.x,
        xrViewport.y,
        xrViewport.width,
        xrViewport.height,
      );

      // WebGL draw calls will now be rendered into the appropriate viewport.
    }
  });
});

Следующий пример взят непосредственно из черновика спецификации. Этот пример демонстрирует шаблон проектирования, который обеспечивает бесшовный переход между неинтерактивными анимациями, созданными с помощью Window.requestAnimationFrame, и интерактивными XR-анимациями.

let xrSession = null;

function onWindowAnimationFrame(time) {
  window.requestAnimationFrame(onWindowAnimationFrame);

  // This may be called while an immersive session is running on some devices,
  // such as a desktop with a tethered headset. To prevent two loops from
  // rendering in parallel, skip drawing in this one until the session ends.
  if (!xrSession) {
    renderFrame(time, null);
  }
}

// The window animation loop can be started immediately upon the page loading.
window.requestAnimationFrame(onWindowAnimationFrame);

function onXRAnimationFrame(time, xrFrame) {
  xrSession.requestAnimationFrame(onXRAnimationFrame);
  renderFrame(time, xrFrame);
}

function renderFrame(time, xrFrame) {
  // Shared rendering logic.
}

// Assumed to be called by a user gesture event elsewhere in code.
function startXRSession() {
  navigator.xr.requestSession("immersive-vr").then((session) => {
    xrSession = session;
    xrSession.addEventListener("end", onXRSessionEnded);
    // Do necessary session setup here.
    // Begin the session's animation loop.
    xrSession.requestAnimationFrame(onXRAnimationFrame);
  });
}

function onXRSessionEnded() {
  xrSession = null;
}

• Window.requestAnimationFrame()
• XRSession.cancelAnimationFrame()