Add specular.

Author: gonnavis

examples/jsm/postprocessing/SSRrPass.js

@@ -142,6 +142,12 @@ var SSRrPass = function ( { renderer, scene, camera, width, height, selects, enc
 		depthBuffer: true
 	} );
 
+	this.beautyRenderTargetBunny = new WebGLRenderTarget( this.width, this.height, { // TODO: Can merge with metalnessRenderTarget?
+		minFilter: LinearFilter,
+		magFilter: LinearFilter,
+		format: RGBAFormat,
+	} );
+
 	// normal render target
 
 	this.normalRenderTarget = new WebGLRenderTarget( this.width, this.height, {
@@ -192,6 +198,7 @@ var SSRrPass = function ( { renderer, scene, camera, width, height, selects, enc
 	}
 
 	this.ssrrMaterial.uniforms[ 'tDiffuse' ].value = this.beautyRenderTarget.texture;
+	this.ssrrMaterial.uniforms[ 'tDiffuseBunny' ].value = this.beautyRenderTargetBunny.texture;
 	this.ssrrMaterial.uniforms[ 'tNormal' ].value = this.normalRenderTarget.texture;
 	// if (this.isSelective) {
 	this.ssrrMaterial.defines.isSelective = this.isSelective;
@@ -270,6 +277,7 @@ SSRrPass.prototype = Object.assign( Object.create( Pass.prototype ), {
 		// dispose render targets
 
 		this.beautyRenderTarget.dispose();
+		this.beautyRenderTargetBunny.dispose();
 		this.normalRenderTarget.dispose();
 		this.metalnessRenderTarget.dispose();
 		this.ssrrRenderTarget.dispose();
@@ -317,7 +325,17 @@ SSRrPass.prototype = Object.assign( Object.create( Pass.prototype ), {
 		mesh_box.visible=true
 		mesh_cone.visible=true
 		mesh_plane.visible=true
-		renderer.render( this.scene, this.camera );
+		renderer.render(this.scene, this.camera);
+
+		renderer.setRenderTarget( this.beautyRenderTargetBunny );
+		renderer.clear();
+		mesh_bunny.visible=true
+		mesh_sphere.visible=false
+		mesh_box.visible=false
+		mesh_cone.visible=false
+		mesh_plane.visible=false
+		renderer.render(this.scene, this.camera);
+
 
 		// render normals
 
@@ -352,6 +370,7 @@ SSRrPass.prototype = Object.assign( Object.create( Pass.prototype ), {
 		this.ssrrMaterial.uniforms[ 'ior' ].value = this.ior;
 		this.ssrrMaterial.uniforms[ 'surfDist' ].value = this.surfDist;
 		this.ssrrMaterial.uniforms[ 'thickTolerance' ].value = this.thickTolerance;
+		this.ssrrMaterial.uniforms[ 'tDiffuseBunny' ].value = this.beautyRenderTargetBunny.texture;
 		this.renderPass( renderer, this.ssrrMaterial, this.ssrrRenderTarget );
 
 		// output result to screen
@@ -517,10 +536,13 @@ SSRrPass.prototype = Object.assign( Object.create( Pass.prototype ), {
 			}
 
 		});
+		this.scene._background=this.scene._background
+		this.scene.background=null
 		this.scene._fog=this.scene.fog // TODO: Formal writing.
 		this.scene.fog=null
 		renderer.render(this.scene, this.camera);
 		this.scene.fog=this.scene._fog
+		this.scene.background=this.scene._background
 		this.scene.traverse( child => {
 
 			child.material = child._SSRPassMaterialBack;
@@ -543,6 +565,7 @@ SSRrPass.prototype = Object.assign( Object.create( Pass.prototype ), {
 		this.ssrrMaterial.defines.MAX_STEP = Math.sqrt( width * width + height * height );
 		this.ssrrMaterial.needsUpdate = true;
 		this.beautyRenderTarget.setSize( width, height );
+		this.beautyRenderTargetBunny.setSize( width, height );
 		this.ssrrRenderTarget.setSize( width, height );
 		this.normalRenderTarget.setSize( width, height );
 

examples/jsm/shaders/SSRrShader.js

@@ -17,6 +17,7 @@ var SSRrShader = {
   uniforms: {
 
     "tDiffuse": { value: null },
+    "tDiffuseBunny": { value: null },
     "tNormal": { value: null },
     "tMetalness": { value: null },
     "tDepth": { value: null },
@@ -56,6 +57,7 @@ var SSRrShader = {
 		uniform sampler2D tNormal;
 		uniform sampler2D tMetalness;
 		uniform sampler2D tDiffuse;
+		uniform sampler2D tDiffuseBunny;
 		uniform float cameraRange;
 		uniform vec2 resolution;
 		uniform float cameraNear;
@@ -115,7 +117,7 @@ var SSRrShader = {
 		}
 		void main(){
 			float metalness=texture2D(tMetalness,vUv).r;
-			if(metalness==0.) return;
+			if(metalness<=0.) return;
 
 			// TODO: Will if(ior===0.) return; improve performance?
 			// gl_FragColor=vec4(0,0,.5,1);return;
@@ -186,7 +188,9 @@ var SSRrShader = {
 
 				if(viewRefractRayZ<vZ){
 					vec4 refractColor=texture2D(tDiffuse,uv);
-					gl_FragColor.xyz=refractColor.xyz;
+					vec4 diffuseBunnyColor=texture2D(tDiffuseBunny,vUv);
+					gl_FragColor.xyz=max(refractColor.xyz,diffuseBunnyColor.r); // TODO: Convert gray to alpha to improve display.
+					// gl_FragColor.xyz=refractColor.xyz*(1.+diffuseBunnyColor.r*3.);
 					gl_FragColor.a=1.;
 					break;
 				}

examples/webgl_postprocessing_ssrr.html

@@ -104,7 +104,12 @@
 
 					geometry.computeVertexNormals();
 
-					const material = new THREE.MeshStandardMaterial({ color: 0x606060 });
+					const material = new THREE.MeshStandardMaterial({ 
+						color: 'black',
+						metalness: 0,
+						roughness: .2,
+					});
+					window.bunnyMaterial=material
 					const mesh = new THREE.Mesh(geometry, material);
 					mesh.position.y = - 0.0365;
 					mesh.name='bunny'
@@ -195,6 +200,8 @@
 			gui.add(params, 'enableSSRr').name('Enable SSRr');
 			ssrrPass.ior = .05;
 			gui.add(ssrrPass, 'ior').name('IOR').min(0).max(.2).step(.00001)
+			gui.add(bunnyMaterial, 'metalness').min(0).max(1).step(.01)
+			gui.add(bunnyMaterial, 'roughness').min(0).max(1).step(.01)
 			gui.add(params, 'autoRotate').onChange(() => {
 
 				controls.enabled = !params.autoRotate;