Merge pull request #216 from cabanier/depth-sensing
update occlusion sample to new depth API
diff --git a/js/render/core/renderer.js b/js/render/core/renderer.js
index 9c60bad..1ed909c 100644
--- a/js/render/core/renderer.js
+++ b/js/render/core/renderer.js
@@ -106,12 +106,13 @@
}
export class RenderView {
- constructor(projectionMatrix, viewTransform, viewport = null, eye = 'left') {
+ constructor(projectionMatrix, viewTransform, viewport = null, eye = 'left', depthdata = null) {
this.projectionMatrix = projectionMatrix;
this.viewport = viewport;
// If an eye isn't given the left eye is assumed.
this._eye = eye;
this._eyeIndex = (eye == 'left' ? 0 : 1);
+ this.depthdata = depthdata;
// Compute the view matrix
if (viewTransform instanceof Float32Array) {
@@ -722,8 +723,8 @@
gl.viewport(vp.x, vp.y, vp.width, vp.height);
gl.uniformMatrix4fv(program.uniform.LEFT_PROJECTION_MATRIX, false, views[0].projectionMatrix);
gl.uniformMatrix4fv(program.uniform.LEFT_VIEW_MATRIX, false, views[0].viewMatrix);
- gl.uniformMatrix4fv(program.uniform.RIGHT_PROJECTION_MATRIX, false, views[0].projectionMatrix);
- gl.uniformMatrix4fv(program.uniform.RIGHT_VIEW_MATRIX, false, views[0].viewMatrix);
+ gl.uniformMatrix4fv(program.uniform.RIGHT_PROJECTION_MATRIX, false, views[1].projectionMatrix);
+ gl.uniformMatrix4fv(program.uniform.RIGHT_VIEW_MATRIX, false, views[1].viewMatrix);
gl.uniform3fv(program.uniform.CAMERA_POSITION, this._cameraPositions[0]);
gl.uniform1i(program.uniform.EYE_INDEX, views[0].eyeIndex);
}
@@ -762,6 +763,19 @@
gl.uniformMatrix4fv(program.uniform.LEFT_VIEW_MATRIX, false, views[0].viewMatrix);
gl.uniformMatrix4fv(program.uniform.RIGHT_PROJECTION_MATRIX, false, views[1].projectionMatrix);
gl.uniformMatrix4fv(program.uniform.RIGHT_VIEW_MATRIX, false, views[1].viewMatrix);
+
+ // for older browser that don't support projectionMatrix and transform on the depth data
+ gl.uniformMatrix4fv(program.uniform.LEFT_DEPTH_PROJECTION_MATRIX, false, views[0].projectionMatrix);
+ gl.uniformMatrix4fv(program.uniform.LEFT_DEPTH_VIEW_MATRIX, false, views[0].viewMatrix);
+ gl.uniformMatrix4fv(program.uniform.RIGHT_DEPTH_PROJECTION_MATRIX, false, views[1].projectionMatrix);
+ gl.uniformMatrix4fv(program.uniform.RIGHT_DEPTH_VIEW_MATRIX, false, views[1].viewMatrix);
+
+ if (view.depthdata && views[0].depthdata.projectionMatrix) {
+ gl.uniformMatrix4fv(program.uniform.LEFT_DEPTH_PROJECTION_MATRIX, false, views[0].depthdata.projectionMatrix);
+ gl.uniformMatrix4fv(program.uniform.LEFT_DEPTH_VIEW_MATRIX, false, views[0].depthdata.transform.inverse.matrix);
+ gl.uniformMatrix4fv(program.uniform.RIGHT_DEPTH_PROJECTION_MATRIX, false, views[1].depthdata.projectionMatrix);
+ gl.uniformMatrix4fv(program.uniform.RIGHT_DEPTH_VIEW_MATRIX, false, views[1].depthdata.transform.inverse.matrix);
+ }
}
// TODO(AB): modify shaders which use CAMERA_POSITION and EYE_INDEX to work with Multiview
gl.uniform3fv(program.uniform.CAMERA_POSITION, this._cameraPositions[i]);
diff --git a/js/render/nodes/cube-sea-occlusion.js b/js/render/nodes/cube-sea-occlusion.js
index 0e6f580..3bd8b0f 100644
--- a/js/render/nodes/cube-sea-occlusion.js
+++ b/js/render/nodes/cube-sea-occlusion.js
@@ -31,6 +31,7 @@
this.baseColor = this.defineSampler('baseColor');
this.depthColor = this.defineSampler('depthColor');
+
}
get materialName() {
@@ -71,6 +72,7 @@
out vec2 vTexCoord;
out vec3 vLight;
+ out vec4 vWorldPosition;
const vec3 lightDir = vec3(0.75, 0.5, 1.0);
const vec3 ambientColor = vec3(0.5, 0.5, 0.5);
@@ -81,8 +83,9 @@
float lightFactor = max(dot(normalize(lightDir), normalRotated), 0.0);
vLight = ambientColor + (lightColor * lightFactor);
vTexCoord = TEXCOORD_0;
- return (VIEW_ID == 0u) ? left_proj * left_view * model * vec4(POSITION, 1.0) :
- right_proj * right_view * model * vec4(POSITION, 1.0);
+ vWorldPosition = model * vec4(POSITION, 1.0);
+ return (VIEW_ID == 0u) ? left_proj * left_view * vWorldPosition :
+ right_proj * right_view * vWorldPosition;
}`;
}
@@ -96,6 +99,8 @@
uniform sampler2DArray depthColor;
in vec2 vTexCoord;
in vec3 vLight;
+ in vec4 vWorldPosition;
+ uniform mat4 LEFT_DEPTH_PROJECTION_MATRIX, LEFT_DEPTH_VIEW_MATRIX, RIGHT_DEPTH_PROJECTION_MATRIX, RIGHT_DEPTH_VIEW_MATRIX;
float Depth_GetCameraDepthInMillimeters(const sampler2DArray depthTexture,
const vec2 depthUv) {
@@ -204,7 +209,10 @@
}
vec4 fragment_main() {
- vec2 depthUv = vec2(gl_FragCoord.x/1680.0, gl_FragCoord.y/1760.0);
+ vec4 depthPosition = (VIEW_ID == 0u) ? LEFT_DEPTH_PROJECTION_MATRIX * LEFT_DEPTH_VIEW_MATRIX * vWorldPosition :
+ RIGHT_DEPTH_PROJECTION_MATRIX * RIGHT_DEPTH_VIEW_MATRIX * vWorldPosition;
+ vec2 depthPositionHC = depthPosition.xy / depthPosition.w;
+ depthPositionHC = vec2 (depthPositionHC.x + 1.0, depthPositionHC.y + 1.0 ) * 0.5;
vec4 o_FragColor = vec4(vLight, 1) * texture(baseColor, vTexCoord);
if (o_FragColor.a == 0.0) {
@@ -215,10 +223,10 @@
float assetDepthMm = gl_FragCoord.z * 1000.0;
float occlusion = Depth_GetBlurredOcclusionAroundUV(
- depthColor, depthUv, assetDepthMm);
+ depthColor, depthPositionHC, assetDepthMm);
//float occlusion = Depth_GetOcclusion(depthColor,
- // depthUv, assetDepthMm);
+ // depthPositionHC, assetDepthMm);
float objectMaskEroded = pow(occlusion, 10.0);
diff --git a/js/render/scenes/scene.js b/js/render/scenes/scene.js
index afc9477..6cea777 100644
--- a/js/render/scenes/scene.js
+++ b/js/render/scenes/scene.js
@@ -26,12 +26,13 @@
import {Ray} from '../math/ray.js';
export class WebXRView extends RenderView {
- constructor(view, layer, viewport) {
+ constructor(view, layer, viewport, depthdata) {
super(
view ? view.projectionMatrix : null,
view ? view.transform : null,
viewport ? viewport : ((layer && view) ? layer.getViewport(view) : null),
- view ? view.eye : 'left'
+ view ? view.eye : 'left',
+ depthdata
);
}
}
diff --git a/layers-samples/proj-multiview-occlusion.html b/layers-samples/proj-multiview-occlusion.html
index fb4121d..6c8a951 100644
--- a/layers-samples/proj-multiview-occlusion.html
+++ b/layers-samples/proj-multiview-occlusion.html
@@ -159,6 +159,7 @@
depthSensing: {
usagePreference: ["gpu-optimized"],
dataFormatPreference: ["unsigned-short"],
+ matchDepthView: false
}}).then((session) => {
xrButton.setSession(session);
session.isImmersive = true;
@@ -254,10 +255,18 @@
let views = [];
for (let view of pose.views) {
let viewport = null;
+ let depthData = null;
if (session.isImmersive) {
- const depthData = xrGLFactory.getDepthInformation(view);
- if (depthData.isValid) {
+ depthData = xrGLFactory.getDepthInformation(view);
+ if (depthData) {
renderer.addExternalTexture('scene_depth', depthData.texture, true);
+
+ if ((depthData.depthNear !== session.renderState.depthNear) || (depthData.depthFar !== session.renderState.depthFar)) {
+ session.updateRenderState({
+ 'depthNear': depthData.depthNear,
+ 'depthFar': depthData.depthFar
+ });
+ }
}
glLayer = xrGLFactory.getViewSubImage(session.renderState.layers[0], view);
@@ -291,7 +300,7 @@
} else {
viewport = glLayer.getViewport(view);
}
- views.push(new WebXRView(view, glLayer, viewport));
+ views.push(new WebXRView(view, glLayer, viewport, depthData));
}
scene.drawViewArray(views);
