| <!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>Reduced Bind Rendering</title> |
| </head> |
| <body> |
| <header> |
| <details open> |
| <summary>Reduced Bind Rendering</summary> |
| <p> |
| This sample demonstrates a simple technique to reduce the number of |
| state changes an application needs to make while rendering, potentially |
| enabling better performance. |
| <a class="back" href="./">Back</a> |
| </p> |
| </details> |
| </header> |
| <script type="module"> |
| import {WebXRButton} from './js/util/webxr-button.js'; |
| import {Scene, WebXRView} from './js/render/scenes/scene.js'; |
| import {Renderer, createWebGLContext} from './js/render/core/renderer.js'; |
| import {CubeSeaNode} from './js/render/nodes/cube-sea.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(); |
| } |
| |
| // 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 CubeSeaNode()); |
| |
| 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); |
| |
| function onResize() { |
| gl.canvas.width = gl.canvas.clientWidth * window.devicePixelRatio; |
| gl.canvas.height = gl.canvas.clientHeight * window.devicePixelRatio; |
| } |
| window.addEventListener('resize', onResize); |
| onResize(); |
| |
| // 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); |
| } |
| |
| function onRequestSession() { |
| return navigator.xr.requestSession('immersive-vr').then((session) => { |
| xrButton.setSession(session); |
| session.isImmersive = true; |
| onSessionStarted(session); |
| }); |
| } |
| |
| function onSessionStarted(session) { |
| session.addEventListener('end', onSessionEnded); |
| |
| initGL(); |
| |
| let glLayer = new XRWebGLLayer(session, gl); |
| session.updateRenderState({ baseLayer: glLayer }); |
| |
| let refSpaceType = session.isImmersive ? 'local' : 'viewer'; |
| session.requestReferenceSpace(refSpaceType).then((refSpace) => { |
| if (session.isImmersive) { |
| xrImmersiveRefSpace = refSpace; |
| } else { |
| // In most samples moving forward we'll use this helper class rather |
| // than the reference space directly to inject the necessary logic |
| // for looking around an inline session with mouse and touch input. |
| inlineViewerHelper = new InlineViewerHelper(gl.canvas, refSpace); |
| } |
| session.requestAnimationFrame(onXRFrame); |
| }); |
| } |
| |
| function onEndSession(session) { |
| session.end(); |
| } |
| |
| function onSessionEnded(event) { |
| if (event.session.isImmersive) { |
| xrButton.setSession(null); |
| } |
| } |
| |
| 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); |
| |
| if (pose) { |
| let glLayer = session.renderState.baseLayer; |
| gl.bindFramebuffer(gl.FRAMEBUFFER, glLayer.framebuffer); |
| gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); |
| |
| // This is a different rendering pattern than the previous samples |
| // used, but it should be more efficient. It's very common for apps |
| // being ported to XR to take existing 2D rendering code and call the |
| // top-level "drawScene" function once per XR view, effectively |
| // drawing a single eye at a time. However, this causes many state |
| // changes to be duplicated, which adds to the render loop's overhead. |
| // By providing the matrices and viewports as an array to the drawing |
| // function it can do all the necessary binding once and then call the |
| // actual draw commands in a tighter loop, only changing the matrices |
| // and viewport each time. This does mean that the viewport is changed |
| // much more frequently (N times per object instead of N times per |
| // scene) but it's typically a pretty cheap thing to change and will |
| // almost always be easily outweighed by the savings from not |
| // redundantly binding everything else. |
| |
| // For example, a traditional draw loop would do this: |
| |
| // Draw(views): |
| // for each view in views: |
| // setViewport(); |
| // for each object in scene: |
| // bindProgram(); |
| // bindMatrices(); |
| // bindUniforms(); |
| // bindBuffers(); |
| // bindTextures(); |
| // draw(); |
| |
| // While this method results in a loop more like this: |
| |
| // Draw(views): |
| // for each object in scene: |
| // bindProgram(); |
| // bindUniforms(); |
| // bindBuffers(); |
| // bindTextures(); |
| // for each view in views: |
| // setViewport(); |
| // bindMatrices(); |
| // draw(); |
| |
| // Note that for the complexity of the scene in this samples this |
| // won't make much visible performance difference, but we're using the |
| // more efficient pattern anyway as a way of promoting best practices. |
| |
| let views = []; |
| for (let view of pose.views) { |
| // Gather all the values needed for one view and push it into the |
| // array of views to be drawn. WebXRView is a utility class that |
| // holds all the necessary values for drawing a single view. |
| |
| // In future samples we'll hide this part away as well by using the |
| // scene.drawXRViews() function, which handles gathering these |
| // values internally. |
| views.push(new WebXRView(view, glLayer)); |
| } |
| |
| scene.drawViewArray(views); |
| } |
| |
| scene.endFrame(); |
| } |
| |
| initXR(); |
| </script> |
| </body> |
| </html> |