add support for depth sensing

mrdoob · Nov 10, 2023 · e0b2926 · e0b2926
1 parent d4c01b9
commit e0b2926
Show file tree

Hide file tree

Showing 31 changed files with 291 additions and 8 deletions.
diff --git a/examples/webxr_xr_ballshooter.html b/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
 

diff --git a/examples/webxr_xr_cubes.html b/examples/webxr_xr_cubes.html
@@ -141,7 +141,7 @@
 
 				//
 
-				document.body.appendChild( XRButton.createButton( renderer ) );
+				document.body.appendChild( XRButton.createButton( renderer, { 'optionalFeatures': [ 'depth-sensing'] } ) );
 
 			}
 

diff --git a/examples/webxr_xr_dragging.html b/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
 

diff --git a/src/materials/LineBasicMaterial.js b/src/materials/LineBasicMaterial.js
@@ -21,6 +21,8 @@ class LineBasicMaterial extends Material {
 
 		this.fog = true;
 
+		this.occlusion = true;
+
 		this.setValues( parameters );
 
 	}
@@ -40,6 +42,8 @@ class LineBasicMaterial extends Material {
 
 		this.fog = source.fog;
 
+		this.occlusion = source.occlusion;
+
 		return this;
 
 	}

diff --git a/src/materials/MeshBasicMaterial.js b/src/materials/MeshBasicMaterial.js
@@ -38,6 +38,8 @@ class MeshBasicMaterial extends Material {
 
 		this.fog = true;
 
+		this.occlusion = true;
+
 		this.setValues( parameters );
 
 	}
@@ -72,6 +74,8 @@ class MeshBasicMaterial extends Material {
 
 		this.fog = source.fog;
 
+		this.occlusion = source.occlusion;
+
 		return this;
 
 	}

diff --git a/src/materials/MeshLambertMaterial.js b/src/materials/MeshLambertMaterial.js
@@ -56,6 +56,8 @@ class MeshLambertMaterial extends Material {
 
 		this.fog = true;
 
+		this.occlusion = true;
+
 		this.setValues( parameters );
 
 	}
@@ -107,6 +109,8 @@ class MeshLambertMaterial extends Material {
 
 		this.fog = source.fog;
 
+		this.occlusion = source.occlusion;
+
 		return this;
 
 	}

diff --git a/src/materials/MeshMatcapMaterial.js b/src/materials/MeshMatcapMaterial.js
@@ -38,6 +38,8 @@ class MeshMatcapMaterial extends Material {
 
 		this.fog = true;
 
+		this.occlusion = true;
+
 		this.setValues( parameters );
 
 	}
@@ -72,6 +74,8 @@ class MeshMatcapMaterial extends Material {
 
 		this.fog = source.fog;
 
+		this.occlusion = source.occlusion;
+
 		return this;
 
 	}

diff --git a/src/materials/MeshPhongMaterial.js b/src/materials/MeshPhongMaterial.js
@@ -58,6 +58,8 @@ class MeshPhongMaterial extends Material {
 
 		this.fog = true;
 
+		this.occlusion = true;
+
 		this.setValues( parameters );
 
 	}
@@ -111,6 +113,8 @@ class MeshPhongMaterial extends Material {
 
 		this.fog = source.fog;
 
+		this.occlusion = source.occlusion;
+
 		return this;
 
 	}

diff --git a/src/materials/MeshStandardMaterial.js b/src/materials/MeshStandardMaterial.js
@@ -60,6 +60,8 @@ class MeshStandardMaterial extends Material {
 
 		this.fog = true;
 
+		this.occlusion = true;
+
 		this.setValues( parameters );
 
 	}
@@ -115,6 +117,8 @@ class MeshStandardMaterial extends Material {
 
 		this.fog = source.fog;
 
+		this.occlusion = source.occlusion;
+
 		return this;
 
 	}

