Webvr-standard-monitor NPM

WebVR-Standard-Monitor

Creates a stand-in object that represents the regular, flat display, through the WebVR API. This makes it easier to support "mixed-mode" experiences on desktop (as well as providing a reasonable fallback for graceful degredation) and "Magic Window" style experiences on mobile devices.

Usage

Before you can use WebVR-Standard-Monitor, you must setup the shim by calling WebVRStandardMonitor() (as a function, not instantiated as an object with new).

After that, call navigator.getVRDisplays(), which returns a Promise. When the Promise resolves, it will be resolved with an array of VRDisplay objects. At the beginning of the array, an object of type WebVRStandardMonitor will appear. This is the flat, standard monitor. Use it like you use the other displays.

If WebVR-Polyfill on a mobile device is being used, WebVR-Standard-Monitor will wrap the getPose, getImmediatePose, and resetPose methods of the WebVR-Polyfill display object.

Note that the getEyeParameters method only returns a value when the side parameter is set to "left". In your rendering code, it is best to collect an array of non-null and non-undefined eye parameter objects and iterate over that array. In this way, you can use the same rendering code for both the mono-view standard monitor and stereo-view VR headset.

Properties:

displayId: 0,
displayName: "Magic Window" on mobile devices, "Standard Monitor" otherwise,
isPolyfilled: forwards the value of the isPolyfilled property from WebVR-Polyfill, if it is present,
isConnected: true,
stageParameters: null,
isPresenting: true when the page is in Full Screen mode, false otherwise
depthNear: initially set to 0.01, throws an error if set with a non-number value.
depthFar: initially set to 10000.0, throws an error if set with a non-number value,
capabilities:
- hasPosition: false,
- hasOrientation: true on mobile devices, false otherwise,
- hasExternalDisplay: false,
- canPresent: true,
- maxLayers: 1.

Methods:

requestAnimationFrame(callback): forwards to window.requestAnimationFrame,
cancelAnimationFrame(handle): forwards to window.cancelAnimationFrame,
submitFrame(pose): a NOOP, included for compatibility,
getPose(): Either forwards on to the WebVR-Polyfill method of the same name, or returns the default pose (zero vector for position, identity quaternion for orientation, null for all other values defined in the WebVR API specification),
getImmediatePose(): Either forwards on to the WebVR-Polyfill method of the same name, or returns the default pose,
resetPose() = Either forwards on to the WebVR-Polyfill method of the same name, or does nothing,
requestPresent(layers): enters full screen mode. On mobile devices, locks the orientation of the display. Updates the internal list of layers with all of the elements of the layers parameter from 0 to capabilities.maxLayers - 1 (so just one layer, that is),
getLayers(): returns a clone of the internal list of layers,
exitPresent: exits out of full screen mode. On mobile devices, unlocks the orientation of the display. Clears the internal list of layers.
getEyeParameters(side): only returns a value when side = "left", otherwise returns undefined. The value returned is

var width = screen.width,
  height = screen.height,
  aspect = width / height,
  vFOV = 35,
  hFOV = vFOV * aspect;
return {
  renderWidth: width * devicePixelRatio,
  renderHeight: height * devicePixelRatio,
  offset: new Float32Array([0, 0, 0]),
  fieldOfView: {
    upDegrees: vFOV,
    downDegrees: vFOV,
    leftDegrees: hFOV,
    rightDegrees: hFOV
  }
};

Notes

WebVR API

WebVR API is a way of enumerating the head-mounted displays that are attached to the system to allow the developer to read position and orientation values from it and send images directly to it.

WebVR-Polyfill

WebVR-Standard-Monitor is compatible with WebVR-Polyfill. Make sure to call WebVRStandardMonitor() after including (or initializing, if using deferred initialization) the WebVR-Polyfill script before WebVR-Standard-Monitor.