OVR_multiview2 扩展

OVR_multiview2 扩展是 WebGL API 的一部分，它添加了对同时渲染到多个视图的支持。这对于虚拟现实 (VR) 和 WebXR 特别有用。

有关更多信息，另请参阅

可以使用 WebGLRenderingContext.getExtension() 方法获取 WebGL 扩展。有关更多信息，另请参阅 使用扩展 的 WebGL 教程。

注意：支持取决于系统的图形驱动程序（支持 Windows+ANGLE 和 Android；不支持 Windows+GL、Mac、Linux）。

此扩展仅适用于 WebGL 2 上下文，因为它需要 GLSL 3.00 和纹理数组。

目前，没有办法使用多视图渲染到多重采样的后缓冲区，因此您应该使用 antialias: false 创建上下文。但是，Oculus 浏览器 (6+) 也支持使用 OCULUS_multiview 扩展进行多重采样。另请参阅 此 WebGL 问题。

常量

此扩展公开了 4 个常量，这些常量可以在 getParameter() 或 getFramebufferAttachmentParameter() 中使用。

FRAMEBUFFER_ATTACHMENT_TEXTURE_NUM_VIEWS_OVR

帧缓冲区对象附件的视图数。

FRAMEBUFFER_ATTACHMENT_TEXTURE_BASE_VIEW_INDEX_OVR

帧缓冲区对象附件的基本视图索引。

MAX_VIEWS_OVR

视图的最大数量。大多数 VR 头显有两个视图，但有一些使用 4 个视图的超宽视场头显原型，这是目前多视图支持的视图最大数量。

FRAMEBUFFER_INCOMPLETE_VIEW_TARGETS_OVR

如果 FRAMEBUFFER_ATTACHMENT_OBJECT_TYPE 的值为 NONE 的所有帧缓冲区附件点的 baseViewIndex 不相同，则该帧缓冲区被认为是不完整的。对于处于此状态的帧缓冲区，调用 checkFramebufferStatus 返回 FRAMEBUFFER_INCOMPLETE_VIEW_TARGETS_OVR。

实例方法

framebufferTextureMultiviewOVR()

同时渲染到 2D 纹理数组的多个元素。

示例

此示例取自 规范。

js
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.

着色器代码

cpp
#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 演示，以获取实时多视图示例。

规范

规范
WebGL OVR_multiview2 扩展规范

浏览器兼容性

BCD 表仅在浏览器中加载

另请参阅