Added test for sparse frame submission

TomDDH · Mar 24, 2020 · eea396e · eea396e
1 parent 0183c53
commit eea396e
Show file tree

Hide file tree

Showing 3 changed files with 227 additions and 1 deletion.
diff --git a/ar-barebones.html b/ar-barebones.html
@@ -103,7 +103,9 @@
         xrButton.innerHTML = 'Exit AR';
 
         // Show which type of DOM Overlay got enabled (if any)
-        document.getElementById('session-info').innerHTML = 'DOM Overlay type: ' + session.domOverlayState.type;
+        if (session.domOverlayState) {
+          document.getElementById('session-info').innerHTML = 'DOM Overlay type: ' + session.domOverlayState.type;
+        }
 
         session.addEventListener('end', onSessionEnded);
         let canvas = document.createElement('canvas');

diff --git a/tests/index.html b/tests/index.html
@@ -140,6 +140,10 @@ <h2 class='tagline'>Test Pages</h2>
             { title: 'Interrupted AR', category: 'Exceptions!',
               path: 'interrupted-ar.html',
               description: 'Tests what happens when an exception is thrown in promise resolve of an `immersive-ar` session request.' },
+
+              { title: 'Sparse Frames', category: 'M_ss_ng Fr_m_s',
+              path: 'sparse-frames.html',
+              description: 'Tests what happens the framebuffer is not populated every frame.' },
           ];
 
           let mainElement = document.getElementById("main");

