WebXRManager: Added depth sensing support (v2).

examples/webxr_xr_ballshooter.html

@@ -81,7 +81,7 @@
 				controls.target.y = 1.6;
 				controls.update();
 
-				document.body.appendChild( XRButton.createButton( renderer ) );
+				document.body.appendChild( XRButton.createButton( renderer, { 'optionalFeatures': [ 'depth-sensing'] } ) );
 
 				// controllers
 

examples/webxr_xr_cubes.html

@@ -141,7 +141,7 @@
 
 				//
 
-				document.body.appendChild( XRButton.createButton( renderer ) );
+				document.body.appendChild( XRButton.createButton( renderer, { 'optionalFeatures': [ 'depth-sensing'] } ) );
 
 			}
 

examples/webxr_xr_dragging.html

@@ -125,7 +125,7 @@
 				renderer.xr.enabled = true;
 				container.appendChild( renderer.domElement );
 
-				document.body.appendChild( XRButton.createButton( renderer ) );
+				document.body.appendChild( XRButton.createButton( renderer, { 'optionalFeatures': [ 'depth-sensing'] } ) );
 
 				// controllers
 

src/renderers/WebGLRenderer.js

@@ -1209,7 +1209,11 @@ class WebGLRenderer {
 
 			//
 
-			background.render( currentRenderList, scene );
+			if ( xr.enabled === false || xr.isPresenting === false || xr.hasOcclusion() === false ) {
+
+				background.render( currentRenderList, scene );
+
+			}
 
 			// render scene
 

src/renderers/webxr/WebXRDepthSensing.js

@@ -0,0 +1,105 @@
+import { PlaneGeometry } from '../../geometries/PlaneGeometry.js';
+import { ShaderMaterial } from '../../materials/ShaderMaterial.js';
+import { Mesh } from '../../objects/Mesh.js';
+import { Texture } from '../../textures/Texture.js';
+
+const _occlusion_vertex = `
+void main() {
+
+	gl_Position = vec4(position, 1.0);
+
+}`;
+
+const _occlusion_fragment = `
+uniform sampler2DArray depthColor;
+uniform float depthWidth;
+uniform float depthHeight;
+
+void main() {
+
+	int arrayIndex = 0;
+	vec2 depthUv;
+	if (gl_FragCoord.x>=depthWidth) {
+		arrayIndex = 1;
+		depthUv = vec2((gl_FragCoord.x-depthWidth)/depthWidth, gl_FragCoord.y/depthHeight);
+	} else {
+		depthUv = vec2(gl_FragCoord.x/depthWidth, gl_FragCoord.y/depthHeight);
+	}
+
+	gl_FragDepthEXT = texture(depthColor, vec3(depthUv.x, depthUv.y, arrayIndex)).r;
+
+}`;
+
+class WebXRDepthSensing {
+
+	constructor() {
+
+		this.texture = null;
+		this.mesh = null;
+
+		this.depthNear = 0;
+		this.depthFar = 0;
+
+	}
+
+	init( renderer, session, depthData ) {
+
+		if ( this.texture === null ) {
+
+			const texture = new Texture();
+
+			const texProps = renderer.properties.get( texture );
+			texProps.__webglTexture = depthData.texture;
+
+			if ( ( depthData.depthNear != session.renderState.depthNear ) || ( depthData.depthFar != session.renderState.depthFar ) ) {
+
+				this.depthNear = depthData.depthNear;
+				this.depthFar = depthData.depthFar;
+
+			}
+
+			this.texture = texture;
+
+		}
+
+	}
+
+	render( renderer, cameraXR ) {
+
+		if ( this.texture !== null ) {
+
+			if ( this.mesh === null ) {
+
+				const viewport = cameraXR.cameras[ 0 ].viewport;
+				const occlusionMaterial = new ShaderMaterial( {
+					vertexShader: _occlusion_vertex,
+					fragmentShader: _occlusion_fragment,
+					uniforms: {
+						depthColor: { value: this.texture },
+						depthWidth: { value: viewport.z },
+						depthHeight: { value: viewport.w }
+					}
+				} );
+
+				occlusionMaterial.extensions.fragDepth = true;
+
+				this.mesh = new Mesh( new PlaneGeometry( 20, 20 ), occlusionMaterial );
+
+			}
+
+			renderer.render( this.mesh, cameraXR );
+
+		}
+
+	}
+
+	reset() {
+
+		this.texture = null;
+		this.mesh = null;
+
+	}
+
+}
+
+export { WebXRDepthSensing };

src/renderers/webxr/WebXRManager.js

@@ -10,6 +10,7 @@
 import { WebXRController } from './WebXRController.js';
 import { DepthTexture } from '../../textures/DepthTexture.js';
 import { DepthFormat, DepthStencilFormat, RGBAFormat, UnsignedByteType, UnsignedIntType, UnsignedInt248Type } from '../../constants.js';
+import { WebXRDepthSensing } from './WebXRDepthSensing.js';
 
 class WebXRManager extends EventDispatcher {
 
@@ -34,7 +35,10 @@
 		let glProjLayer = null;
 		let glBaseLayer = null;
 		let xrFrame = null;
+
+		const depthSensing = new WebXRDepthSensing( renderer );
 		const attributes = gl.getContextAttributes();
+
 		let initialRenderTarget = null;
 		let newRenderTarget = null;
 
@@ -164,6 +168,8 @@
 			_currentDepthNear = null;
 			_currentDepthFar = null;
 
+			depthSensing.reset();
+
 			// restore framebuffer/rendering state
 
 			renderer.setRenderTarget( initialRenderTarget );
@@ -522,6 +528,13 @@
 
 			if ( session === null ) return;
 
+			if ( depthSensing.texture !== null ) {
+
+				camera.near = depthSensing.depthNear;
+				camera.far = depthSensing.depthFar;
+
+			}
+
 			cameraXR.near = cameraR.near = cameraL.near = camera.near;
 			cameraXR.far = cameraR.far = cameraL.far = camera.far;
 
@@ -537,6 +550,15 @@
 				_currentDepthNear = cameraXR.near;
 				_currentDepthFar = cameraXR.far;
 
+				cameraL.near = depthSensing.depthNear; // ?
+				cameraL.far = depthSensing.depthFar; // ?
+				cameraR.near = depthSensing.depthNear; // ?
+				cameraR.far = depthSensing.depthFar; // ?
+
+				cameraL.updateProjectionMatrix();
+				cameraR.updateProjectionMatrix();
+				camera.updateProjectionMatrix();
+
 			}
 
 			const parent = camera.parent;
@@ -638,6 +660,12 @@
 
 		};
 
+		this.hasOcclusion = function ( ) {
+
+			return depthSensing.texture !== null;
+
+		};
+
 		// Animation Loop
 
 		let onAnimationFrameCallback = null;
@@ -730,6 +758,20 @@
 
 				}
 
+				//
+
+				if ( session.enabledFeatures && session.enabledFeatures.includes( 'depth-sensing' ) ) {
+
+					const depthData = glBinding.getDepthInformation( views[ 0 ] );
+
+					if ( depthData && depthData.isValid && depthData.texture ) {
+
+						depthSensing.init( renderer, session, depthData );
+
+					}
+
+				}
+
 			}
 
 			//
@@ -747,6 +789,8 @@
 
 			}
 
+			depthSensing.render( renderer, cameraXR );
+
 			if ( onAnimationFrameCallback ) onAnimationFrameCallback( time, frame );
 
 			if ( frame.detectedPlanes ) {