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 头显有两个视图，但有一些超广角 FOV 的原型头显使用 4 个视图，这目前是多视图支持的最大视图数。
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 演示，其中包含一个实时多视图示例。
规范
| 规范 |
|---|
| WebGL OVR_multiview2 扩展规范 |
浏览器兼容性
加载中…