Расширение OVR_multiview2

Расширение OVR_multiview2 является частью WebGL API и добавляет поддержку одновременного рендеринга в несколько представлений. Это особенно полезно для виртуальной реальности (VR) и WebXR.

Для получения дополнительной информации также см.:

• Multiview на WebXR
• Multiview в babylon.js
• Оптимизация виртуальной реальности: понимание Multiview
• Multiview WebGL рендеринг для Meta Quest

Расширения WebGL доступны с помощью метода WebGLRenderingContext.getExtension(). Дополнительную информацию также можно найти в Использование расширений в WebGL tutorial.

Это расширение предоставляет 4 постоянных значения, которые могут быть использованы в getParameter() или getFramebufferAttachmentParameter().

FRAMEBUFFER_ATTACHMENT_TEXTURE_NUM_VIEWS_OVR

Количество представлений прикрепленного объекта буфера кадра.

FRAMEBUFFER_ATTACHMENT_TEXTURE_BASE_VIEW_INDEX_OVR

Индекс базового представления прикрепленного объекта буфера кадра.

MAX_VIEWS_OVR

Максимальное количество представлений. Большинство VR-шлемов имеют два представления, но существуют прототипы шлемов с сверхшироким полем обзора, использующие 4 представления, что в настоящее время является максимальным количеством представлений, поддерживаемых multiview.

FRAMEBUFFER_INCOMPLETE_VIEW_TARGETS_OVR

Если baseViewIndex не одинаков для всех точек прикрепления буфера кадра, где значение FRAMEBUFFER_ATTACHMENT_OBJECT_TYPE не равно NONE, буфер кадра считается неполным. Вызов checkFramebufferStatus для буфера кадра в этом состоянии возвращает FRAMEBUFFER_INCOMPLETE_VIEW_TARGETS_OVR.

framebufferTextureMultiviewOVR()

Одновременный рендеринг на несколько элементов массива 2D-текстур.

Этот пример взят из спецификации.

const gl = document
  .createElement("canvas")
  .getContext("webgl2", { antialias: false });
const ext = gl.getExtension("OVR_multiview2");
const fb = gl.createFramebuffer();
gl.bindFramebuffer(gl.DRAW_FRAMEBUFFER, fb);

const colorTex = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D_ARRAY, colorTex);
gl.texStorage3D(gl.TEXTURE_2D_ARRAY, 1, gl.RGBA8, 512, 512, 2);
ext.framebufferTextureMultiviewOVR(
  gl.DRAW_FRAMEBUFFER,
  gl.COLOR_ATTACHMENT0,
  colorTex,
  0,
  0,
  2,
);

const depthStencilTex = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D_ARRAY, depthStencilTex);
gl.texStorage3D(gl.TEXTURE_2D_ARRAY, 1, gl.DEPTH32F_STENCIL8, 512, 512, 2);

ext.framebufferTextureMultiviewOVR(
  gl.DRAW_FRAMEBUFFER,
  gl.DEPTH_STENCIL_ATTACHMENT,
  depthStencilTex,
  0,
  0,
  2,
);
gl.drawElements(/* … */); // draw will be broadcasted to the layers of colorTex and depthStencilTex.

Код шейдера

#version 300 es
#extension GL_OVR_multiview2 : require
precision mediump float;
layout (num_views = 2) in;
in vec4 inPos;
uniform mat4 u_viewMatrices[2];
void main() {
  gl_Position = u_viewMatrices[gl_ViewID_OVR] * inPos;
}

Также см. эту демонстрацию three.js для примера многоэкранного рендеринга.

• WebGLRenderingContext.getExtension()
• WebGLRenderingContext.getParameter()
• WebXR