diff --git a/tests/sparse-frames.html b/tests/sparse-frames.html
@@ -0,0 +1,220 @@
+<!doctype html>
+<!--
+Copyright 2020 The Immersive Web Community Group
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+-->
+<html>
+  <head>
+    <meta charset='utf-8'>
+    <meta name='viewport' content='width=device-width, initial-scale=1, user-scalable=no'>
+    <meta name='mobile-web-app-capable' content='yes'>
+    <meta name='apple-mobile-web-app-capable' content='yes'>
+    <link rel='icon' type='image/png' sizes='32x32' href='favicon-32x32.png'>
+    <link rel='icon' type='image/png' sizes='96x96' href='favicon-96x96.png'>
+    <link rel='stylesheet' href='../css/common.css'>
+
+    <title>Sparse Frames</title>
+  </head>
+  <body>
+    <header>
+      <details open>
+        <summary>Sparse Frames</summary>
+        <p>
+          This test pages only submits content (a frame filled with a solid
+          color) every N frames so that the effect it produces on various
+          browsers and devices can be observed.
+          <a class="back" href="./">Back</a>
+          <br/>
+          <hr/>
+          <input id='skipFramesSelect' value='5' min='0' max='15' type='range'/><br/>
+          <span id='skipFramesSelectLabel'></span>
+          <br/>
+          <input type="radio" id="useVR" name="xrMode" value="immersive-vr" checked>
+          <label for="useVR">VR</label><br>
+          <input type="radio" id="useAR" name="xrMode" value="immersive-ar">
+          <label for="useAR">AR</label><br>
+        </p>
+      </details>
+    </header>
+    <script type="module">
+      import {WebXRButton} from '../js/util/webxr-button.js';
+      import {Scene} from '../js/render/scenes/scene.js';
+      import {Renderer, createWebGLContext} from '../js/render/core/renderer.js';
+      import {SkyboxNode} from '../js/render/nodes/skybox.js';
+      import {InlineViewerHelper} from '../js/util/inline-viewer-helper.js';
+      import {Gltf2Node} from '../js/render/nodes/gltf2.js';
+      import {QueryArgs} from '../js/util/query-args.js';
+
+      // If requested, use the polyfill to provide support for mobile devices
+      // and devices which only support WebVR.
+      import WebXRPolyfill from '../js/third-party/webxr-polyfill/build/webxr-polyfill.module.js';
+      if (QueryArgs.getBool('usePolyfill', true)) {
+        let polyfill = new WebXRPolyfill();
+      }
+
+      let skipFramesSelect = document.getElementById('skipFramesSelect');
+      let skipLabel = document.getElementById('skipFramesSelectLabel');
+      let xrModeRadios = document.getElementsByName('xrMode');
+
+      let skipFrames = 0;
+
+      function getXRMode() {
+        for(let radio of xrModeRadios) { 
+            if(radio.checked) return radio.value; 
+        } 
+      }
+
+      function updateLabel() {
+        skipFrames = parseFloat(skipFramesSelect.value);
+        skipLabel.textContent = `Skip ${skipFrames} frames`;
+      }
+
+      skipFramesSelect.addEventListener('change', () => { updateLabel(); });
+      updateLabel();
+
+      // XR globals.
+      let xrButton = null;
+      let xrImmersiveRefSpace = null;
+      let inlineViewerHelper = null;
+
+      // WebGL scene globals.
+      let gl = null;
+      let renderer = null;
+      let scene = new Scene();
+      let solarSystem = new Gltf2Node({url: '../media/gltf/space/space.gltf'});
+      // The solar system is big (citation needed). Scale it down so that users
+      // can move around the planets more easily.
+      solarSystem.scale = [0.1, 0.1, 0.1];
+      scene.addNode(solarSystem);
+      // Still adding a skybox, but only for the benefit of the inline view.
+      let skybox = new SkyboxNode({url: '../media/textures/milky-way-4k.png'});
+      scene.addNode(skybox);
+
+      function initXR() {
+        xrButton = new WebXRButton({
+          onRequestSession: onRequestSession,
+          onEndSession: onEndSession,
+          textEnterXRTitle: "START XR",
+          textXRNotFoundTitle: "XR NOT FOUND",
+          textExitXRTitle: "EXIT XR",
+        });
+        document.querySelector('header').appendChild(xrButton.domElement);
+
+        if (navigator.xr) {
+          xrButton.enabled = true;
+
+          navigator.xr.requestSession('inline').then(onSessionStarted);
+        }
+      }
+
+      function onRequestSession() {
+        return navigator.xr.requestSession(getXRMode())
+            .then((session) => {
+              xrButton.setSession(session);
+              session.isImmersive = true;
+              onSessionStarted(session);
+            });
+      }
+
+      function initGL() {
+        if (gl)
+          return;
+
+        gl = createWebGLContext({
+          xrCompatible: true
+        });
+        document.body.appendChild(gl.canvas);
+
+        function onResize() {
+          gl.canvas.width = gl.canvas.clientWidth * window.devicePixelRatio;
+          gl.canvas.height = gl.canvas.clientHeight * window.devicePixelRatio;
+        }
+        window.addEventListener('resize', onResize);
+        onResize();
+
+        renderer = new Renderer(gl);
+
+        scene.setRenderer(renderer);
+      }
+
+      function onSessionStarted(session) {
+        session.addEventListener('end', onSessionEnded);
+
+        if (session.isImmersive) {
+          // When in 'immersive-ar' mode don't draw an opaque background because
+          // we want the real world to show through.
+          skybox.visible = false;
+        }
+
+        initGL();
+
+        session.updateRenderState({ baseLayer: new XRWebGLLayer(session, gl) });
+
+        let refSpaceType = session.isImmersive ? 'local' : 'viewer';
+        session.requestReferenceSpace(refSpaceType).then((refSpace) => {
+          if (session.isImmersive) {
+            xrImmersiveRefSpace = refSpace;
+          } else {
+            inlineViewerHelper = new InlineViewerHelper(gl.canvas, refSpace);
+          }
+          session.requestAnimationFrame(onXRFrame);
+        });
+      }
+
+      function onEndSession(session) {
+        session.end();
+      }
+
+      function onSessionEnded(event) {
+        if (event.session.isImmersive) {
+          xrButton.setSession(null);
+          // Turn the background back on when we go back to the inlive view.
+          skybox.visible = true;
+        }
+      }
+
+      let frameCount = 0;
+
+      // Called every time a XRSession requests that a new frame be drawn.
+      function onXRFrame(t, frame) {
+        let session = frame.session;
+        let refSpace = session.isImmersive ?
+                         xrImmersiveRefSpace :
+                         inlineViewerHelper.referenceSpace;
+        session.requestAnimationFrame(onXRFrame);
+
+        frameCount++;
+
+        if (frameCount > skipFrames) {
+          let pose = frame.getViewerPose(refSpace);
+          scene.startFrame();
+
+          scene.drawXRFrame(frame, pose);
+
+          scene.endFrame();
+          frameCount = 0;
+        }
+      }
+
+      // Start the XR application.
+      initXR();
+    </script>
+  </body>
+</html>
+