OVR_multiview2

The OVR_multiview2 extension is part of the WebGL API and adds support for rendering into multiple views simultaneously. This especially useful for virtual reality (VR) and WebXR.

For more information, see also:

• Multiview on WebXR
• three.js multiview demo
• Multiview in babylon.js
• Optimizing Virtual Reality: Understanding Multiview
• Multiview WebGL Rendering for Oculus Browser 6.0+

WebGL extensions are available using the WebGLRenderingContext.getExtension() method. For more information, see also Using Extensions in the WebGL tutorial.

This extension exposes 4 constants that can be used in getParameter() or getFramebufferAttachmentParameter().

FRAMEBUFFER_ATTACHMENT_TEXTURE_NUM_VIEWS_OVR

Number of views of the framebuffer object attachment.

FRAMEBUFFER_ATTACHMENT_TEXTURE_BASE_VIEW_INDEX_OVR

Base view index of the framebuffer object attachment.

MAX_VIEWS_OVR

The maximum number of views. Most VR headsets have two views, but there are prototypes of headset with ultra-wide FOV using 4 views which is currently the maximum number of views supported by multiview.

FRAMEBUFFER_INCOMPLETE_VIEW_TARGETS_OVR

If baseViewIndex is not the same for all framebuffer attachment points where the value of FRAMEBUFFER_ATTACHMENT_OBJECT_TYPE is not NONE, the framebuffer is considered incomplete. Calling checkFramebufferStatus for a framebuffer in this state returns FRAMEBUFFER_INCOMPLETE_VIEW_TARGETS_OVR.

framebufferTextureMultiviewOVR()

Simultaneously renders to multiple elements of a 2D texture array.

This example is taken from the specification. See also this three.js demo for a live multiview example.

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.

Shader code

#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;
}

• WebGLRenderingContext.getExtension()
• WebGLRenderingContext.getParameter()
• WebXR
• three.js multiview demo