Updated text example to use new postprocessing system.

examples/webgl_geometry_text.html

@@ -41,6 +41,11 @@
 
 		<script type="text/javascript" src="../build/Three.js"></script>
 
+		<script type="text/javascript" src="js/postprocessing/EffectComposer.js"></script>
+		<script type="text/javascript" src="js/postprocessing/RenderPass.js"></script>
+		<script type="text/javascript" src="js/postprocessing/BloomPass.js"></script>
+		<script type="text/javascript" src="js/postprocessing/FilmPass.js"></script>
+
 		<script type="text/javascript" src="js/Detector.js"></script>
 		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
 		<script type="text/javascript" src="js/Stats.js"></script>
@@ -68,6 +73,8 @@
 
 			var camera, scene, renderer;
 
+			var composer;
+
 			var textMesh1, textMesh2, textGeo, faceMaterial, textMaterialFront, textMaterialSide, parent;
 
 			var firstLetter = true;
@@ -148,11 +155,15 @@
 
 				permalink = document.getElementById( "permalink" );
 
+				// CAMERA
+
 				camera = new THREE.Camera( 30, window.innerWidth / window.innerHeight, 1, 1500 );
 				camera.position.y = 400;
 				camera.position.z = 700;
 				camera.target.position.y = 100;
 
+				// SCENE
+
 				scene = new THREE.Scene();
 
 				scene.fog = new THREE.Fog( 0x000000, 250, 1400 );
@@ -222,6 +233,8 @@
 				plane.position.y = 100;
 				scene.addChild( plane );
 
+				// RENDERER
+
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
@@ -229,11 +242,15 @@
 
 				container.appendChild( renderer.domElement );
 
+				// STATS
+
 				stats = new Stats();
 				stats.domElement.style.position = 'absolute';
 				stats.domElement.style.top = '0px';
 				//container.appendChild( stats.domElement );
 
+				// EVENTS
+
 				document.addEventListener( 'mousedown', onDocumentMouseDown, false );
 				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
 				document.addEventListener( 'touchmove', onDocumentTouchMove, false );
@@ -315,9 +332,23 @@
 
 				}, false );
 
-				initPostprocessing();
+
+				// POSTPROCESSING
+
 				renderer.autoClear = false;
 
+				var renderModel = new THREE.RenderPass( scene, camera );
+				var effectBloom = new THREE.BloomPass( 0.25 );
+				var effectFilm = new THREE.FilmPass( 0.5, 0.125, 2048, false );
+
+				effectFilm.renderToScreen = true;
+
+				composer = new THREE.EffectComposer( renderer );
+
+				composer.addPass( renderModel );
+				composer.addPass( effectBloom );
+				composer.addPass( effectFilm );
+
 			}
 
 			//
@@ -561,76 +592,6 @@
 
 			//
 
