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 擴充套件規範 |
瀏覽器相容性
載入中…