Add WebXR immersive-ar support (#4281)

* Add WebXR immersive-ar support

This adds an extra "enter AR" button if WebXR support for "immersive-ar" is
detected. While in AR mode, hide the default scene background (if any) for
convenience.

For the most part this is handled as a variation of VR mode. While in AR, both
the 'vr-mode' and a new 'ar-mode' states are active.

Also wire up a new 'update-vr-devices' event to refresh the enter button states
after asynchronous availability changes.

Add support for the new navigator.xr.isSessionSupported API, falling back
to navigator.xr.supportsSession if not.

Use a different image for the "Enter AR" button

Conditionally show AR button when immersive-ar is available

Use a fully-separate "enter AR" button, update-vr-devices event

* Consider case when a-scene has not yet loaded

Author: klausw

src/components/scene/vr-mode-ui.js

@@ -4,7 +4,9 @@ var utils = require('../../utils/');
 var bind = utils.bind;
 
 var ENTER_VR_CLASS = 'a-enter-vr';
+var ENTER_AR_CLASS = 'a-enter-ar';
 var ENTER_VR_BTN_CLASS = 'a-enter-vr-button';
+var ENTER_AR_BTN_CLASS = 'a-enter-ar-button';
 var HIDDEN_CLASS = 'a-hidden';
 var ORIENTATION_MODAL_CLASS = 'a-orientation-modal';
 
@@ -16,7 +18,8 @@ module.exports.Component = registerComponent('vr-mode-ui', {
 
   schema: {
     enabled: {default: true},
-    enterVRButton: {default: ''}
+    enterVRButton: {default: ''},
+    enterARButton: {default: ''}
   },
 
   init: function () {
@@ -27,12 +30,14 @@ module.exports.Component = registerComponent('vr-mode-ui', {
 
     this.insideLoader = false;
     this.enterVREl = null;
+    this.enterAREl = null;
     this.orientationModalEl = null;
     this.bindMethods();
 
     // Hide/show VR UI when entering/exiting VR mode.
-    sceneEl.addEventListener('enter-vr', this.updateEnterVRInterface);
-    sceneEl.addEventListener('exit-vr', this.updateEnterVRInterface);
+    sceneEl.addEventListener('enter-vr', this.updateEnterInterfaces);
+    sceneEl.addEventListener('exit-vr', this.updateEnterInterfaces);
+    sceneEl.addEventListener('update-vr-devices', this.updateEnterInterfaces);
 
     window.addEventListener('message', function (event) {
       if (event.data.type === 'loaderReady') {
@@ -47,9 +52,10 @@ module.exports.Component = registerComponent('vr-mode-ui', {
 
   bindMethods: function () {
     this.onEnterVRButtonClick = bind(this.onEnterVRButtonClick, this);
+    this.onEnterARButtonClick = bind(this.onEnterARButtonClick, this);
     this.onModalClick = bind(this.onModalClick, this);
     this.toggleOrientationModalIfNeeded = bind(this.toggleOrientationModalIfNeeded, this);
-    this.updateEnterVRInterface = bind(this.updateEnterVRInterface, this);
+    this.updateEnterInterfaces = bind(this.updateEnterInterfaces, this);
   },
 
   /**
@@ -60,20 +66,28 @@ module.exports.Component = registerComponent('vr-mode-ui', {
   },
 
   /**
-   * Enter VR when modal clicked.
+   * Enter VR when clicked.
    */
   onEnterVRButtonClick: function () {
     this.el.enterVR();
   },
 
+  /**
+   * Enter AR when clicked.
+   */
+  onEnterARButtonClick: function () {
+    this.el.enterAR();
+  },
+
   update: function () {
     var data = this.data;
     var sceneEl = this.el;
 
     if (!data.enabled || this.insideLoader || utils.getUrlParameter('ui') === 'false') {
       return this.remove();
     }
-    if (this.enterVREl || this.orientationModalEl) { return; }
+
+    if (this.enterVREl || this.enterAREl || this.orientationModalEl) { return; }
 
     // Add UI if enabled and not already present.
     if (data.enterVRButton) {
@@ -84,23 +98,32 @@ module.exports.Component = registerComponent('vr-mode-ui', {
       this.enterVREl = createEnterVRButton(this.onEnterVRButtonClick);
       sceneEl.appendChild(this.enterVREl);
     }
+    if (data.enterARButton) {
+      // Custom button.
+      this.enterAREl = document.querySelector(data.enterARButton);
+      this.enterAREl.addEventListener('click', this.onEnterARButtonClick);
+    } else {
+      this.enterAREl = createEnterARButton(this.onEnterARButtonClick);
+      sceneEl.appendChild(this.enterAREl);
+    }
 
     this.orientationModalEl = createOrientationModal(this.onModalClick);
     sceneEl.appendChild(this.orientationModalEl);
 
-    this.updateEnterVRInterface();
+    this.updateEnterInterfaces();
   },
 
   remove: function () {
-    [this.enterVREl, this.orientationModalEl].forEach(function (uiElement) {
+    [this.enterVREl, this.enterAREl, this.orientationModalEl].forEach(function (uiElement) {
       if (uiElement && uiElement.parentNode) {
         uiElement.parentNode.removeChild(uiElement);
       }
     });
   },
 
-  updateEnterVRInterface: function () {
+  updateEnterInterfaces: function () {
     this.toggleEnterVRButtonIfNeeded();
+    this.toggleEnterARButtonIfNeeded();
     this.toggleOrientationModalIfNeeded();
   },
 
@@ -114,6 +137,17 @@ module.exports.Component = registerComponent('vr-mode-ui', {
     }
   },
 
+  toggleEnterARButtonIfNeeded: function () {
+    var sceneEl = this.el;
+    if (!this.enterAREl) { return; }
+    // Hide the button while in a session, or if AR is not supported.
+    if (sceneEl.is('vr-mode') || !utils.device.checkARSupport()) {
+      this.enterAREl.classList.add(HIDDEN_CLASS);
+    } else {
+      this.enterAREl.classList.remove(HIDDEN_CLASS);
+    }
+  },
+
   toggleOrientationModalIfNeeded: function () {
     var sceneEl = this.el;
     var orientationModalEl = this.orientationModalEl;
@@ -149,7 +183,6 @@ function createEnterVRButton (onClick) {
     'Enter VR mode with a headset or fullscreen mode on a desktop. ' +
     'Visit https://webvr.rocks or https://webvr.info for more information.');
   vrButton.setAttribute(constants.AFRAME_INJECTED, '');
-
   // Insert elements.
   wrapper.appendChild(vrButton);
   vrButton.addEventListener('click', function (evt) {
@@ -159,6 +192,37 @@ function createEnterVRButton (onClick) {
   return wrapper;
 }
 
+/**
+ * Create a button that when clicked will enter into AR mode
+ *
+ * Structure: <div><button></div>
+ *
+ * @param {function} onClick - click event handler
+ * @returns {Element} Wrapper <div>.
+ */
+function createEnterARButton (onClick) {
+  var arButton;
+  var wrapper;
+
+  // Create elements.
+  wrapper = document.createElement('div');
+  wrapper.classList.add(ENTER_AR_CLASS);
+  wrapper.setAttribute(constants.AFRAME_INJECTED, '');
+  arButton = document.createElement('button');
+  arButton.className = ENTER_AR_BTN_CLASS;
+  arButton.setAttribute('title',
+    'Enter AR mode with a headset or handheld device. ' +
+    'Visit https://webvr.rocks or https://webvr.info for more information.');
+  arButton.setAttribute(constants.AFRAME_INJECTED, '');
+  // Insert elements.
+  wrapper.appendChild(arButton);
+  arButton.addEventListener('click', function (evt) {
+    onClick();
+    evt.stopPropagation();
+  });
+  return wrapper;
+}
+
 /**
  * Creates a modal dialog to request the user to switch to landscape orientation.
  *

src/core/scene/a-scene.js

@@ -42,6 +42,7 @@ module.exports.AScene = registerElement('a-scene', {
         this.isIOS = isIOS;
         this.isMobile = isMobile;
         this.hasWebXR = isWebXRAvailable;
+        this.isAR = false;
         this.isScene = true;
         this.object3D = new THREE.Scene();
         var self = this;
@@ -245,15 +246,25 @@ module.exports.AScene = registerElement('a-scene', {
       writable: window.debug
     },
 
+    enterAR: {
+      value: function () {
+        if (!this.hasWebXR) {
+          throw new Error('Failed to enter AR mode, WebXR not supported.');
+        }
+        this.enterVR(true);
+      }
+    },
+
     /**
      * Call `requestPresent` if WebVR or WebVR polyfill.
      * Call `requestFullscreen` on desktop.
      * Handle events, states, fullscreen styles.
      *
+     * @param {bool?} useAR - if true, try immersive-ar mode
      * @returns {Promise}
      */
     enterVR: {
-      value: function () {
+      value: function (useAR) {
         var self = this;
         var vrDisplay;
         var vrManager = self.renderer.vr;
@@ -272,10 +283,16 @@ module.exports.AScene = registerElement('a-scene', {
             if (this.xrSession) {
               this.xrSession.removeEventListener('end', this.exitVRBound);
             }
-            navigator.xr.requestSession('immersive-vr').then(function requestSuccess (xrSession) {
+            navigator.xr.requestSession(useAR ? 'immersive-ar' : 'immersive-vr', {
+              requiredFeatures: ['local-floor'],
+              optionalFeatures: ['bounded-floor']
+            }).then(function requestSuccess (xrSession) {
               self.xrSession = xrSession;
               vrManager.setSession(xrSession);
               xrSession.addEventListener('end', self.exitVRBound);
+              if (useAR) {
+                self.addState('ar-mode');
+              }
               enterVRSuccess();
             });
           } else {
@@ -317,7 +334,7 @@ module.exports.AScene = registerElement('a-scene', {
           self.addState('vr-mode');
           self.emit('enter-vr', {target: self});
           // Lock to landscape orientation on mobile.
-          if (self.isMobile && screen.orientation && screen.orientation.lock) {
+          if (!navigator.xr && self.isMobile && screen.orientation && screen.orientation.lock) {
             screen.orientation.lock('landscape');
           }
           self.addFullScreenStyles();
@@ -383,6 +400,7 @@ module.exports.AScene = registerElement('a-scene', {
 
         function exitVRSuccess () {
           self.removeState('vr-mode');
+          self.removeState('ar-mode');
           // Lock to landscape orientation on mobile.
           if (self.isMobile && screen.orientation && screen.orientation.unlock) {
             screen.orientation.unlock();
@@ -735,8 +753,17 @@ module.exports.AScene = registerElement('a-scene', {
         this.time = this.clock.elapsedTime * 1000;
 
         if (this.isPlaying) { this.tick(this.time, this.delta); }
-
+        var savedBackground = null;
+        if (this.is('ar-mode')) {
+          // In AR mode, don't render the default background. Hide it, then
+          // restore it again after rendering.
+          savedBackground = this.object3D.background;
+          this.object3D.background = null;
+        }
         renderer.render(this.object3D, this.camera);
+        if (savedBackground) {
+          this.object3D.background = savedBackground;
+        }
       },
       writable: true
     }

src/style/aframe.css

@@ -26,7 +26,8 @@ html.a-fullscreen .a-canvas {
   position: fixed !important;
 }
 
-html:not(.a-fullscreen) .a-enter-vr {
+html:not(.a-fullscreen) .a-enter-vr,
+html:not(.a-fullscreen) .a-enter-ar {
   right: 5px;
   bottom: 5px;
 }
@@ -130,7 +131,8 @@ a-scene audio {
   left: -4px;
 }
 
-.a-enter-vr {
+.a-enter-vr,
+.a-enter-ar {
   font-family: sans-serif, monospace;
   font-size: 13px;
   width: 100%;
@@ -141,6 +143,10 @@ a-scene audio {
   bottom: 20px;
 }
 
+.a-enter-ar {
+  right: 80px;
+}
+
 .a-enter-vr-button,
 .a-enter-vr-modal,
 .a-enter-vr-modal a {
@@ -149,6 +155,14 @@ a-scene audio {
 
 .a-enter-vr-button {
   background: rgba(0, 0, 0, 0.35) url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20245.82%20141.73%22%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill%3A%23fff%3Bfill-rule%3Aevenodd%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3Emask%3C%2Ftitle%3E%3Cpath%20class%3D%22a%22%20d%3D%22M175.56%2C111.37c-22.52%2C0-40.77-18.84-40.77-42.07S153%2C27.24%2C175.56%2C27.24s40.77%2C18.84%2C40.77%2C42.07S198.08%2C111.37%2C175.56%2C111.37ZM26.84%2C69.31c0-23.23%2C18.25-42.07%2C40.77-42.07s40.77%2C18.84%2C40.77%2C42.07-18.26%2C42.07-40.77%2C42.07S26.84%2C92.54%2C26.84%2C69.31ZM27.27%2C0C11.54%2C0%2C0%2C12.34%2C0%2C28.58V110.9c0%2C16.24%2C11.54%2C30.83%2C27.27%2C30.83H99.57c2.17%2C0%2C4.19-1.83%2C5.4-3.7L116.47%2C118a8%2C8%2C0%2C0%2C1%2C12.52-.18l11.51%2C20.34c1.2%2C1.86%2C3.22%2C3.61%2C5.39%2C3.61h72.29c15.74%2C0%2C27.63-14.6%2C27.63-30.83V28.58C245.82%2C12.34%2C233.93%2C0%2C218.19%2C0H27.27Z%22%2F%3E%3C%2Fsvg%3E) 50% 50% no-repeat;
+}
+
+.a-enter-ar-button {
+  background: rgba(0, 0, 0, 0.35) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 245.8 141.7'%3E%3Cdefs%3E%3Cstyle%3E .a%7Bfill:%23fff;fill-rule:evenodd;%7D%3C/style%3E%3C/defs%3E%3Ctitle%3E mask%3C/title%3E%3Cpath d='m115 104.7c-22.5 0-40.8-18.8-40.8-42.1s18.2-42.1 40.8-42.1 40.8 18.8 40.8 42.1-18.2 42.1-40.8 42.1zm-21.9-0.8c-0.4-14.7 27.8-23.8 50.3-23.8s50.3 8.8 50.8 23c0.4 12.7-26.8 22.2-49.3 22.2s-51.4-6.2-51.9-21.5zm-65.8-103.8c-15.7 0-27.3 12.3-27.3 28.6v82.3c0 16.2 11.5 30.8 27.3 30.8 74 0 146.7 0.9 190.9 0 15.7 0 27.6-14.6 27.6-30.8v-82.4c0-16.2-11.9-28.6-27.6-28.6z' class='a' fill='%23fff'/%3E%3C/svg%3E") 50% 50% no-repeat;
+}
+
+.a-enter-vr-button,
+.a-enter-ar-button {
   background-size: 70% 70%;
   border: 0;
   bottom: 0;

src/systems/tracked-controls-webvr.js

@@ -15,6 +15,9 @@ module.exports.System = registerSystem('tracked-controls-webvr', {
     this.updateControllerList();
     this.throttledUpdateControllerList = utils.throttle(this.updateControllerList, 500, this);
 
+    // Don't use WebVR if WebXR is available?
+    if (navigator.xr) { return; }
+
     if (!navigator.getVRDisplays) { return; }
 
     this.sceneEl.addEventListener('enter-vr', function () {