-			function initPostprocessing() {
-
-				postprocessing.scene = new THREE.Scene();
-
-				postprocessing.camera = new THREE.OrthoCamera( window.innerWidth / - 2, window.innerWidth / 2,  window.innerHeight / 2, window.innerHeight / - 2, -10000, 10000 );
-				postprocessing.camera.position.z = 100;
-
-				var pars = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat };
-				postprocessing.rtTexture1 = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, pars );
-				postprocessing.rtTexture2 = new THREE.WebGLRenderTarget( 512, 512, pars );
-				postprocessing.rtTexture3 = new THREE.WebGLRenderTarget( 512, 512, pars );
-
-				var screen_shader = THREE.ShaderUtils.lib["screen"];
-				var screen_uniforms = THREE.UniformsUtils.clone( screen_shader.uniforms );
-
-				screen_uniforms["tDiffuse"].texture = postprocessing.rtTexture1;
-				screen_uniforms["opacity"].value = 1.0;
-
-				postprocessing.materialScreen = new THREE.MeshShaderMaterial( {
-
-					uniforms: screen_uniforms,
-					vertexShader: screen_shader.vertexShader,
-					fragmentShader: screen_shader.fragmentShader,
-					blending: THREE.AdditiveBlending,
-					transparent: true
-
-				} );
-
-				var convolution_shader = THREE.ShaderUtils.lib["convolution"];
-				var convolution_uniforms = THREE.UniformsUtils.clone( convolution_shader.uniforms );
-
-				postprocessing.blurx = new THREE.Vector2( 0.001953125, 0.0 ),
-				postprocessing.blury = new THREE.Vector2( 0.0, 0.001953125 );
-
-				convolution_uniforms["tDiffuse"].texture = postprocessing.rtTexture1;
-				convolution_uniforms["uImageIncrement"].value = postprocessing.blurx;
-				convolution_uniforms["cKernel"].value = THREE.ShaderUtils.buildKernel( 4.0 );
-
-				postprocessing.materialConvolution = new THREE.MeshShaderMaterial( {
-
-					uniforms: convolution_uniforms,
-					vertexShader:   "#define KERNEL_SIZE 25.0\n" + convolution_shader.vertexShader,
-					fragmentShader: "#define KERNEL_SIZE 25\n"   + convolution_shader.fragmentShader
-
-				} );
-
-				var film_shader = THREE.ShaderUtils.lib["film"];
-				var film_uniforms = THREE.UniformsUtils.clone( film_shader.uniforms );
-
-				film_uniforms["tDiffuse"].texture = postprocessing.rtTexture1;
-
-				postprocessing.materialFilm = new THREE.MeshShaderMaterial( { uniforms: film_uniforms, vertexShader: film_shader.vertexShader, fragmentShader: film_shader.fragmentShader } );
-				postprocessing.materialFilm.uniforms.grayscale.value = 0;
-				postprocessing.materialFilm.uniforms.nIntensity.value = 0.15;
-				postprocessing.materialFilm.uniforms.sIntensity.value = 0.25;
-				postprocessing.materialFilm.uniforms.sCount.value = 2048;
-
-				//postprocessing.materialFilm.uniforms.nIntensity.value = 0;
-				//postprocessing.materialFilm.uniforms.sIntensity.value = 0;
-
-				postprocessing.materialScreen.uniforms.opacity.value = glow;
-
-				postprocessing.quad = new THREE.Mesh( new THREE.PlaneGeometry( window.innerWidth, window.innerHeight ), postprocessing.materialConvolution );
-				postprocessing.quad.position.z = - 500;
-				postprocessing.scene.addObject( postprocessing.quad );
-
-			}
-
-			//
-
 			function animate() {
 
 				requestAnimationFrame( animate );
@@ -652,49 +613,14 @@
 
 				parent.rotation.y += ( targetRotation - parent.rotation.y ) * 0.05;
 
-				if ( postprocessing.enabled ) {
-
-					renderer.clear();
-
-					// Render scene into texture
-
-					renderer.render( scene, camera, postprocessing.rtTexture1, true );
+				renderer.clear();
 
-					// Render quad with blured scene into texture (convolution pass 1)
-
-					postprocessing.quad.materials[ 0 ] = postprocessing.materialConvolution;
-
-					postprocessing.materialConvolution.uniforms.tDiffuse.texture = postprocessing.rtTexture1;
-					postprocessing.materialConvolution.uniforms.uImageIncrement.value = postprocessing.blurx;
-
-					renderer.render( postprocessing.scene, postprocessing.camera, postprocessing.rtTexture2, true );
-
-					// Render quad with blured scene into texture (convolution pass 2)
-
-					postprocessing.materialConvolution.uniforms.tDiffuse.texture = postprocessing.rtTexture2;
-					postprocessing.materialConvolution.uniforms.uImageIncrement.value = postprocessing.blury;
-
-					renderer.render( postprocessing.scene, postprocessing.camera, postprocessing.rtTexture3, true );
-
-					// Render original scene with superimposed blur to texture
-
-					postprocessing.quad.materials[ 0 ] = postprocessing.materialScreen;
-
-					postprocessing.materialScreen.uniforms.tDiffuse.texture = postprocessing.rtTexture3;
-
-					renderer.render( postprocessing.scene, postprocessing.camera, postprocessing.rtTexture1, false );
-
-					// Render to screen
-
-					postprocessing.materialFilm.uniforms.time.value += 0.01;
-					postprocessing.quad.materials[ 0 ] = postprocessing.materialFilm;
+				if ( postprocessing.enabled ) {
 
-					postprocessing.materialScreen.uniforms.tDiffuse.texture = postprocessing.rtTexture1;
-					renderer.render( postprocessing.scene, postprocessing.camera );
+					composer.render( 0.05 );
 
 				} else {
 
-					renderer.clear();
 					renderer.render( scene, camera );
 
 				}