WebXR Polyfill

The WebVR and WebXR polyfills provide JavaScript implementations of WebXR for browsers that lack the required APIs. The polyfills are necessary to create responsive VR experiences on the web, making it possible to create cross-platform, standardized XR experiences (State of WebXR).

VR headset, VR cardboard headset, laptop, mobile device — Designing a responsive, immersive web experience requires content to work across many form factors. Image from Arturo Paracuellos' Progressive Enhancement on a WebVR Project.

In 2015, Boris Smus created the WebVR Polyfill for the experimental WebVR 1.1 API, synthesizing stereoscopic 3D rendering for VR on all platforms. As interest in WebVR grew, the standards group focused on a new WebXR Device API to replace WebVR. With VR capabilities hiding in nightly builds and behind flags, complex browser/platform support matrices, and now two specs in flux, creating truly interoperable immersive experiences was a challenge. Since 2017, I've owned and maintained the W3C Immersive Web Community Group (IWCG)'s polyfill effort, maintaining the WebVR Polyfill, and later creating the WebXR Polyfill to solve the difficulty of writing a single immersive experience that can run on all devices. Developers can now safely target the latest WebXR APIs, with the polyfill supporting VR experiences for browsers that do not support WebXR (iOS, non-Chromimum mobile), falling back to the WebVR 1.1 API (VR browsers) or the JavaScript implementation to handle performant rendering.

Stereoscopic view of a WebXR scene running on an Android device — Demonstrative stereoscopic view in WebVR via polyfill. (source)

Today, the immersive web polyfill suite is comprised of several, distinct modules for remixability and extensibility:

webvr-polyfill-dpdb: A community-owned JSON dataset of mobile device parameters, used to create correct lens distortion when rendering a stereoscopic scene. While native applications have access to physical characteristics of a mobile device, the web does not, requiring this dataset.
cardboard-vr-display: A WebVR 1.1 implementation of stereoscopic rendering of a WebGL canvas. Uses webvr-polyfill-dpdb.
webvr-polyfill: The WebVR 1.1 polyfill, a small wrapper around cardboard-vr-display. Will become less useful as WebXR popularity grows.
webxr-polyfill: The WebXR Device API polyfill. Maps the WebXR API to whatever the browser supports, either native WebXR, WebVR 1.1, or cardboard-vr-display.

While support for WebXR is growing, there's still a strong need today for polyfill support. The web is responsive, accessible, and interoperable: content should work on all devices. Users can experience 3D on the web in the traditional 2D sense on desktop or mobile, view the content with an immersively with a room-based Vive, an unbounded Oculus headset, or using a mobile device with a 3DOF Google Cardboard or mobile AR platforms. Immersive technology is not equally distributed, and capabilities are inconsistent even with access to the appropriate devices. The polyfills enable the creation of experiences that work everywhere, just like the web we're used to.

Fire creature rendered via AR in a park — Mozilla's iOS WebXR Viewer prototypes augmented reality experiences by extending the WebXR Polyfill.

Impact

The polyfills are used throughout the web, providing a consistent, immersive experience for all platforms. Some services and platforms that have used either the WebVR or WebXR polyfill are:

Google's 3D asset host Poly
WebVR framework A-Frame
Snap's 3D engine PlayCanvas
Google's I/O 2019 AR Experience
Mozilla's iOS WebXR Viewer
And others: WebXR Samples, Vizor, Archilogic, GeoJS, BeatSaver Viewer