XRViewport

Интерфейс XRViewport API устройств WebXR предоставляет свойства, используемые для описания размера и положения текущего области просмотра внутри XRWebGLLayer, используемой для отрисовки 3D-сцены.

height Только для чтения

Высота области просмотра в пикселях.

width Только для чтения

Ширина области просмотра в пикселях.

x Только для чтения

Смещение от начала поверхности графического назначения (обычно XRWebGLLayer) до левого края области просмотра в пикселях.

y Только для чтения

Смещение от начала области просмотра до нижнего края области просмотра; система координат WebGL размещает (0, 0) в левом нижнем углу поверхности.

В настоящее время единственный доступный тип поверхности — XRWebGLLayer. Точное расположение системы координат может варьироваться для других типов поверхностей, но в WebGL начало координат (0, 0) расположено в левом нижнем углу поверхности. Таким образом, значения, указанные в XRViewport, определяют прямоугольник, левый нижний угол которого находится в (x, y), и который простирается на width пикселей влево и на height пикселей вверх.

Эти значения можно напрямую передать в метод WebGLRenderingContext.viewport():

const xrViewport = xrWebGLLayer.getViewport(xrView);
gl.viewport(xrViewport.x, xrViewport.y, xrViewport.width, xrViewport.height);

В этом примере настраивается обратный вызов кадра анимации с использованием requestAnimationFrame(). После начальной настройки он итерируется по каждому представлению в позе зрителя, настраивая область просмотра в соответствии с XRWebGLLayer.

xrSession.requestAnimationFrame((time, xrFrame) => {
  const viewerPose = xrFrame.getViewerPose(xrReferenceSpace);

  gl.bindFramebuffer(xrWebGLLayer.framebuffer);

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

    // Now we can use WebGL to draw into a viewport matching
    // the viewer's needs
  }
});