| <!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'> |
| |
| <!-- Origin Trial Token, feature = WebXR Device API, origin = https://immersive-web.github.io, expires = 2018-08-28 --> |
| <meta http-equiv="origin-trial" data-feature="WebXR Device API" data-expires="2018-08-28" content="AnNpu7ceXvLew05ccD8Zr1OZsdZiB2hLQKK82kTTMDwF7oRKtP3QEJ4RzkeHrmB8Sq0vSV6ZNmszpBCZ0I8p9gAAAABceyJvcmlnaW4iOiJodHRwczovL2ltbWVyc2l2ZS13ZWIuZ2l0aHViLmlvOjQ0MyIsImZlYXR1cmUiOiJXZWJYUkRldmljZSIsImV4cGlyeSI6MTUzNTQxNDQwMH0="> |
| |
| <title>Framebuffer Scaling</title> |
| |
| <link href='css/common.css' rel='stylesheet'></link> |
| |
| <!--The polyfill is not needed for browser that have native API support, |
| but is linked by these samples for wider compatibility.--> |
| <script src='js/xrray-polyfill.js' type='module'></script> |
| <script src='js/webxr-polyfill.js'></script> |
| |
| <script src='js/webxr-button.js'></script> |
| </head> |
| <body> |
| <header> |
| <details open> |
| <summary>Framebuffer Scaling</summary> |
| <p> |
| This sample demonstrates scaling the framebuffer used for a WebXR layer |
| at creation time to control the memory and fillrate required and improve |
| performance or quality as needed. (The system may clamp the actual |
| buffer sizes) |
| |
| Framebuffer scaling should be used to make a performance/memory/quality |
| tradeoff for the lifetime of the session. |
| <a class="back" href="./">Back</a> |
| <br/> |
| <hr/> |
| <input id='framebufferScaleSelect' value='1.0' min='0.25' max='2.0' step='0.125' type='range'/><br/> |
| <span id='framebufferScaleLabel'></span> |
| </p> |
| </details> |
| </header> |
| <main style='text-align: center;'> |
| <p>Click 'Enter XR' to see content</p> |
| </main> |
| <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 {FallbackHelper} from './js/cottontail/src/util/fallback-helper.js'; |
| import {CubeSeaNode} from './js/cottontail/src/nodes/cube-sea.js'; |
| |
| // If requested, initialize the WebXR polyfill |
| if (QueryArgs.getBool('allowPolyfill', false)) { |
| var polyfill = new WebXRPolyfill(); |
| } |
| |
| let scaleSelect = document.getElementById('framebufferScaleSelect'); |
| let scaleLabel = document.getElementById('framebufferScaleLabel'); |
| |
| function updateLabel() { |
| let value = parseFloat(scaleSelect.value); |
| let label = `Framebuffer scale: ${scaleSelect.value}`; |
| switch (value) { |
| case 0.5: label += ' - 50% recommended res'; break; |
| case 1.0: label += ' - Default, system recommendation'; break; |
| case 1.5: label += ' - 150% recommended res'; break; |
| case 2.0: label += ' - 200% recommended res'; break; |
| } |
| scaleLabel.innerHTML = label; |
| } |
| |
| scaleSelect.addEventListener('change', updateLabel); |
| updateLabel(); |
| |
| // XR globals. |
| let xrButton = null; |
| let xrRefSpace = null; |
| |
| // WebGL scene globals. |
| let gl = null; |
| let renderer = null; |
| let scene = new Scene(); |
| scene.addNode(new CubeSeaNode()); |
| |
| function initXR() { |
| xrButton = new XRDeviceButton({ |
| onRequestSession: onRequestSession, |
| onEndSession: onEndSession, |
| supportedSessionTypes: ['immersive-vr'] |
| }); |
| document.querySelector('header').appendChild(xrButton.domElement); |
| } |
| |
| function onRequestSession() { |
| navigator.xr.requestSession('immersive-vr').then(onSessionStarted); |
| } |
| |
| function onSessionStarted(session) { |
| session.mode = 'immersive-vr'; |
| xrButton.setSession(session); |
| |
| session.addEventListener('end', onSessionEnded); |
| |
| if (!gl) { |
| gl = createWebGLContext({ |
| xrCompatible: true |
| }); |
| |
| // Set up a non-black clear color so that we can see if something renders wrong. |
| gl.clearColor(0.1, 0.2, 0.3, 1.0); |
| |
| renderer = new Renderer(gl); |
| |
| scene.setRenderer(renderer); |
| scene.inputRenderer.setControllerMesh(new Gltf2Node({url: '../media/gltf/controller/controller.gltf'})); |
| } |
| |
| let outputCanvas = document.createElement('canvas'); |
| document.body.appendChild(outputCanvas); |
| |
| // This is the only meaningful change in this sample from xr-presentation.js. |
| // It sets a requested scale to be applied to the framebuffer created |
| // for the layer. The UA is allowed to ignore the request or adjust it |
| // as needed. The scale of the framebuffer cannot be changed after the |
| // layer is created, though the UA is allowed to resize the framebuffer |
| // at any time. |
| let scale = parseFloat(scaleSelect.value); |
| session.updateRenderState({ |
| baseLayer: new XRWebGLLayer(session, gl, { |
| framebufferScaleFactor: scale |
| }), |
| outputContext: outputCanvas.getContext('xrpresent') |
| }); |
| |
| session.requestReferenceSpace({ type: 'stationary', subtype: 'eye-level' }).then((refSpace) => { |
| xrRefSpace = refSpace; |
| |
| session.requestAnimationFrame(onXRFrame); |
| }); |
| } |
| |
| function onEndSession(session) { |
| session.end(); |
| } |
| |
| function onSessionEnded(event) { |
| xrButton.setSession(null); |
| |
| if (event.session.renderState.outputContext) { |
| document.body.removeChild(event.session.renderState.outputContext.canvas); |
| } |
| |
| gl = null; |
| } |
| |
| function onXRFrame(t, frame) { |
| let session = frame.session; |
| let pose = frame.getViewerPose(xrRefSpace); |
| |
| scene.startFrame(); |
| |
| session.requestAnimationFrame(onXRFrame); |
| |
| scene.updateInputSources(frame, xrRefSpace); |
| |
| scene.drawXRFrame(frame, pose); |
| |
| scene.endFrame(); |
| } |
| |
| // Start the XR application. |
| initXR(); |
| </script> |
| </body> |
| </html> |