<!doctype html>

<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'>

    
<meta http-equiv="origin-trial" data-feature="WebXR Device API" data-expires="2018-08-28" content="AnNpu7ceXvLew05ccD8Zr1OZsdZiB2hLQKK82kTTMDwF7oRKtP3QEJ4RzkeHrmB8Sq0vSV6ZNmszpBCZ0I8p9gAAAABceyJvcmlnaW4iOiJodHRwczovL2ltbWVyc2l2ZS13ZWIuZ2l0aHViLmlvOjQ0MyIsImZlYXR1cmUiOiJXZWJYUkRldmljZSIsImV4cGlyeSI6MTUzNTQxNDQwMH0=">

    <title>Offscreen Canvas</title>

    <link href='../css/common.css' rel='stylesheet'></link>

    
    
    <script src='../js/xrray-polyfill.js' type='module'></script>
    <script src='../js/webxr-polyfill.js'></script>

    <script src='../js/third-party/dat.gui/dat.gui.min.js'></script>

    <script src='../js/webxr-button.js'></script>
  </head>
  <body>
    <header>
      <details id='details-panel' open>
        <summary>Offscreen Canvas</summary>
        <p>
          A simple test to ensure that the browser's WebXR implementation works with a WebGL context created
          from an OffscreenCanvas.
          <a class="back" href="./index.html">Back</a>
        </p>
      </details>
    </header>
   <script type="module">
      import {Scene} from '../js/cottontail/src/scenes/scene.js';
      import {Renderer, createWebGLContext} from '../js/cottontail/src/core/renderer.js';
      import {Gltf2Node} from '../js/cottontail/src/nodes/gltf2.js';
      import {QueryArgs} from '../js/cottontail/src/util/query-args.js';
      import {SkyboxNode} from '../js/cottontail/src/nodes/skybox.js';

      // If requested, initialize the WebXR polyfill
      if (QueryArgs.getBool('allowPolyfill', false)) {
        var polyfill = new WebXRPolyfill();
      }

      // XR globals.
      let xrButton = null;
      let xrImmersiveRefSpace = null;
      let xrNonImmersiveRefSpace = null;

      // WebGL scene globals.
      let gl = null;
      let renderer = null;
      let scene = new Scene();
      scene.addNode(new Gltf2Node({url: '../../media/gltf/space/space.gltf'}));
      scene.addNode(new SkyboxNode({url: '../../media/textures/milky-way-4k.png'}));

      function initXR() {
        xrButton = new XRDeviceButton({
          onRequestSession: onRequestSession,
          onEndSession: onEndSession,
          supportedSessionTypes: ['immersive-vr']
        });
        document.querySelector('header').appendChild(xrButton.domElement);

        if (navigator.xr) {
          requestInlineSession()
          .then((session) => {
            gl.canvas.addEventListener('touchend', () => {
              session.end().then(() => {
                requestInlineSession({ optionalFeatures: ['local'] });
              }, { once: true });
            })
          });
        }
      }

      function initGL() {
        if (gl)
          return;

        let offscreenCanvas = new OffscreenCanvas(16, 16);
        gl = offscreenCanvas.getContext('webgl', {
          xrCompatible: true
        });

        renderer = new Renderer(gl);
        scene.setRenderer(renderer);
        scene.inputRenderer.setControllerMesh(new Gltf2Node({url: '../../media/gltf/controller/controller.gltf'}));
      }

      function onRequestSession() {
        navigator.xr.requestSession('immersive-vr').then((session) => {
          session.mode = 'immersive-vr';
          xrButton.setSession(session);
          onSessionStarted(session);
        });
      }

      function requestInlineSession(options) {
        return navigator.xr.requestSession('inline', options)
          .then((session) => {
            session.mode = 'inline';
            return onSessionStarted(session);
          });
      }

      function onSessionStarted(session) {
        session.addEventListener('end', onSessionEnded);

        initGL();

        session.updateRenderState({
            baseLayer: new XRWebGLLayer(session, gl)
        });

        session.requestReferenceSpace('local').then((refSpace) => {
          return refSpace;
        }, (e) => {
          if (!session.mode.startsWith('immersive')) {
            // If we're in inline mode, our underlying platform may not support
            // the stationary reference space, but an identity space is guaranteed.
            return session.requestReferenceSpace('viewer');
          } else {
            throw e;
          }
        }).then((refSpace) => {
          if (session.mode.startsWith('immersive')) {
            xrImmersiveRefSpace = refSpace;
          } else {
            xrNonImmersiveRefSpace = refSpace;
          }
          session.requestAnimationFrame(onXRFrame);
        });

        return session;
      }

      function onEndSession(session) {
        session.end();
      }

      function onSessionEnded(event) {
        if (event.session.mode.startsWith('immersive')) {
          xrButton.setSession(null);
        }
      }

      function onXRFrame(t, frame) {
        let session = frame.session;
        let refSpace = session.mode.startsWith('immersive') ?
                         xrImmersiveRefSpace :
                         xrNonImmersiveRefSpace;
        let pose = frame.getViewerPose(refSpace);

        scene.startFrame();

        session.requestAnimationFrame(onXRFrame);

        scene.updateInputSources(frame, refSpace);

        scene.drawXRFrame(frame, pose);

        scene.endFrame();
      }

      // Start the XR application.
      initXR();
    </script>
  </body>
</html>

Collaborative Calculation and Data Science

colby

sagemath

Product

Resources

Company