93ebfaccc1
Removes XRPresentationContext and adds the 'compositionDisabled' option to XRWebGLLayerInit. Bug: 968321 Change-Id: I9dbdd70b66e01f0df6182fbd8238a689365e93dd Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1633231 Commit-Queue: Brandon Jones <bajones@chromium.org> Reviewed-by: Kentaro Hara <haraken@chromium.org> Reviewed-by: Jeremy Roman <jbroman@chromium.org> Reviewed-by: Klaus Weidner <klausw@chromium.org> Cr-Commit-Position: refs/heads/master@{#665075}
189 lines
7.0 KiB
HTML
189 lines
7.0 KiB
HTML
<!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="./index.html">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'}));
|
|
}
|
|
|
|
// 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
|
|
})
|
|
});
|
|
|
|
session.requestReferenceSpace('local').then((refSpace) => {
|
|
xrRefSpace = refSpace;
|
|
|
|
session.requestAnimationFrame(onXRFrame);
|
|
});
|
|
}
|
|
|
|
function onEndSession(session) {
|
|
session.end();
|
|
}
|
|
|
|
function onSessionEnded(event) {
|
|
xrButton.setSession(null);
|
|
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>
|