| <!doctype html> |
| <!-- |
| Copyright 2018 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>Spectator Mode</title> |
| </head> |
| <body> |
| <header> |
| <details open> |
| <summary>Spectator Mode</summary> |
| <p> |
| This sample demonstrates how to render a separate, 3rd person view of |
| the scene to an external monitor if one is available. This sample is |
| not applicable to mobile or standalone devices. |
| <a class="back" href="./">Back</a> |
| </p> |
| </details> |
| </header> |
| <main style='text-align: center;'> |
| </main> |
| <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 {Gltf2Node} from './js/render/nodes/gltf2.js'; |
| import {mat4, quat} from './js/render/math/gl-matrix.js'; |
| import {InlineViewerHelper} from './js/util/inline-viewer-helper.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(); |
| } |
| |
| const autoSpectate = QueryArgs.getBool('autoSpectate', false); |
| |
| // XR globals. |
| let xrButton = null; |
| let xrImmersiveRefSpace = null; |
| let inlineViewerHelper = null; |
| |
| // WebGL scene globals. |
| let gl = null; |
| let renderer = null; |
| let scene = new Scene(); |
| scene.addNode(new Gltf2Node({url: 'media/gltf/garage/garage.gltf'})); |
| scene.standingStats(true); |
| |
| // Indicates if we are currently presenting a spectator view of the |
| // scene to an external display. |
| let spectatorMode = false; |
| let spectatorButton = null; |
| let spectatorProjectionMatrix = mat4.create(); |
| let spectatorQuat = quat.create(); |
| let headset = null; |
| |
| // Set up a view point in a corner of the garage scene near |
| // near the ceiling and looking down at the origin/user. |
| quat.rotateY(spectatorQuat, spectatorQuat, Math.PI * -0.25); |
| quat.rotateX(spectatorQuat, spectatorQuat, Math.PI * -0.15); |
| const spectatorTransform = new XRRigidTransform( |
| {x: -1.75, y: 2.0, z: 1.75}, |
| {x: spectatorQuat[0], y: spectatorQuat[1], z: spectatorQuat[2], w: spectatorQuat[3]} |
| ); |
| |
| let mainElement = document.querySelector('main'); |
| |
| function initXR() { |
| xrButton = new WebXRButton({ |
| onRequestSession: onRequestSession, |
| onEndSession: onEndSession |
| }); |
| document.querySelector('header').appendChild(xrButton.domElement); |
| |
| if (navigator.xr) { |
| navigator.xr.isSessionSupported('immersive-vr').then((supported) => { |
| xrButton.enabled = supported; |
| }); |
| |
| navigator.xr.requestSession('inline').then(onSessionStarted); |
| } |
| } |
| |
| function initGL() { |
| if (gl) |
| return; |
| |
| gl = createWebGLContext({ |
| xrCompatible: true |
| }); |
| document.body.appendChild(gl.canvas); |
| |
| onResize(); |
| window.addEventListener('resize', onResize); |
| |
| renderer = new Renderer(gl); |
| scene.setRenderer(renderer); |
| } |
| |
| function onRequestSession() { |
| return navigator.xr.requestSession('immersive-vr', { |
| requiredFeatures: ['local-floor'] |
| }).then((session) => { |
| xrButton.setSession(session); |
| session.isImmersive = true; |
| onSessionStarted(session); |
| |
| // When the exclusive session starts, add a button to the page that |
| // users can click to start the spectator mode. It's important to not |
| // begin presenting spectator mode right away, because on some devices |
| // that may mean doing additional work that the user can't see. By |
| // requiring a button click first you're ensuring that the user CAN |
| // still access the 2D page somehow. |
| if (!autoSpectate) { |
| spectatorButton = document.createElement('button'); |
| spectatorButton.textContent = 'Enable spectator mode'; |
| spectatorButton.addEventListener('click', onEnableSpectatorMode); |
| mainElement.appendChild(spectatorButton); |
| |
| // Hide the non-exclusive session's output canvas so that we can see |
| // the button. |
| gl.canvas.style.display = 'none'; |
| } else { |
| // This is really just for debugging, since it's useful to have |
| // spectator mode start automatically in some testing scenarios. |
| onEnableSpectatorMode(); |
| } |
| }); |
| } |
| |
| function onSessionStarted(session) { |
| session.addEventListener('end', onSessionEnded); |
| |
| initGL(); |
| scene.inputRenderer.useProfileControllerMeshes(session); |
| |
| let glLayer = new XRWebGLLayer(session, gl); |
| session.updateRenderState({ baseLayer: glLayer }); |
| |
| let refSpaceType = session.isImmersive ? 'local-floor' : 'viewer'; |
| session.requestReferenceSpace(refSpaceType).then((refSpace) => { |
| if (session.isImmersive) { |
| xrImmersiveRefSpace = refSpace; |
| } else { |
| inlineViewerHelper = new InlineViewerHelper(gl.canvas, refSpace); |
| inlineViewerHelper.setHeight(1.6); |
| } |
| |
| session.requestAnimationFrame(onXRFrame); |
| }); |
| } |
| |
| function onEndSession(session) { |
| session.end(); |
| } |
| |
| function onSessionEnded(event) { |
| if (event.session.isImmersive) { |
| xrButton.setSession(null); |
| |
| // When we exit the inline session stop presenting the spectator view. |
| if (spectatorMode) { |
| spectatorMode = false; |
| } |
| |
| // Remove the spectator button if needed. |
| if (spectatorButton) { |
| mainElement.removeChild(spectatorButton); |
| spectatorButton = null; |
| } |
| |
| // Show the WebGL canvas again if it was hidden. |
| gl.canvas.style.display = ''; |
| } |
| } |
| |
| // Called when the user clicks the button to enable spectator mode. |
| function onEnableSpectatorMode() { |
| spectatorMode = true; |
| |
| // Show the WebGL canvas |
| gl.canvas.style.display = ''; |
| |
| onResize(); |
| |
| // Remove the spectator button, since it's no longer needed. You could |
| // alternately change the button's function to disable spectator mode. |
| if (spectatorButton) { |
| mainElement.removeChild(spectatorButton); |
| spectatorButton = null; |
| } |
| |
| // Load up a mesh that we can use to visualize the headset's pose. |
| if (!headset) { |
| headset = new Gltf2Node({url: 'media/gltf/headset/headset.gltf'}); |
| scene.addNode(headset); |
| } |
| } |
| |
| function onResize () { |
| let scaleFactor = window.devicePixelRatio; |
| if (spectatorMode) { |
| // The spectator view does take time to render, and can impact the |
| // performance of the in-headset view. To help mitigate that, we'll |
| // draw the spectator view at half the native resolution. |
| scaleFactor /= 2.0; |
| } |
| gl.canvas.width = (gl.canvas.offsetWidth * scaleFactor); |
| gl.canvas.height = (gl.canvas.offsetHeight * scaleFactor); |
| } |
| |
| function onXRFrame(t, frame) { |
| let session = frame.session; |
| let refSpace = session.isImmersive ? |
| xrImmersiveRefSpace : |
| inlineViewerHelper.referenceSpace; |
| let pose = frame.getViewerPose(refSpace); |
| |
| scene.startFrame(); |
| |
| session.requestAnimationFrame(onXRFrame); |
| |
| scene.updateInputSources(frame, refSpace); |
| |
| scene.drawXRFrame(frame, pose); |
| |
| // If spectator mode is active, draw a 3rd person view of the scene to |
| // the WebGL context's default backbuffer. |
| if (spectatorMode && pose) { |
| // Bind the WebGL context's default framebuffer, so that the rendered |
| // content shows up in the canvas element. |
| gl.bindFramebuffer(gl.FRAMEBUFFER, null); |
| |
| // Clear the framebuffer |
| gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); |
| |
| // Set the viewport to the whole canvas |
| gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight); |
| |
| // Set up a sensible projection matrix for the canvas |
| mat4.perspective(spectatorProjectionMatrix, Math.PI*0.4, |
| gl.drawingBufferWidth / gl.drawingBufferHeight, |
| session.renderState.depthNear, |
| session.renderState.depthFar); |
| |
| // Update the headset's pose to match the user's and make it visible |
| // for this draw. |
| if (headset) { |
| headset.visible = true; |
| headset.matrix = pose.transform.matrix; |
| } |
| |
| // Draw the spectator view of the scene. |
| scene.draw(spectatorProjectionMatrix, spectatorTransform); |
| |
| // Ensure the headset isn't visible in the VR view. |
| if (headset) { |
| headset.visible = false; |
| } |
| } |
| |
| scene.endFrame(); |
| } |
| |
| // Start the XR application. |
| initXR(); |
| </script> |
| </body> |
| </html> |