Virtual & Augmented Reality

The support for Virtual and Augmented Reality for the Web applications as of January 2018 is limited and mostly experimental. There are two APIs available. The first one - WebVR API - is available in some browsers for some particular VR environments. The newer one - WebXR Device API - which tries to approach the topic in a more generic fashion, including AR or Mixed Reality devices, is in the development.

Both APIs share the same fundamental concepts. Their scope is to allow authorized Web applications to discover available VR/AR devices, establish a session with the device, read the device-specific geometry data required to prepare the proper rendering and bind a <canvas> element as a visual layer onto the device.

This way the rendering details are handled by the existing canvas interfaces like WebGL context and the implementators very often delegate the rendering itself to the specialized libraries like A-Frame.

API glimpse

Older WebVR API

navigator.getVRDisplays()
Returns a Promise resolved with the list of available vrDevice objects when they have become available.
vrDevice.capabilities
Lists the capabilities of the current VR device, including hasExternalDisplay or canPresent boolean flags.
vrDevice.requestPresent(layers)
Requests putting the specified visual layers onto VR device's display and starts a session with the device. A layer might be represented by an object containing canvas rendering context that defines the rendering that will be presented ({source: canvasContext}).
vrDevice.getFrameData(frameData)
Fills the passed frameData object with the projection matrices needed to render a frame.
vrDevice.requestAnimationFrame(callback)
Registers a callback that will be executed within the next rendering frame on the VR device.
vrDevice.submitFrame()
Indicates that the layers canvases are ready to be rendered as a frame on the VR device.
vrDevice.exitPresent()
Requests finishing the current session. Returns a Promise resolved when the VR session is finished.

Newer WebXR Device API

navigator.xr.requestDevice()
Returns a Promise resolved with the selected AR/VR xrDevice object when it has become available.
xrDevice.supportsSession({ exclusive: true })
Returns a Promise resolved if the current AR/VR device allows exclusive immersive sessions.
xrDevice.requestSession({ exclusive: true, outputContext: canvasContext })
Returns a Promise resolved with the exclusive device session object xrSession after it has been established. Can get outputContext canvas context object that defines the rendering that will be presented.
xrSession.requestFrameOfReference('headModel')
Returns a Promise resolved with the frame of reference that provides a coordinate system for a given display type.
xrSession.requestAnimationFrame(callback)
Registers a callback that will be executed within the next rendering frame within the AR/VR session.
xrSession.end()
Requests finishing the current session. Returns a Promise resolved when the AR/VR session is finished.

Live Demo

  • document.getElementById('startVRButton').addEventListener('click', function () {
      if (navigator.getVRDisplays) {
        checkForVR();
      } else {
        alert('WebVR API is not supported.');
      }
    });
            
    async function checkForVR() {
      try {
        const displays = await navigator.getVRDisplays()
       
        if (!displays.length) {
          throw 'VR supported, but no VR displays available';
        }
        
        const result = document.getElementById('result');
            
        displays.forEach(function (display) {
          let li = document.createElement('li');
          li.innerHTML = display.displayName + ' (' + display.displayId + ')';
          result.appendChild(li);
        })
        
      } catch (err) {
        alert(err);
      }
    }
  • <p><button type="button" class="btn btn-default" id="startVRButton">Check for VR device</button></p>
    <ul id="result"></ul>
    <p>
      <a href="https://webvr.info/samples/" target="_blank">Browse demos by Google</a><br/>
      <a href="https://mozvr.com/mobile/" target="_blank">Browse demos by Mozilla</a>
    </p>

Resources