Web/API/OVR multiview2

From Get docs


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:

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

Availability: Support depends on the system's graphics driver (Windows+ANGLE and Android are supported; Windows+GL, Mac, Linux are not supported).

This extension is only available to WebGL 2 contexts as it needs GLSL 3.00 and texture arrays. Currently, there is no way to use multiview to render to a multisampled backbuffer, so you should create contexts with antialias: false. However, the Oculus browser (6+) also supports multisampling using the OCULUS_multiview extension. See also this WebGL issue.


Constants

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.

Methods

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

Examples

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

Specifications

Specification Status
OVR_multiview2 Community Approved

Browser compatibility

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

Update compatibility data on GitHub

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
OVR_multiview2

Chrome Full support 75

Alternate Name'

Full support 75

Alternate Name'

Alternate Name' Uses the non-standard name: OVRMultiview2 No support 70 — 75

Alternate Name'

Alternate Name' Uses the non-standard name: WebGLMultiview

Edge Full support 79

Alternate Name'

Full support 79

Alternate Name'

Alternate Name' Uses the non-standard name: OVRMultiview2

Firefox

Full support 71

IE

No support No

Opera

No support No

Safari

No support No

WebView Android Full support 75

Alternate Name'

Full support 75

Alternate Name'

Alternate Name' Uses the non-standard name: OVRMultiview2 No support 70 — 75

Alternate Name'

Alternate Name' Uses the non-standard name: WebGLMultiview

Chrome Android Full support 75

Alternate Name'

Full support 75

Alternate Name'

Alternate Name' Uses the non-standard name: OVRMultiview2 No support 70 — 75

Alternate Name'

Alternate Name' Uses the non-standard name: WebGLMultiview

Firefox Android

No support No

Opera Android

No support No

Safari iOS

No support No

Samsung Internet Android Full support 11.0

Alternate Name'

Full support 11.0

Alternate Name'

Alternate Name' Uses the non-standard name: OVRMultiview2 No support 10.0 — 11.0

Alternate Name'

Alternate Name' Uses the non-standard name: WebGLMultiview

framebufferTextureMultiviewOVR

Chrome Full support 75


Full support 75


No support 70 — 75

Alternate Name'

Alternate Name' Uses the non-standard name: framebufferTextureMultiviewWEBGL

Edge

Full support 79

Firefox

Full support 71

IE

No support No

Opera

No support No

Safari

No support No

WebView Android Full support 75


Full support 75


No support 70 — 75

Alternate Name'

Alternate Name' Uses the non-standard name: framebufferTextureMultiviewWEBGL

Chrome Android Full support 75


Full support 75


No support 70 — 75

Alternate Name'

Alternate Name' Uses the non-standard name: framebufferTextureMultiviewWEBGL

Firefox Android

No support No

Opera Android

No support No

Safari iOS

No support No

Samsung Internet Android Full support 11.0


Full support 11.0


No support 10.0 — 11.0

Alternate Name'

Alternate Name' Uses the non-standard name: framebufferTextureMultiviewWEBGL

Legend

Full support  
Full support
No support  
No support
Uses a non-standard name.'
Uses a non-standard name.


See also