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 紋理陣列的多個元素。

示例

此示例摘自 規範

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.

著色器程式碼

glsl
#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 擴充套件規範

瀏覽器相容性

另見