diff --git a/src/materials/MeshToonMaterial.js b/src/materials/MeshToonMaterial.js
@@ -50,6 +50,8 @@ class MeshToonMaterial extends Material {
 
 		this.fog = true;
 
+		this.occlusion = true;
+
 		this.setValues( parameters );
 
 	}
@@ -93,6 +95,8 @@ class MeshToonMaterial extends Material {
 
 		this.fog = source.fog;
 
+		this.occlusion = source.occlusion;
+
 		return this;
 
 	}

diff --git a/src/materials/PointsMaterial.js b/src/materials/PointsMaterial.js
@@ -22,6 +22,8 @@ class PointsMaterial extends Material {
 
 		this.fog = true;
 
+		this.occlusion = true;
+
 		this.setValues( parameters );
 
 	}
@@ -41,6 +43,8 @@ class PointsMaterial extends Material {
 
 		this.fog = source.fog;
 
+		this.occlusion = source.occlusion;
+
 		return this;
 
 	}

diff --git a/src/materials/ShaderMaterial.js b/src/materials/ShaderMaterial.js
@@ -79,6 +79,8 @@ class ShaderMaterial extends Material {
 		this.lights = source.lights;
 		this.clipping = source.clipping;
 
+		this.occlusion = source.occlusion;
+
 		this.extensions = Object.assign( {}, source.extensions );
 
 		this.glslVersion = source.glslVersion;

diff --git a/src/renderers/WebGLRenderer.js b/src/renderers/WebGLRenderer.js
@@ -210,6 +210,7 @@ class WebGLRenderer {
 		const _vector3 = new Vector3();
 
 		const _emptyScene = { background: null, fog: null, environment: null, overrideMaterial: null, isScene: true };
+		let _occlusion = null;
 
 		function getTargetPixelRatio() {
 
@@ -415,6 +416,20 @@ class WebGLRenderer {
 
 		};
 
+		this.setOcclusion = function ( value ) {
+
+			if ( value === undefined ) return;
+
+			_occlusion = value;
+
+		};
+
+		this.clearOcclusion = function () {
+
+			_occlusion = null;
+
+		};
+
 		this.getSize = function ( target ) {
 
 			return target.set( _width, _height );
@@ -1600,7 +1615,7 @@ class WebGLRenderer {
 
 			const lightsStateVersion = lights.state.version;
 
-			const parameters = programCache.getParameters( material, lights.state, shadowsArray, scene, object );
+			const parameters = programCache.getParameters( material, lights.state, shadowsArray, scene, object, _occlusion );
 			const programCacheKey = programCache.getProgramCacheKey( parameters );
 
 			let programs = materialProperties.programs;
@@ -1840,6 +1855,10 @@ class WebGLRenderer {
 
 					needsProgramChange = true;
 
+				} else if ( material.occlusion === true ) {
+
+					needsProgramChange = true;
+
 				} else if ( materialProperties.numClippingPlanes !== undefined &&
 					( materialProperties.numClippingPlanes !== clipping.numPlanes ||
 					materialProperties.numIntersection !== clipping.numIntersection ) ) {
@@ -2054,6 +2073,12 @@ class WebGLRenderer {
 
 				}
 
+				if ( _occlusion && material.occlusion === true ) {
+
+					materials.refreshOcclusionUniforms( m_uniforms, _occlusion );
+
+				}
+
 				materials.refreshMaterialUniforms( m_uniforms, material, _pixelRatio, _height, _transmissionRenderTarget );
 
 				WebGLUniforms.upload( _gl, getUniformList( materialProperties ), m_uniforms, textures );

diff --git a/src/renderers/shaders/ShaderChunk.js b/src/renderers/shaders/ShaderChunk.js
@@ -74,6 +74,8 @@ import normal_pars_fragment from './ShaderChunk/normal_pars_fragment.glsl.js';
 import normal_pars_vertex from './ShaderChunk/normal_pars_vertex.glsl.js';
 import normal_vertex from './ShaderChunk/normal_vertex.glsl.js';
 import normalmap_pars_fragment from './ShaderChunk/normalmap_pars_fragment.glsl.js';
+import occlusion_fragment from './ShaderChunk/occlusion_fragment.glsl.js';
+import occlusion_pars_fragment from './ShaderChunk/occlusion_pars_fragment.glsl.js';
 import clearcoat_normal_fragment_begin from './ShaderChunk/clearcoat_normal_fragment_begin.glsl.js';
 import clearcoat_normal_fragment_maps from './ShaderChunk/clearcoat_normal_fragment_maps.glsl.js';
 import clearcoat_pars_fragment from './ShaderChunk/clearcoat_pars_fragment.glsl.js';
@@ -200,6 +202,8 @@ export const ShaderChunk = {
 	normal_pars_vertex: normal_pars_vertex,
 	normal_vertex: normal_vertex,
 	normalmap_pars_fragment: normalmap_pars_fragment,
+	occlusion_fragment: occlusion_fragment,
+	occlusion_pars_fragment: occlusion_pars_fragment,
 	clearcoat_normal_fragment_begin: clearcoat_normal_fragment_begin,
 	clearcoat_normal_fragment_maps: clearcoat_normal_fragment_maps,
 	clearcoat_pars_fragment: clearcoat_pars_fragment,

diff --git a/src/renderers/shaders/ShaderChunk/occlusion_fragment.glsl.js b/src/renderers/shaders/ShaderChunk/occlusion_fragment.glsl.js
@@ -0,0 +1,26 @@
+export default /* glsl */`
+#ifdef USE_OCCLUSION
+    if (gl_FragColor.a > 0.0) {
+        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);
+        }
+        float assetDepthMm = gl_FragCoord.z * 1000.0;
+        
+        float occlusion = Depth_GetBlurredOcclusionAroundUV(depthColor, depthUv, assetDepthMm, arrayIndex);
+
+        float objectMaskEroded = pow(occlusion, 10.0);
+
+        float occlusionTransition = clamp(occlusion * (2.0 - objectMaskEroded), 0.0, 1.0);
+
+        float kMaxOcclusion = 1.0;
+        occlusionTransition = min(occlusionTransition, kMaxOcclusion);
+
+        gl_FragColor = gl_FragColor * (1.0 - occlusion);
+    }
+#endif
+`;
diff --git a/src/renderers/shaders/ShaderChunk/occlusion_pars_fragment.glsl.js b/src/renderers/shaders/ShaderChunk/occlusion_pars_fragment.glsl.js
@@ -0,0 +1,97 @@
+export default /* glsl */`
+#ifdef USE_OCCLUSION
+    uniform sampler2DArray depthColor;
+    uniform float depthWidth;
+    uniform float depthHeight;
+
+    float Depth_GetCameraDepthInMillimeters(const sampler2DArray depthTexture,
+        const vec2 depthUv, int arrayIndex) {
+        return texture(depthColor, vec3(depthUv.x, depthUv.y, arrayIndex)).r * 1000.0;
+      }
+
+    float Depth_GetOcclusion(const sampler2DArray depthTexture, const vec2 depthUv, float assetDepthMm, int arrayIndex) {
+        float depthMm = Depth_GetCameraDepthInMillimeters(depthTexture, depthUv, arrayIndex);
+
+        // Instead of a hard z-buffer test, allow the asset to fade into the
+        // background along a 2 * kDepthTolerancePerMm * assetDepthMm
+        // range centered on the background depth.
+        const float kDepthTolerancePerMm = 0.01;
+        return clamp(1.0 -
+            0.5 * (depthMm - assetDepthMm) /
+                (kDepthTolerancePerMm * assetDepthMm) +
+            0.5, 0.0, 1.0);
+    }
+
+    float Depth_GetBlurredOcclusionAroundUV(const sampler2DArray depthTexture, const vec2 uv, float assetDepthMm, int arrayIndex) {
+    // Kernel used:
+    // 0   4   7   4   0
+    // 4   16  26  16  4
+    // 7   26  41  26  7
+    // 4   16  26  16  4
+    // 0   4   7   4   0
+    const float kKernelTotalWeights = 269.0;
+    float sum = 0.0;
+
+    const float kOcclusionBlurAmount = 0.01;
+    vec2 blurriness =
+    vec2(kOcclusionBlurAmount, kOcclusionBlurAmount /** u_DepthAspectRatio*/);
+
+    float current = 0.0;
+
+    current += Depth_GetOcclusion(
+    depthTexture, uv + vec2(-1.0, -2.0) * blurriness, assetDepthMm, arrayIndex);
+    current += Depth_GetOcclusion(
+    depthTexture, uv + vec2(+1.0, -2.0) * blurriness, assetDepthMm, arrayIndex);
+    current += Depth_GetOcclusion(
+    depthTexture, uv + vec2(-1.0, +2.0) * blurriness, assetDepthMm, arrayIndex);
+    current += Depth_GetOcclusion(
+    depthTexture, uv + vec2(+1.0, +2.0) * blurriness, assetDepthMm, arrayIndex);
+    current += Depth_GetOcclusion(
+    depthTexture, uv + vec2(-2.0, +1.0) * blurriness, assetDepthMm, arrayIndex);
+    current += Depth_GetOcclusion(
+    depthTexture, uv + vec2(+2.0, +1.0) * blurriness, assetDepthMm, arrayIndex);
+    current += Depth_GetOcclusion(
+    depthTexture, uv + vec2(-2.0, -1.0) * blurriness, assetDepthMm, arrayIndex);
+    current += Depth_GetOcclusion(
+    depthTexture, uv + vec2(+2.0, -1.0) * blurriness, assetDepthMm, arrayIndex);
+    sum += current * 4.0;
+
+    current = 0.0;
+    current += Depth_GetOcclusion(
+    depthTexture, uv + vec2(-2.0, -0.0) * blurriness, assetDepthMm, arrayIndex);
+    current += Depth_GetOcclusion(
+    depthTexture, uv + vec2(+2.0, +0.0) * blurriness, assetDepthMm, arrayIndex);
+    current += Depth_GetOcclusion(
+    depthTexture, uv + vec2(+0.0, +2.0) * blurriness, assetDepthMm, arrayIndex);
+    current += Depth_GetOcclusion(
+    depthTexture, uv + vec2(-0.0, -2.0) * blurriness, assetDepthMm, arrayIndex);
+    sum += current * 7.0;
+
+    current = 0.0;
+    current += Depth_GetOcclusion(
+    depthTexture, uv + vec2(-1.0, -1.0) * blurriness, assetDepthMm, arrayIndex);
+    current += Depth_GetOcclusion(
+    depthTexture, uv + vec2(+1.0, -1.0) * blurriness, assetDepthMm, arrayIndex);
+    current += Depth_GetOcclusion(
+    depthTexture, uv + vec2(-1.0, +1.0) * blurriness, assetDepthMm, arrayIndex);
+    current += Depth_GetOcclusion(
+    depthTexture, uv + vec2(+1.0, +1.0) * blurriness, assetDepthMm, arrayIndex);
+    sum += current * 16.0;
+
+    current = 0.0;
+    current += Depth_GetOcclusion(
+    depthTexture, uv + vec2(+0.0, +1.0) * blurriness, assetDepthMm, arrayIndex);
+    current += Depth_GetOcclusion(
+    depthTexture, uv + vec2(-0.0, -1.0) * blurriness, assetDepthMm, arrayIndex);
+    current += Depth_GetOcclusion(
+    depthTexture, uv + vec2(-1.0, -0.0) * blurriness, assetDepthMm, arrayIndex);
+    current += Depth_GetOcclusion(
+    depthTexture, uv + vec2(+1.0, +0.0) * blurriness, assetDepthMm, arrayIndex);
+    sum += current * 26.0;
+
+    sum += Depth_GetOcclusion(depthTexture, uv, assetDepthMm, arrayIndex) * 41.0;
+
+    return sum / kKernelTotalWeights;
+    }
+#endif
+`;