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.
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 notNONE
, the framebuffer is considered incomplete. CallingcheckFramebufferStatus
for a framebuffer in this state returnsFRAMEBUFFER_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 | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
OVR_multiview2
|
Chrome Full support 75 Full support 75 Alternate Name' Uses the non-standard name: Alternate Name' Uses the non-standard name: |
Edge Full support 79 Full support 79 Alternate Name' Uses the non-standard name: |
Firefox
Full support 71 |
IE
No support No |
Opera
No support No |
Safari
No support No |
WebView Android Full support 75 Full support 75 Alternate Name' Uses the non-standard name: Alternate Name' Uses the non-standard name: |
Chrome Android Full support 75 Full support 75 Alternate Name' Uses the non-standard name: Alternate Name' Uses the non-standard name: |
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 Alternate Name' Uses the non-standard name: Alternate Name' Uses the non-standard name: |
framebufferTextureMultiviewOVR
|
Chrome Full support 75 Full support 75 No support 70 — 75 Alternate Name' Uses the non-standard name: |
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' Uses the non-standard name: |
Chrome Android Full support 75 Full support 75 No support 70 — 75 Alternate Name' Uses the non-standard name: |
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' Uses the non-standard name: |
Legend
- Full support
- Full support
- No support
- No support
- Uses a non-standard name.'
- Uses a non-standard name.
See also
WebGLRenderingContext.getExtension()
WebGLRenderingContext.getParameter()
- WebXR
- three.js multiview demo
OVR_multiview2 by Mozilla Contributors is licensed under CC-BY-SA 2.5.