VRLayerInit

Deprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

Non-standard: This feature is not standardized. We do not recommend using non-standard features in production, as they have limited browser support, and may change or be removed. However, they can be a suitable alternative in specific cases where no standard option exists.

The VRLayerInit dictionary of the WebVR API represents a content layer (an HTMLCanvasElement or OffscreenCanvas) that you want to present in a VR display.

Note: This dictionary was part of the old WebVR API. It has been superseded by the WebXR Device API.

You can retrieve VRLayerInit objects using VRDisplay.getLayers(), and present them using the VRDisplay.requestPresent() method.

Instance properties

VRLayerInit.leftBounds

Defines the left texture bounds of the canvas whose contents will be presented by the VRDisplay.

VRLayerInit.rightBounds

Defines the right texture bounds of the canvas whose contents will be presented by the VRDisplay.

VRLayerInit.source

Defines the canvas whose contents will be presented by the VRDisplay when VRDisplay.submitFrame() is called.

Examples

js
// currently returns an empty array
let layers = vrDisplay.getLayers();

if (navigator.getVRDisplays) {
  console.log("WebVR 1.1 supported");
  // Then get the displays attached to the computer
  navigator.getVRDisplays().then((displays) => {
    // If a display is available, use it to present the scene
    if (displays.length > 0) {
      vrDisplay = displays[0];
      console.log("Display found");
      // Starting the presentation when the button is clicked: It can only be called in response to a user gesture
      btn.addEventListener("click", () => {
        vrDisplay.requestPresent([{ source: canvas }]).then(() => {
          console.log("Presenting to WebVR display");

          // Here it returns an array of VRLayerInit objects
          layers = vrDisplay.getLayers();

          // …
        });
      });
    }
  });
}

VRLayerInit objects look something like this:

js
const init = {
  leftBounds: [
    /* … */
  ],
  rightBounds: [
    /* … */
  ],
  source: canvasReference,
};

Note: The canvasReference refers to the <canvas> element itself, not the WebGL context associated with the canvas. The other two members are arrays

Specifications

This dictionary was part of the old WebVR API that has been superseded by the WebXR Device API. It is no longer on track to becoming a standard.

Until all browsers have implemented the new WebXR APIs, it is recommended to rely on frameworks, like A-Frame, Babylon.js, or Three.js, or a polyfill, to develop WebXR applications that will work across all browsers. Read Meta's Porting from WebVR to WebXR guide for more information.

Browser compatibility

desktop mobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
getLayers
Deprecated Non-standard
Chrome – No support
Chrome
footnote No support
Edge – No support
Edge 15 – 18 (Release date: 2017-04-05)
footnote Removed in 79 and later
Firefox – No support
Firefox 55 – 63 (Release date: 2017-08-08)
footnote Only on Windows.
Firefox – No support
Firefox 64 – 97 (Release date: 2018-12-11)
footnote Only on macOS and Windows.
Firefox – No support
Firefox 98 (Release date: 2022-03-08)
disabled
disabled From version 98 users must explicitly set the dom.vr.enabled preference to true. To change preferences in Firefox, visit about:config.
Opera – No support
Opera
footnote No support
Safari – No support
Safari
footnote No support
Chrome Android – No support
Chrome Android
footnote No support
Firefox for Android – No support
Firefox for Android 55 – 97 (Release date: 2017-08-08)
footnote Removed in 98 and later
Opera Android – No support
Opera Android
footnote No support
Safari on iOS – No support
Safari on iOS
footnote No support
Samsung Internet – Full support
Samsung Internet 6 (Release date: 2017-08-23)
footnote
footnote Google Cardboard supported in Samsung Internet 7.0.
WebView Android – No support
WebView Android
footnote No support
WebView on iOS – No support
WebView on iOS
footnote No support

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Non-standard. Check cross-browser support before using.
Deprecated. Not for use in new websites.
See implementation notes.
User must explicitly enable this feature.
Has more compatibility info.

See also