All Projects → immersive-web → Webxr Polyfill

immersive-web / Webxr Polyfill

Licence: apache-2.0
Use the WebXR Device API today, providing fallbacks to native WebVR 1.1 and Cardboard

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Webxr Polyfill

webvrrocks
Your guide to Virtual Reality in the browser.
Stars: ✭ 116 (-53.78%)
Mutual labels:  vr, webvr, virtual-reality, webxr
Webar Article
WebAR-Article is a responsive and information rich website that is progressively enhanced with Augmented Reality content exposed through experimental web technologies.
Stars: ✭ 225 (-10.36%)
Mutual labels:  vr, augmented-reality, webvr, webxr
Unity Webxr Export
Develop and export WebXR experiences using Unity WebGL
Stars: ✭ 130 (-48.21%)
Mutual labels:  augmented-reality, virtual-reality, webvr, webxr
lvr
👓 Augmented Reality for everyone - Out of the world experiences
Stars: ✭ 92 (-63.35%)
Mutual labels:  augmented-reality, vr, webvr, virtual-reality
MixedRealityResources
Mixed Reality related resources
Stars: ✭ 190 (-24.3%)
Mutual labels:  augmented-reality, webvr, virtual-reality, webxr
Ideaspace
😎 Create interactive 3D and VR web experiences for desktop, mobile & VR devices
Stars: ✭ 344 (+37.05%)
Mutual labels:  vr, virtual-reality, webvr, webxr
Remixvr
RemixVR is a tool for collaboratively building customisable VR experiences.
Stars: ✭ 129 (-48.61%)
Mutual labels:  vr, virtual-reality, webvr, webxr
Openxr Sdk Source
Sources for OpenXR loader, basic API layers, and example code.
Stars: ✭ 236 (-5.98%)
Mutual labels:  vr, augmented-reality, virtual-reality
Superframe
📦 A super collection of A-Frame components.
Stars: ✭ 1,061 (+322.71%)
Mutual labels:  vr, virtual-reality, webvr
Aframe React
:atom: Build virtual reality experiences with A-Frame and React.
Stars: ✭ 1,199 (+377.69%)
Mutual labels:  vr, virtual-reality, webvr
Webvr Polyfill
Use WebVR today, without requiring a special browser build.
Stars: ✭ 1,343 (+435.06%)
Mutual labels:  polyfill, webvr, webxr
Networked Aframe
A web framework for building multi-user virtual reality experiences.
Stars: ✭ 803 (+219.92%)
Mutual labels:  virtual-reality, webvr, webxr
Webxr Input Profiles
WebXR Gamepad assets, source library, and schema
Stars: ✭ 72 (-71.31%)
Mutual labels:  augmented-reality, virtual-reality, webxr
Webxr
Repository for the WebXR Device API Specification.
Stars: ✭ 2,357 (+839.04%)
Mutual labels:  augmented-reality, virtual-reality, webxr
Worlds2
Building Virtual Reality Worlds using Three.js
Stars: ✭ 34 (-86.45%)
Mutual labels:  vr, virtual-reality, webvr
Patches
Patches is a visual programming editor for building WebVR and WebGL experiences.
Stars: ✭ 164 (-34.66%)
Mutual labels:  vr, virtual-reality, webvr
Exokit
Native VR/AR/XR engine for JavaScript 🦖
Stars: ✭ 809 (+222.31%)
Mutual labels:  virtual-reality, webvr, webxr
Awesome Aframe
[DISCONTINUED] Collection of awesome resources for the A-Frame WebVR framework.
Stars: ✭ 1,310 (+421.91%)
Mutual labels:  vr, virtual-reality, webvr
Stereokit
An easy-to-use mixed reality library for building HoloLens and VR applications with C# and OpenXR!
Stars: ✭ 195 (-22.31%)
Mutual labels:  vr, augmented-reality, virtual-reality
Aframe
🅰️ web framework for building virtual reality experiences.
Stars: ✭ 13,428 (+5249.8%)
Mutual labels:  vr, virtual-reality, webvr

WebXR Polyfill

Build Status Build Status

A JavaScript implementation of the WebXR Device API, as well as the WebXR Gamepad Module. This polyfill allows developers to write against the latest specification, providing support when run on browsers that implement the WebVR 1.1 spec, or on mobile devices with no WebVR/WebXR support at all.

The polyfill reflects the stable version of the API which has shipped in multiple browsers.


