SSRPass: Support hierarchy and different intensity.

examples/jsm/postprocessing/SSRPass.js

@@ -39,6 +39,7 @@ class SSRPass extends Pass {
 		this.groundReflector = groundReflector;
 
 		this.opacity = SSRShader.uniforms.opacity.value;
+		this.defaultIntensity = 1;
 		this.output = 0;
 
 		this.maxDistance = SSRShader.uniforms.maxDistance.value;
@@ -48,34 +49,7 @@ class SSRPass extends Pass {
 
 		this.tempColor = new Color();
 
-		this._selects = selects;
-		this.selective = Array.isArray( this._selects );
-		Object.defineProperty( this, 'selects', {
-			get() {
-
-				return this._selects;
-
-			},
-			set( val ) {
-
-				if ( this._selects === val ) return;
-				this._selects = val;
-				if ( Array.isArray( val ) ) {
-
-					this.selective = true;
-					this.ssrMaterial.defines.SELECTIVE = true;
-					this.ssrMaterial.needsUpdate = true;
-
-				} else {
-
-					this.selective = false;
-					this.ssrMaterial.defines.SELECTIVE = false;
-					this.ssrMaterial.needsUpdate = true;
-
-				}
-
-			}
-		} );
+		this.selects = [];
 
 		this._bouncing = bouncing;
 		Object.defineProperty( this, 'bouncing', {
@@ -186,9 +160,9 @@ class SSRPass extends Pass {
 			type: HalfFloatType,
 		} );
 
-		// metalness render target
+		// intensity render target
 
-		this.metalnessRenderTarget = new WebGLRenderTarget( this.width, this.height, {
+		this.intensityRenderTarget = new WebGLRenderTarget( this.width, this.height, {
 			minFilter: NearestFilter,
 			magFilter: NearestFilter,
 			format: RGBAFormat
@@ -228,9 +202,8 @@ class SSRPass extends Pass {
 
 		this.ssrMaterial.uniforms[ 'tDiffuse' ].value = this.beautyRenderTarget.texture;
 		this.ssrMaterial.uniforms[ 'tNormal' ].value = this.normalRenderTarget.texture;
-		this.ssrMaterial.defines.SELECTIVE = this.selective;
 		this.ssrMaterial.needsUpdate = true;
-		this.ssrMaterial.uniforms[ 'tMetalness' ].value = this.metalnessRenderTarget.texture;
+		this.ssrMaterial.uniforms[ 'tIntensity' ].value = this.intensityRenderTarget.texture;
 		this.ssrMaterial.uniforms[ 'tDepth' ].value = this.beautyRenderTarget.depthTexture;
 		this.ssrMaterial.uniforms[ 'cameraNear' ].value = this.camera.near;
 		this.ssrMaterial.uniforms[ 'cameraFar' ].value = this.camera.far;
@@ -244,18 +217,12 @@ class SSRPass extends Pass {
 		this.normalMaterial = new MeshNormalMaterial( { morphTargets } );
 		this.normalMaterial.blending = NoBlending;
 
-		// metalnessOn material
+		// intensity material
 
-		this.metalnessOnMaterial = new MeshBasicMaterial( {
+		this.intensityMaterial = new MeshBasicMaterial( {
 			color: 'white'
 		} );
 
-		// metalnessOff material
-
-		this.metalnessOffMaterial = new MeshBasicMaterial( {
-			color: 'black'
-		} );
-
 		// blur material
 
 		this.blurMaterial = new ShaderMaterial( {
@@ -324,6 +291,8 @@ class SSRPass extends Pass {
 
 		this.originalClearColor = new Color();
 
+		this.setSelects( selects );
+
 	}
 
 	dispose() {
@@ -333,7 +302,7 @@ class SSRPass extends Pass {
 		this.beautyRenderTarget.dispose();
 		this.prevRenderTarget.dispose();
 		this.normalRenderTarget.dispose();
-		this.metalnessRenderTarget.dispose();
+		this.intensityRenderTarget.dispose();
 		this.ssrRenderTarget.dispose();
 		this.blurRenderTarget.dispose();
 		this.blurRenderTarget2.dispose();
@@ -342,8 +311,7 @@ class SSRPass extends Pass {
 		// dispose materials
 
 		this.normalMaterial.dispose();
-		this.metalnessOnMaterial.dispose();
-		this.metalnessOffMaterial.dispose();
+		this.intensityMaterial.dispose();
 		this.blurMaterial.dispose();
 		this.blurMaterial2.dispose();
 		this.copyMaterial.dispose();
@@ -377,13 +345,9 @@ class SSRPass extends Pass {
 
 		this.renderOverride( renderer, this.normalMaterial, this.normalRenderTarget, 0, 0 );
 
-		// render metalnesses
-
-		if ( this.selective ) {
+		// render intensities
 
-			this.renderMetalness( renderer, this.metalnessOnMaterial, this.metalnessRenderTarget, 0, 0 );
-
-		}
+		this.renderIntensity( renderer, this.intensityRenderTarget, 0, 0 );
 
 		// render SSR
 
@@ -490,9 +454,9 @@ class SSRPass extends Pass {
 
 				break;
 
-			case SSRPass.OUTPUT.Metalness:
+			case SSRPass.OUTPUT.Intensity:
 
-				this.copyMaterial.uniforms[ 'tDiffuse' ].value = this.metalnessRenderTarget.texture;
+				this.copyMaterial.uniforms[ 'tDiffuse' ].value = this.intensityRenderTarget.texture;
 				this.copyMaterial.blending = NoBlending;
 				this.renderPass( renderer, this.copyMaterial, this.renderToScreen ? null : writeBuffer );
 
@@ -566,7 +530,7 @@ class SSRPass extends Pass {
 
 	}
 
-	renderMetalness( renderer, overrideMaterial, renderTarget, clearColor, clearAlpha ) {
+	renderIntensity( renderer, renderTarget, clearColor, clearAlpha ) {
 
 		this.originalClearColor.copy( renderer.getClearColor( this.tempColor ) );
 		const originalClearAlpha = renderer.getClearAlpha( this.tempColor );
@@ -575,9 +539,6 @@ class SSRPass extends Pass {
 		renderer.setRenderTarget( renderTarget );
 		renderer.autoClear = false;
 
-		clearColor = overrideMaterial.clearColor || clearColor;
-		clearAlpha = overrideMaterial.clearAlpha || clearAlpha;
-
 		if ( ( clearColor !== undefined ) && ( clearColor !== null ) ) {
 
 			renderer.setClearColor( clearColor );
@@ -588,22 +549,24 @@ class SSRPass extends Pass {
 
 		this.scene.traverseVisible( child => {
 
-			child._SSRPassBackupMaterial = child.material;
-			if ( this._selects.includes( child ) ) {
+			if ( this.selects.includes( child ) && child.material ) {
 
-				child.material = this.metalnessOnMaterial;
+				if ( child.material.type === 'MeshStandardMaterial' || child.material.type === 'MeshPhysicalMaterial' ) {
 
-			} else {
+					this.intensityMaterial.color.setScalar( child.material.envMapIntensity );
 
-				child.material = this.metalnessOffMaterial;
+				} else {
 
-			}
+					this.intensityMaterial.color.setScalar( this.defaultIntensity );
 
-		} );
-		renderer.render( this.scene, this.camera );
-		this.scene.traverseVisible( child => {
+				}
 
-			child.material = child._SSRPassBackupMaterial;
+				const materialBack = child.material;
+				child.material = this.intensityMaterial;
+				renderer.render( child, this.camera, false );
+				child.material = materialBack;
+
+			}
 
 		} );
 
@@ -615,6 +578,26 @@ class SSRPass extends Pass {
 
 	}
 
+	setSelects( selects ) {
+
+		this.selects = [];
+		selects.forEach( obj3d=>{
+
+			obj3d.traverseVisible( child=>{
+
+				if ( child.type === 'Mesh' ) {
+
+					this.selects.push( child );
+
+				}
+
+			} );
+
+		} );
+		this.selects = Array.from( new Set( this.selects ) );
+
+	}
+
 	setSize( width, height ) {
 
 		this.width = width;
@@ -626,7 +609,7 @@ class SSRPass extends Pass {
 		this.prevRenderTarget.setSize( width, height );
 		this.ssrRenderTarget.setSize( width, height );
 		this.normalRenderTarget.setSize( width, height );
-		this.metalnessRenderTarget.setSize( width, height );
+		this.intensityRenderTarget.setSize( width, height );
 		this.blurRenderTarget.setSize( width, height );
 		this.blurRenderTarget2.setSize( width, height );
 		// this.blurRenderTarget3.setSize(width, height);
@@ -648,7 +631,7 @@ SSRPass.OUTPUT = {
 	'Beauty': 3,
 	'Depth': 4,
 	'Normal': 5,
-	'Metalness': 7,
+	'Intensity': 7,
 };
 
 export { SSRPass };

examples/jsm/shaders/SSRShader.js

@@ -15,14 +15,13 @@ var SSRShader = {
 		DISTANCE_ATTENUATION: true,
 		FRESNEL: true,
 		INFINITE_THICK: false,
-		SELECTIVE: false,
 	},
 
 	uniforms: {
 
 		'tDiffuse': { value: null },
 		'tNormal': { value: null },
-		'tMetalness': { value: null },
+		'tIntensity': { value: null },
 		'tDepth': { value: null },
 		'cameraNear': { value: null },
 		'cameraFar': { value: null },
@@ -56,7 +55,7 @@ var SSRShader = {
 		varying vec2 vUv;
 		uniform sampler2D tDepth;
 		uniform sampler2D tNormal;
-		uniform sampler2D tMetalness;
+		uniform sampler2D tIntensity;
 		uniform sampler2D tDiffuse;
 		uniform float cameraRange;
 		uniform vec2 resolution;
@@ -89,7 +88,12 @@ var SSRShader = {
 		}
 		float getViewZ( const in float depth ) {
 			#ifdef PERSPECTIVE_CAMERA
-				return perspectiveDepthToViewZ( depth, cameraNear, cameraFar );
+				// return perspectiveDepthToViewZ( depth, cameraNear, cameraFar );
+
+				// clipZ=cameraProjectionMatrix[2][2]*viewZ+cameraProjectionMatrix[3][2]
+				// clipZ=-2*depth*viewZ+viewZ
+				// viewZ=cameraProjectionMatrix[3][2]/(1.-2.*depth-cameraProjectionMatrix[2][2])
+				return cameraProjectionMatrix[3][2]/(1.-2.*depth-cameraProjectionMatrix[2][2]);
 			#else
 				return orthographicDepthToViewZ( depth, cameraNear, cameraFar );
 			#endif
@@ -113,10 +117,8 @@ var SSRShader = {
 			return xy;
 		}
 		void main(){
-			#ifdef SELECTIVE
-				float metalness=texture2D(tMetalness,vUv).r;
-				if(metalness==0.) return;
-			#endif
+			float intensity=texture2D(tIntensity,vUv).r;
+			if(intensity==0.) return;
 
 			float depth = getDepth( vUv );
 			float viewZ = getViewZ( depth );
@@ -219,6 +221,7 @@ var SSRShader = {
 							float fresnelCoe=(dot(viewIncidentDir,viewReflectDir)+1.)/2.;
 							op*=fresnelCoe;
 						#endif
+						op*=intensity;
 						vec4 reflectColor=texture2D(tDiffuse,uv);
 						gl_FragColor.xyz=reflectColor.xyz;
 						gl_FragColor.a=op;