Examples: Fix god rays demo

examples/js/ShaderGodRays.js

@@ -20,15 +20,52 @@
 
 THREE.ShaderGodRays = {
 
+	'godrays_invert': {
+
+		uniforms: {
+
+			tInput: {
+				value: null
+			}
+
+		},
+
+		vertexShader: [
+
+			"varying vec2 vUv;",
+
+			"void main() {",
+
+			" vUv = uv;",
+			" gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
+
+			"}"
+
+		].join( "\n" ),
+
+		fragmentShader: [
+
+			"varying vec2 vUv;",
+
+			"uniform sampler2D tInput;",
+
+			"void main() {",
+
+			"	gl_FragColor = vec4( 1.0 ) - texture2D( tInput, vUv );",
+
+
+			"}"
+
+		].join( "\n" )
+
+	},
+
+
 	/**
 	 * The god-ray generation shader.
 	 *
 	 * First pass:
 	 *
-	 * The input is the depth map. I found that the output from the
-	 * THREE.MeshDepthMaterial material was directly suitable without
-	 * requiring any treatment whatsoever.
-	 *
 	 * The depth map is blurred along radial lines towards the "sun". The
 	 * output is written to a temporary render target (I used a 1/4 sized
 	 * target).

examples/webgl_postprocessing_godrays.html

@@ -81,7 +81,6 @@
 				camera.position.z = 200;
 
 				scene = new THREE.Scene();
-				scene.background = new THREE.Color( bgColor );
 
 				//
 
@@ -111,6 +110,7 @@
 				//
 
 				renderer = new THREE.WebGLRenderer();
+				renderer.setClearColor( 0xffffff );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
@@ -191,6 +191,7 @@
 				// targets but the aliasing causes some temporal flickering
 
 				postprocessing.rtTextureDepth = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, pars );
+				postprocessing.rtTextureDepthCustom = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, pars );
 
 				// Aggressive downsize god-ray ping-pong render targets to minimize cost
 
@@ -201,6 +202,16 @@
 
 				// god-ray shaders
 
+				var godraysInvShader = THREE.ShaderGodRays[ "godrays_invert" ];
+				postprocessing.godrayInvUniforms = THREE.UniformsUtils.clone( godraysInvShader.uniforms );
+				postprocessing.materialGodraysInvert = new THREE.ShaderMaterial( {
+
+					uniforms: postprocessing.godrayInvUniforms,
+					vertexShader: godraysInvShader.vertexShader,
+					fragmentShader: godraysInvShader.fragmentShader
+
+				} );
+
 				var godraysGenShader = THREE.ShaderGodRays[ "godrays_generate" ];
 				postprocessing.godrayGenUniforms = THREE.UniformsUtils.clone( godraysGenShader.uniforms );
 				postprocessing.materialGodraysGenerate = new THREE.ShaderMaterial( {
@@ -323,6 +334,13 @@
 					scene.overrideMaterial = materialDepth;
 					renderer.render( scene, camera, postprocessing.rtTextureDepth, true );
 
+					//
+
+					postprocessing.godrayInvUniforms[ "tInput" ].value = postprocessing.rtTextureDepth.texture;
+
+					postprocessing.scene.overrideMaterial = postprocessing.materialGodraysInvert;
+					renderer.render( postprocessing.scene, postprocessing.camera, postprocessing.rtTextureDepthCustom  );
+
 					// -- Render god-rays --
 
 					// Maximum length of god-rays (in texture space [0,1]X[0,1])
@@ -344,7 +362,7 @@
 					var stepLen = filterLen * Math.pow( TAPS_PER_PASS, -pass );
 
 					postprocessing.godrayGenUniforms[ "fStepSize" ].value = stepLen;
-					postprocessing.godrayGenUniforms[ "tInput" ].value = postprocessing.rtTextureDepth.texture;
+					postprocessing.godrayGenUniforms[ "tInput" ].value = postprocessing.rtTextureDepthCustom.texture;
 
 					postprocessing.scene.overrideMaterial = postprocessing.materialGodraysGenerate;