If you are writing code against the WebVR 1.1 spec, use webvr-polyfill, which supports browsers with the 1.0 spec, or no implementation at all. It is recommended to write your code targeting the WebXR Device API spec however and use this polyfill as browsers begin to implement the latest changes.

The minimal input controls currently supported by WebXR is polyfilled here as well, using the Gamepad API.

Setup

Installing

Download the build at build/webxr-polyfill.js and include it as a script tag, or use a CDN. You can also use the minified file in the same location as webxr-polyfill.min.js.

  <script src='webxr-polyfill.js'></script>
  <!-- or use a link to a CDN -->
  <script src='https://cdn.jsdelivr.net/npm/[email protected]/build/webxr-polyfill.js'></script>

Or if you're using a build tool like browserify or webpack, install it via npm.

$ npm install --save webxr-polyfill

Building Locally

$ npm run build

Using

The webxr-polyfill exposes a single constructor, WebXRPolyfill that takes an object for configuration. See full configuration options at API.

Be sure to instantiate the polyfill before calling any of your XR code! The polyfill needs to patch the API if it does not exist so your content code can assume that the WebXR API will just work.

If using script tags, a WebXRPolyfill global constructor will exist.

var polyfill = new WebXRPolyfill();

In a modular ES6 world, import and instantiate the constructor similarly.

import WebXRPolyfill from 'webxr-polyfill';
const polyfill = new WebXRPolyfill();

API

new WebXRPolyfill(config)

Takes a config object with the following options:

  • global: What global should be used to find needed types. (default: window on browsers)
  • webvr: Whether or not there should be an attempt to fall back to a WebVR 1.1 VRDisplay. (default: true).
  • cardboard: Whether or not there should be an attempt to fall back to a JavaScript implementation of the WebXR API only on mobile. (default: true)
  • cardboardConfig: The configuration to be used for CardboardVRDisplay when used. Has no effect when cardboard is false, or another XRDevice is used. Possible configuration options can be found here in the cardboard-vr-display repo. (default: null)
  • allowCardboardOnDesktop: Whether or not to allow cardboard's stereoscopic rendering and pose via sensors on desktop. This is most likely only helpful for development and debugging. (default: false)

Browser Support

Development note: babel support is currently removed, handle definitively in #63

There are 3 builds provided: build/webxr-polyfill.js, an ES5 transpiled build, its minified counterpart build/webxr-polyfill.min.js, and an untranspiled ES Modules version build/webxr-polyfill.module.js. If using the transpiled ES5 build, its up to developers to decide which browser features to polyfill based on their support, as no extra polyfills are included. Some browser features this library uses include:

  • TypedArrays
  • Object.assign
  • Promise
  • Symbol
  • Map
  • Array#includes

Check the .babelrc configuration and ensure the polyfill runs in whatever browsers you choose to support.

Polyfilling Rules

  • If 'xr' in navigator === false:
    • WebXR classes (e.g. XRDevice, XRSession) will be added to the global
    • navigator.xr will be polyfilled.
    • If the platform has a VRDisplay from the WebVR 1.1 spec available:
      • navigator.xr.requestDevice() will return a polyfilled XRDevice wrapping the VRDisplay.
    • If the platform does not have a VRDisplay, config.cardboard === true, and on mobile:
      • navigator.xr.requestDevice() will return a polyfilled XRDevice based on CardboardVRDisplay.
    • If WebGLRenderingContext.prototype.setCompatibleXRDevice is not a function:
      • Polyfill all WebGLRenderingContext.prototype.setCompatibleXRDevice and a creation attribute for { compatibleXrDevice }.
      • Polyfills HTMLCanvasElement.prototype.getContext to support a xrpresent type. Returns a polyfilled XRPresentationContext (via CanvasRenderingContext2D or ImageBitmapRenderingContext if supported) used for mirroring and magic window.
  • If 'xr' in navigator === true, config.cardboard === true and on mobile:
    • Overwrite navigator.xr.requestDevice so that a native XRDevice is returned if it exists, and if not, return a polyfilled XRDevice based on CardboardVRDisplay.

In the future, when the WebXR API is implemented on a platform but inconsistent with spec (due to new spec changes or inconsistencies), the polyfill will attempt to patch these differences without overwriting the native behavior.

Not supported/Caveats

  • XRWebGLLayer.framebufferScaleFactor

License

This program is free software for both commercial and non-commercial use, distributed under the Apache 2.0 License.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].