Skip to content

GitLab

T
tangled
Commit 3d828369 authored by Piotr Bialecki's avatar Piotr Bialecki Committed by Chromium LUCI CQ
Browse files
Options

WebXR: add entries to proposals' index, info about missing depth buffer 

Add depth samples to proposals' index.html, add diagnostic information
(leveraging DOM overlay) to communicate why nothing is rendered (either
pose data or depth data may be missing).

Bug: 1151431
Change-Id: I3ada6936a663ee2cb488a2ff749883a714a07ed7
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2578040
Commit-Queue: Klaus Weidner <klausw@chromium.org>
Auto-Submit: Piotr Bialecki <bialpio@chromium.org>
Reviewed-by: default avatarKlaus Weidner <klausw@chromium.org>
Cr-Commit-Position: refs/heads/master@{#834461}
parent 3c942e0a
Hide whitespace changes
Inline Side-by-side
Showing with 92 additions and 13 deletions
third_party/webxr_test_pages/webxr-samples/proposals/index.html
View file @ 3d828369
......@@ -130,6 +130,14 @@
path: 'camera-access-barebones.html',
description: 'Demonstrates using the Camera Access feature to obtain and use a camera ' +
'image texture.' },
{ title: 'AR Depth Sensing - GPU access', category: 'AR',
path: 'phone-ar-depth-gpu.html',
description: 'Demonstrates use of a depth API in immersive-ar session. ' +
'The data will be uploaded to the GPU & accessed from a shader to visualize the depth map.' },
{ title: 'AR Depth Sensing - CPU access', category: 'AR',
path: 'phone-ar-depth.html',
description: 'Demonstrates use of a depth API in immersive-ar session. ' +
'The data will be accessed on the CPU.' },
];
let mainElement = document.getElementById("main");
......
third_party/webxr_test_pages/webxr-samples/proposals/phone-ar-depth-gpu.html
View file @ 3d828369
......@@ -39,6 +39,16 @@ CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
<script src='../js/webxr-polyfill.js'></script>
<script src='../js/webxr-button.js'></script>
<style>
#text-info {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: large;
color: red;
}
</style>
</head>
<body>
<header>
......@@ -51,6 +61,9 @@ CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
</p>
</details>
</header>
<div id="text-overlay">
<div id="text-info"></div>
</div>
<script id="vertexShader" type="x-shader/x-vertex">
precision mediump float;
......@@ -84,6 +97,18 @@ CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
let vertexShaderSource = null;
let fragmentShaderSource = null;
const textOverlayElement = document.querySelector("#text-overlay");
if(!textOverlayElement) {
console.error("#text-overlay element not found!");
throw new Error("#text-overlay element not found!");
}
const textInfoElement = document.querySelector("#text-info");
if(!textInfoElement) {
console.error("#text-info element not found!");
throw new Error("#text-info element not found!");
}
function initXR() {
xrButton = new XRDeviceButton({
onRequestSession: onRequestSession,
......@@ -100,7 +125,8 @@ CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
// Requests an immersive session with environment integration.
let options = {
requiredFeatures: ['depth-sensing'],
requiredFeatures: ['depth-sensing', 'dom-overlay'],
domOverlay: { root: textOverlayElement },
};
navigator.xr.requestSession('immersive-ar', options).then((session) => {
......@@ -157,6 +183,17 @@ CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
}
// Creates new GL buffer and uploads contents of |vertices| to it:
function uploadVertexData(vertices) {
const result = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, result);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
gl.bindBuffer(gl.ARRAY_BUFFER, null);
return result;
}
function initializeGL() {
shaderProgram = initShaderProgram(vertexShaderSource, fragmentShaderSource);
......@@ -172,8 +209,6 @@ CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
},
};
vertexBuffer = gl.createBuffer();
// clip space coordinates + texture space coordinates
const vertices_data = [
-1, -1, 0, 0, // bottom left
......@@ -182,9 +217,7 @@ CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
1, 1, 1, 1, // top right
];
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices_data), gl.STATIC_DRAW);
gl.bindBuffer(gl.ARRAY_BUFFER, null);
vertexBuffer = uploadVertexData(vertices_data);
depthTexture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, depthTexture);
......@@ -247,23 +280,29 @@ CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
const pose = frame.getViewerPose(xrRefSpace);
if(pose) {
if (pose) {
gl.bindFramebuffer(gl.FRAMEBUFFER, session.renderState.baseLayer.framebuffer);
// Clear the framebuffer
gl.clearColor(0, 0, 0, 0);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
for(const view of pose.views) {
for (const view of pose.views) {
const viewport = baseLayer.getViewport(view);
gl.viewport(viewport.x, viewport.y,
viewport.width, viewport.height);
const depthData = frame.getDepthInformation(view);
if(depthData){
if (depthData) {
textInfoElement.innerHTML = "";
renderDepthInformationGPU(depthData, view, viewport);
} else {
textInfoElement.innerHTML = "Depth data unavailable in the current frame!";
}
}
} else {
textInfoElement.innerHTML = "Pose unavailable in the current frame!";
}
}
......
third_party/webxr_test_pages/webxr-samples/proposals/phone-ar-depth.html
View file @ 3d828369
......@@ -39,6 +39,16 @@ CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
<script src='../js/webxr-polyfill.js'></script>
<script src='../js/webxr-button.js'></script>
<style>
#text-info {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: large;
color: red;
}
</style>
</head>
<body>
<header>
......@@ -51,6 +61,9 @@ CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
</p>
</details>
</header>
<div id="text-overlay">
<div id="text-info"></div>
</div>
<script id="vertexShader" type="x-shader/x-vertex">
precision mediump float;
......@@ -85,6 +98,18 @@ CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
let vertexShaderSource = null;
let fragmentShaderSource = null;
const textOverlayElement = document.querySelector("#text-overlay");
if(!textOverlayElement) {
console.error("#text-overlay element not found!");
throw new Error("#text-overlay element not found!");
}
const textInfoElement = document.querySelector("#text-info");
if(!textInfoElement) {
console.error("#text-info element not found!");
throw new Error("#text-info element not found!");
}
function initXR() {
xrButton = new XRDeviceButton({
onRequestSession: onRequestSession,
......@@ -101,7 +126,8 @@ CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
// Requests an immersive session with environment integration.
let options = {
requiredFeatures: ['depth-sensing'],
requiredFeatures: ['depth-sensing', 'dom-overlay'],
domOverlay: { root: textOverlayElement },
};
navigator.xr.requestSession('immersive-ar', options).then((session) => {
......@@ -239,23 +265,29 @@ CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
const pose = frame.getViewerPose(xrRefSpace);
if(pose) {
if (pose) {
gl.bindFramebuffer(gl.FRAMEBUFFER, session.renderState.baseLayer.framebuffer);
// Clear the framebuffer
gl.clearColor(0, 0, 0, 0);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
for(const view of pose.views) {
for (const view of pose.views) {
const viewport = baseLayer.getViewport(view);
gl.viewport(viewport.x, viewport.y,
viewport.width, viewport.height);
const depthData = frame.getDepthInformation(view);
if(depthData){
if (depthData) {
textInfoElement.innerHTML = "";
renderDepthInformationCPU(depthData, view, viewport);
} else {
textInfoElement.innerHTML = "Depth data unavailable in the current frame!";
}
}
} else {
textInfoElement.innerHTML = "Pose unavailable in the current frame!";
}
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment