SSRPass: Change surfDist and infiniteThick behavior. (#21539)

* SSRPassChangeInfiniteThickBehaviorPr

* Rename `surfDist` to `thickness` and change behavior.

* All renderTarget use NearestFilter

* Add auto-calculated `minThickness` instead of `surfDist` parameter.

examples/jsm/postprocessing/SSRPass.js

@@ -5,7 +5,6 @@ import {
 	DepthTexture,
 	SrcAlphaFactor,
 	OneMinusSrcAlphaFactor,
-	LinearFilter,
 	MeshNormalMaterial,
 	MeshBasicMaterial,
 	NearestFilter,
@@ -43,7 +42,7 @@ class SSRPass extends Pass {
 		this.output = 0;
 
 		this.maxDistance = SSRShader.uniforms.maxDistance.value;
-		this.surfDist = SSRShader.uniforms.surfDist.value;
+		this.thickness = SSRShader.uniforms.thickness.value;
 
 		this.encoding = encoding;
 
@@ -155,7 +154,6 @@ class SSRPass extends Pass {
 
 			}
 		} );
-		this.thickTolerance = SSRShader.uniforms.thickTolerance.value;
 
 		// beauty render target with depth buffer
 
@@ -165,8 +163,8 @@ class SSRPass extends Pass {
 		depthTexture.magFilter = NearestFilter;
 
 		this.beautyRenderTarget = new WebGLRenderTarget( this.width, this.height, {
-			minFilter: LinearFilter,
-			magFilter: LinearFilter,
+			minFilter: NearestFilter,
+			magFilter: NearestFilter,
 			format: RGBAFormat,
 			depthTexture: depthTexture,
 			depthBuffer: true
@@ -174,8 +172,8 @@ class SSRPass extends Pass {
 
 		//for bouncing
 		this.prevRenderTarget = new WebGLRenderTarget( this.width, this.height, {
-			minFilter: LinearFilter,
-			magFilter: LinearFilter,
+			minFilter: NearestFilter,
+			magFilter: NearestFilter,
 			format: RGBAFormat,
 		} );
 
@@ -201,8 +199,8 @@ class SSRPass extends Pass {
 		// ssr render target
 
 		this.ssrRenderTarget = new WebGLRenderTarget( this.width, this.height, {
-			minFilter: LinearFilter,
-			magFilter: LinearFilter,
+			minFilter: NearestFilter,
+			magFilter: NearestFilter,
 			format: RGBAFormat
 		} );
 
@@ -236,7 +234,7 @@ class SSRPass extends Pass {
 		this.ssrMaterial.uniforms[ 'tDepth' ].value = this.beautyRenderTarget.depthTexture;
 		this.ssrMaterial.uniforms[ 'cameraNear' ].value = this.camera.near;
 		this.ssrMaterial.uniforms[ 'cameraFar' ].value = this.camera.far;
-		this.ssrMaterial.uniforms[ 'surfDist' ].value = this.surfDist;
+		this.ssrMaterial.uniforms[ 'thickness' ].value = this.thickness;
 		this.ssrMaterial.uniforms[ 'resolution' ].value.set( this.width, this.height );
 		this.ssrMaterial.uniforms[ 'cameraProjectionMatrix' ].value.copy( this.camera.projectionMatrix );
 		this.ssrMaterial.uniforms[ 'cameraInverseProjectionMatrix' ].value.copy( this.camera.projectionMatrixInverse );
@@ -391,8 +389,7 @@ class SSRPass extends Pass {
 
 		this.ssrMaterial.uniforms[ 'opacity' ].value = this.opacity;
 		this.ssrMaterial.uniforms[ 'maxDistance' ].value = this.maxDistance;
-		this.ssrMaterial.uniforms[ 'surfDist' ].value = this.surfDist;
-		this.ssrMaterial.uniforms[ 'thickTolerance' ].value = this.thickTolerance;
+		this.ssrMaterial.uniforms[ 'thickness' ].value = this.thickness;
 		this.renderPass( renderer, this.ssrMaterial, this.ssrRenderTarget );
 
 

examples/jsm/shaders/SSRShader.js

@@ -32,9 +32,8 @@ var SSRShader = {
 		'opacity': { value: .5 },
 		'maxDistance': { value: 180 },
 		'cameraRange': { value: 0 },
-		'surfDist': { value: .007 },
-		'thickTolerance': { value: .03 },
-
+		'thickness': { value: .018 },
+		
 	},
 
 	vertexShader: /* glsl */`
@@ -65,10 +64,9 @@ var SSRShader = {
 		uniform float cameraNear;
 		uniform float cameraFar;
 		uniform float maxDistance;
-		uniform float surfDist;
+		uniform float thickness;
 		uniform mat4 cameraProjectionMatrix;
 		uniform mat4 cameraInverseProjectionMatrix;
-		uniform float thickTolerance;
 		#include <packing>
 		float pointToLineDistance(vec3 x0, vec3 x1, vec3 x2) {
 			//x0: point, x1: linePointA, x2: linePointB
@@ -180,25 +178,36 @@ var SSRShader = {
 					// https://www.comp.nus.edu.sg/~lowkl/publications/lowk_persp_interp_techrep.pdf
 					float recipVPZ=1./viewPosition.z;
 					float viewReflectRayZ=1./(recipVPZ+s*(1./d1viewPosition.z-recipVPZ));
-					float sD=surfDist*cW;
 				#else
 					float viewReflectRayZ=viewPosition.z+s*(d1viewPosition.z-viewPosition.z);
-					float sD=surfDist;
 				#endif
-				if(viewReflectRayZ-sD>vZ) continue;
 
+				if(viewReflectRayZ>vZ) continue;
+
+				bool hit;
 				#ifdef INFINITE_THICK
-					if(viewReflectRayZ+thickTolerance*clipW<vP.z) break;
+					hit=true;
+				#else
+					float away=pointToLineDistance(vP,viewPosition,d1viewPosition);
+
+					float minThickness;
+					vec2 xyNeighbor=xy;
+					xyNeighbor.x+=1.;
+					vec2 uvNeighbor=xyNeighbor/resolution;
+					vec3 vPNeighbor=getViewPosition(uvNeighbor,d,cW);
+					minThickness=vPNeighbor.x-vP.x;
+					minThickness*=3.;
+					float tk=max(minThickness,thickness);
+
+					hit=away<=tk;
 				#endif
-				float away=pointToLineDistance(vP,viewPosition,d1viewPosition);
-
-				float op=opacity;
 
-				if(away<sD){
+				if(hit){
 					vec3 vN=getViewNormal( uv );
 					if(dot(viewReflectDir,vN)>=0.) continue;
 					float distance=pointPlaneDistance(vP,viewPosition,viewNormal);
 					if(distance>maxDistance) break;
+					float op=opacity;
 					#ifdef DISTANCE_ATTENUATION
 						float ratio=1.-(distance/maxDistance);
 						float attenuation=ratio*ratio;

examples/webgl_postprocessing_ssr.html

@@ -197,6 +197,10 @@
 				}
 
 			} );
+			ssrPass.thickness = 0.018;
+			gui.add( ssrPass, 'thickness' ).min( 0 ).max( .1 ).step( .0001 );
+			ssrPass.infiniteThick = false
+			gui.add( ssrPass, 'infiniteThick' );
 			gui.add( params, 'autoRotate' ).onChange( () => {
 
 				controls.enabled = ! params.autoRotate;
@@ -254,11 +258,8 @@
 				groundReflector.opacity = ssrPass.opacity;
 
 			} );
-			ssrPass.surfDist = 0.0015;
-			folder.add( ssrPass, 'surfDist' ).min( 0 ).max( .005 ).step( .0001 );
-			folder.add( ssrPass, 'infiniteThick' );
-			folder.add( ssrPass, 'thickTolerance' ).min( 0 ).max( .05 ).step( .0001 );
 			folder.add( ssrPass, 'blur' );
+			// folder.open()
 			// gui.close()
 
 		}