Update XR interface and remove XRDevice

Fixes #55. Also changes the syntax of the WebGL context compatibility methods because they required an XRDevice to function properly.
immersive-web · Jun 26, 2019 · 640182a · 640182a
1 parent 7e0968f
commit 640182a
Show file tree

Hide file tree

Showing 21 changed files with 905 additions and 1,029 deletions.
diff --git a/examples/js/webxr-button.js b/examples/js/webxr-button.js
@@ -309,7 +309,7 @@ class EnterXRButton {
 
     this.options = options;
 
-    this.device = null;
+    this._enabled = false;
     this.session = null;
 
     // Pass in your own domElement if you really dont want to use ours
@@ -325,16 +325,23 @@ class EnterXRButton {
   }
 
   /**
-   * Sets the XRDevice this button is associated with.
-   * @param {XRDevice} device
-   * @return {EnterXRButton}
+   * Sets the enabled state of this button.
+   * @param {boolean} enabled
    */
-  setDevice(device) {
-    this.device = device;
+  set enabled(enabled) {
+    this._enabled = enabled;
     this.__updateButtonState();
     return this;
   }
 
+  /**
+   * Gets the enabled state of this button.
+   * @return {boolean}
+   */
+  get enabled() {
+    return this._enabled;
+  }
+
   /**
    * Indicate that there's an active XRSession. Switches the button to "Exit XR"
    * state if not null, or "Enter XR" state if null.
@@ -443,8 +450,8 @@ class EnterXRButton {
   __onXRButtonClick() {
     if (this.session) {
       this.options.onEndSession(this.session);
-    } else if (this.device) {
-      this.options.onRequestSession(this.device);
+    } else if (this._enabled) {
+      this.options.onRequestSession();
     }
   }
 
@@ -457,7 +464,7 @@ class EnterXRButton {
       this.setTitle(this.options.textExitXRTitle);
       this.setTooltip('Exit XR presentation');
       this.__setDisabledAttribute(false);
-    } else if (this.device) {
+    } else if (this._enabled) {
       this.setTitle(this.options.textEnterXRTitle);
       this.setTooltip('Enter XR');
       this.__setDisabledAttribute(false);

diff --git a/examples/magic-window.html b/examples/magic-window.html
@@ -71,33 +71,30 @@
         document.querySelector('header').appendChild(xrButton.domElement);
 
         if (navigator.xr) {
-          navigator.xr.requestDevice().then((device) => {
-            xrButton.setDevice(device);
-
-            if (!device)
-              return;
-
-            // In order for a non-immersive session to be used we must provide
-            // an outputContext, which indicates the canvas that will contain
-            // results of the session's rendering.
-            let outputCanvas = document.createElement('canvas');
-            let ctx = outputCanvas.getContext('xrpresent');
-
-            // Pick an arbitrary device for the magic window content and start
-            // up a non-immersive session if possible.
-            device.requestSession({ outputContext: ctx })
-                .then((session) => {
-                  // Add the canvas to the document once we know that it will be
-                  // rendered to.
-                  document.body.appendChild(outputCanvas);
-                  onSessionStarted(session);
-                });
+          navigator.xr.supportsSession('immersive-vr').then(() => {
+            xrButton.enabled = true;
           });
+
+          // In order for a non-immersive session to be used we must provide
+          // an outputContext, which indicates the canvas that will contain
+          // results of the session's rendering.
+          let outputCanvas = document.createElement('canvas');
+          let ctx = outputCanvas.getContext('xrpresent');
+
+          // Pick an arbitrary device for the magic window content and start
+          // up a non-immersive session if possible.
+          navigator.xr.requestSession('inline')
+              .then((session) => {
+                // Add the canvas to the document once we know that it will be
+                // rendered to.
+                document.body.appendChild(outputCanvas);
+                onSessionStarted(session);
+              });
         }
       }
 
-      function onRequestSession(device) {
-        device.requestSession({ immersive: true }).then((session) => {
+      function onRequestSession() {
+        navigator.xr.requestSession('immersive-vr').then((session) => {
           xrButton.setSession(session);
           onSessionStarted(session);
         });
@@ -108,7 +105,7 @@
 
         if (!gl) {
           gl = createWebGLContext({
-            compatibleXRDevice: session.device
+            xrCompatible: true
           });
 
           renderer = new Renderer(gl);

diff --git a/examples/mirroring.html b/examples/mirroring.html
@@ -74,10 +74,8 @@
         document.querySelector('header').appendChild(xrButton.domElement);
 
         if (navigator.xr) {
-          navigator.xr.requestDevice().then((device) => {
-            device.supportsSession({immersive: true}).then(() => {
-              xrButton.setDevice(device);
-            });
+          navigator.xr.supportsSession('immersive-vr').then(() => {
+            xrButton.enabled = true;
           });
         }
       }
@@ -95,10 +93,7 @@
 
         // Providing an outputContext when requesting an immersive session
         // indicates that it should be used as the mirror destination.
-        device.requestSession({
-          immersive: true,
-          outputContext: ctx
-        }).then(onSessionStarted);
+        navigator.xr.requestSession('immersive-vr').then(onSessionStarted);
       }
 
       function onSessionStarted(session) {
@@ -108,7 +103,7 @@
 
         if (!gl) {
           gl = createWebGLContext({
-            compatibleXRDevice: session.device
+            xrCompatible: true
           });
 
           renderer = new Renderer(gl);

diff --git a/examples/offscreen-canvas.html b/examples/offscreen-canvas.html
@@ -70,33 +70,30 @@
         document.querySelector('header').appendChild(xrButton.domElement);
 
         if (navigator.xr) {
-          navigator.xr.requestDevice().then((device) => {
-            xrButton.setDevice(device);
-
-            if (!device)
-              return;
-
-            // In order for a non-immersive session to be used we must provide
-            // an outputContext, which indicates the canvas that will contain
-            // results of the session's rendering.
-            let outputCanvas = document.createElement('canvas');
-            let ctx = outputCanvas.getContext('xrpresent');
-
-            // Pick an arbitrary device for the magic window content and start
-            // up a non-immersive session if possible.
-            device.requestSession({ outputContext: ctx })
-                .then((session) => {
-                  // Add the canvas to the document once we know that it will be
-                  // rendered to.
-                  document.body.appendChild(outputCanvas);
-                  onSessionStarted(session);
-                });
+          navigator.xr.supportsSession('immersive-vr').then(() => {
+            xrButton.enabled = true;
           });
+
+          // In order for a non-immersive session to be used we must provide
+          // an outputContext, which indicates the canvas that will contain
+          // results of the session's rendering.
+          let outputCanvas = document.createElement('canvas');
+          let ctx = outputCanvas.getContext('xrpresent');
+
+          // Pick an arbitrary device for the magic window content and start
+          // up a non-immersive session if possible.
+          navigator.xr.requestSession('inline')
+              .then((session) => {
+                // Add the canvas to the document once we know that it will be
+                // rendered to.
+                document.body.appendChild(outputCanvas);
+                onSessionStarted(session);
+              });
         }
       }
 
-      function onRequestSession(device) {
-        device.requestSession({ immersive: true }).then((session) => {
+      function onRequestSession() {
+        navigator.xr.requestSession('immersive-vr').then((session) => {
           xrButton.setSession(session);
           onSessionStarted(session);
         });
@@ -108,7 +105,7 @@
         if (!gl) {
           let offscreenCanvas = new OffscreenCanvas(1, 1);
           gl = offscreenCanvas.getContext('webgl', {
-            compatibleXRDevice: session.device
+            xrCompatible: true
           });
 
           renderer = new Renderer(gl);

diff --git a/examples/xr-presentation.html b/examples/xr-presentation.html
@@ -76,21 +76,18 @@
 
         // Is WebXR available on this UA?
         if (navigator.xr) {
-          // Request a list of all the XR Devices connected to the system.
-          navigator.xr.requestDevice().then((device) => {
-            // If the device allows creation of immersive sessions set it as the
-            // target of the 'Enter XR' button.
-            device.supportsSession({immersive: true}).then(() => {
-              xrButton.setDevice(device);
-            });
+          // If the device allows creation of exclusive sessions set it as the
+          // target of the 'Enter XR' button.
+          navigator.xr.supportsSession('immersive-vr').then(() => {
+            xrButton.enabled = true;
           });
         }
       }
 
       // Called when the user selects a device to present to. In response we
       // will request an immersive session from that device.
-      function onRequestSession(device) {
-        device.requestSession({immersive: true}).then(onSessionStarted);
+      function onRequestSession() {
+        navigator.xr.requestSession('immersive-vr').then(onSessionStarted);
       }
 
       // Called when we've successfully acquired a XRSession. In response we
@@ -107,7 +104,7 @@
         // Create a WebGL context to render with, initialized to be compatible
         // with the XRDisplay we're presenting to.
         gl = createWebGLContext({
-          compatibleXRDevice: session.device
+          xrCompatible: true
         });
 
         // Create a renderer with that GL context (this is just for the samples