added docs and console warnings about WebXR

packages/model-viewer/src/features/ar.ts

@@ -253,7 +253,7 @@ configuration or device capabilities');
     }
 
     protected async[$enterARWithWebXR]() {
-      console.log('Attempting to present in AR...');
+      console.log('Attempting to present in AR with WebXR...');
 
       if (!this.loaded) {
         this[$preload] = true;
@@ -269,10 +269,11 @@ configuration or device capabilities');
         arRenderer.placeOnWall = this.arPlacement === 'wall';
         await arRenderer.present(this[$scene]);
       } catch (error) {
-        console.warn('Error while trying to present to AR');
+        console.warn('Error while trying to present in AR with WebXR');
         console.error(error);
         await this[$renderer].arRenderer.stopPresenting();
         isWebXRBlocked = true;
+        console.warn('Falling back to next ar-mode');
         await this[$selectARMode]();
         this.activateAR();
       } finally {
@@ -332,6 +333,8 @@ configuration or device capabilities');
           // because hash-only changes modify the URL in-place without
           // navigating:
           self.history.back();
+          console.warn('Error while trying to present in AR with Scene Viewer');
+          console.warn('Falling back to next ar-mode');
           this[$selectARMode]();
           // Would be nice to activateAR() here, but webXR fails due to not
           // seeing a user activation.
@@ -341,6 +344,7 @@ configuration or device capabilities');
       self.addEventListener('hashchange', undoHashChange, {once: true});
 
       this[$arAnchor].setAttribute('href', intent);
+      console.log('Attempting to present in AR with Scene Viewer...');
       this[$arAnchor].click();
     }
 
@@ -361,6 +365,7 @@ configuration or device capabilities');
       const img = document.createElement('img');
       anchor.appendChild(img);
       anchor.setAttribute('href', modelUrl.toString());
+      console.log('Attempting to present in AR with Quick Look...');
       anchor.click();
       anchor.removeChild(img);
     }

packages/model-viewer/src/three-components/ARRenderer.ts

@@ -154,11 +154,14 @@ export class ARRenderer extends EventDispatcher {
    * Resolves to true if the renderer has detected all the necessary qualities
    * to support presentation in AR.
    */
-  async supportsPresentation() {
+  async supportsPresentation(): Promise<boolean> {
     try {
       assertIsArCandidate();
       return await navigator.xr!.isSessionSupported('immersive-ar');
     } catch (error) {
+      console.warn('Request to present in WebXR denied:');
+      console.warn(error);
+      console.warn('Falling back to next ar-mode');
       return false;
     }
   }
@@ -255,7 +258,7 @@ export class ARRenderer extends EventDispatcher {
       await this.currentSession!.end();
       await cleanupPromise;
     } catch (error) {
-      console.warn('Error while trying to end AR session');
+      console.warn('Error while trying to end WebXR AR session');
       console.warn(error);
 
       this.postSessionCleanup();

packages/modelviewer.dev/examples/augmentedreality/index.html

@@ -266,11 +266,21 @@ <h4>Customize a WebXR Augmented Reality session with HTML, CSS, and JS in Chrome
         <div class="wrapper">
           <div class="heading">
             <h2 class="demo-title">Augmented Reality</h2>
-            <h4>This demonstrates several augmented reality modes, including <code>webxr</code>, <code>scene-viewer</code>, <code>quick-look</code> &amp; the accompanying attributes, <code>ar</code>, <code>ar-modes</code>, <code>ar-scale</code>, <code>ios-src</code>.</h4>
+            <h4>This demonstrates several augmented reality modes, including
+            <code>webxr</code>, <code>scene-viewer</code>,
+            <code>quick-look</code> &amp; the accompanying attributes,
+            <code>ar</code>, <code>ar-modes</code>, <code>ar-scale</code>,
+            <code>ios-src</code>.</h4>
+            <p>
+              Note that WebXR mode requires the page be served on HTTPS and if
+              enclosed in an iframe, that iframe must allow your origin the
+              <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Feature-Policy/xr-spatial-tracking">
+                <code>xr-spatial-tracking</code></a> policy.
+            </p>
           </div>
           <example-snippet stamp-to="ar" highlight-as="html">
             <template>
-<model-viewer src="../../shared-assets/models/Astronaut.glb" ar ar-modes="webxr scene-viewer quick-look" camera-controls alt="A 3D model of an astronaut" skybox-image="../../shared-assets/environments/aircraft_workshop_01_1k.hdr" ios-src="../../shared-assets/models/Astronaut.usdz"></model-viewer>
+<model-viewer src="../../shared-assets/models/Astronaut.glb" ar ar-scale="fixed" ar-modes="webxr scene-viewer quick-look" camera-controls alt="A 3D model of an astronaut" skybox-image="../../shared-assets/environments/aircraft_workshop_01_1k.hdr" ios-src="../../shared-assets/models/Astronaut.usdz"></model-viewer>
             </template>
           </example-snippet>
 

packages/modelviewer.dev/styles/docs.css

@@ -2,10 +2,6 @@
   padding: 10px 40px;
 }
 
-p {
-  display: inline;
-}
-
 .footerDocumentation {
   margin-top: 500px;
 }