Updated video and dynamic particles examples to use new postprocessing system.

examples/webgl_materials_video.html

@@ -40,6 +40,11 @@
 
 		<script type="text/javascript" src="js/ShaderExtras.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/ShaderPass.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>
@@ -59,14 +64,14 @@
 
 			var video, texture, material, mesh;
 
+			var composer;
+
 			var mouseX = 0;
 			var mouseY = 0;
 
 			var windowHalfX = window.innerWidth / 2;
 			var windowHalfY = window.innerHeight / 2;
 
-			var postprocessing = { enabled: true };
-
 			var cube_count,
 
 				meshes = [],
@@ -165,7 +170,6 @@
 
 				}
 
-				initPostprocessing();
 				renderer.autoClear = false;
 
 				stats = new Stats();
@@ -175,6 +179,20 @@
 
 				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 
+				// postprocessing
+
+				var renderModel = new THREE.RenderPass( scene, camera );
+				var effectBloom = new THREE.BloomPass( 1.3 );
+				var effectScreen = new THREE.ShaderPass( THREE.ShaderExtras[ "screen" ] );
+
+				effectScreen.renderToScreen = true;
+
+				composer = new THREE.EffectComposer( renderer );
+
+				composer.addPass( renderModel );
+				composer.addPass( effectBloom );
+				composer.addPass( effectScreen );
+
 			}
 
 			function change_uvs( geometry, unitx, unity, offsetx, offsety ) {
@@ -197,58 +215,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.ShaderExtras["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.ShaderExtras["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.ShaderExtras.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
-
-				} );
-
-				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 onDocumentMouseMove(event) {
 
 				mouseX = ( event.clientX - windowHalfX );
@@ -321,51 +287,11 @@
 
 				}
 
-				counter++;
+				counter ++;
 
 				renderer.clear();
+				composer.render();
 
-				if ( postprocessing.enabled ) {
-
-					// Render scene into texture
-
-					renderer.render( scene, camera, postprocessing.rtTexture1, true );
-
-					// Render quad with blured scene into texture (convolution pass 1)
-
-					postprocessing.quad.materials = [ 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 = [ postprocessing.materialScreen ];
-
-					postprocessing.materialScreen.uniforms.tDiffuse.texture = postprocessing.rtTexture3;
-					postprocessing.materialScreen.uniforms.opacity.value = 1.3;
-
-					renderer.render( postprocessing.scene, postprocessing.camera, postprocessing.rtTexture1, false );
-
-					// Render to screen
-
-					postprocessing.materialScreen.uniforms.tDiffuse.texture = postprocessing.rtTexture1;
-					renderer.render( postprocessing.scene, postprocessing.camera );
-
-				} else {
-
-					renderer.render( scene, camera );
-
-				}
 
 			}
 

examples/webgl_particles_dynamic.html

@@ -43,6 +43,12 @@
 
 		<script type="text/javascript" src="js/ShaderExtras.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/ShaderPass.js"></script>
+		<script type="text/javascript" src="js/postprocessing/FilmPass.js"></script>
+
         <script type="text/javascript" src="js/Stats.js"></script>
         <script type="text/javascript" src="js/Detector.js"></script>
 		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
@@ -67,8 +73,7 @@
 
 			var total = 0, totaln = 0;
 
-			var postprocessing1 = {};
-			var postprocessing2 = {};
+			var composer;
 
             init();
             animate();
@@ -90,9 +95,6 @@
 				directionalLight.position.normalize();
 				scene.addLight( directionalLight );
 
-				initPostprocessingBloom( postprocessing1 );
-				initPostprocessingFocus( postprocessing2 );
-
 				aloader = new THREE.JSONLoader( );
 				bloader = new THREE.BinaryLoader( true );
 
@@ -132,6 +134,8 @@
 
 				} } );
 
+				//
+
                 renderer = new THREE.WebGLRenderer( { clearColor: 0x000000, clearAlpha: 1, antialias: false } );
 				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
 				renderer.autoClear = false;
@@ -140,11 +144,15 @@
 
 				renderer.setClearColor( scene.fog.color, 1 );
 
+				//
+
                 stats = new Stats();
                 stats.domElement.style.position = 'absolute';
                 stats.domElement.style.top = '0px';
                 //container.appendChild( stats.domElement );
 
+				//
+
 				parent = new THREE.Object3D();
 				scene.addObject( parent );
 
@@ -156,6 +164,22 @@
 				totaln += 1;
 				total += grid.geometry.vertices.length;
 
+				// postprocessing
+
+				var renderModel = new THREE.RenderPass( scene, camera );
+				var effectBloom = new THREE.BloomPass( 0.75 );
+				var effectFilm = new THREE.FilmPass( 0.5, 0.5, 1448, false );
+				var effectFocus = new THREE.ShaderPass( generateFocusShader(), "map" );
+
+				effectFocus.renderToScreen = true;
+
+				composer = new THREE.EffectComposer( renderer );
+
+				composer.addPass( renderModel );
+				composer.addPass( effectBloom );
+				composer.addPass( effectFilm );
+				composer.addPass( effectFocus );
+
             }
 
 			function createMesh( originalGeometry, scene, scale, x, y, z, color, dynamic ) {
@@ -240,30 +264,20 @@
 
 			}
 
-			function initPostprocessingFocus( effect ) {
-
-				effect.type = "focus";
-
-				effect.scene = new THREE.Scene();
+			function generateFocusShader() {
 
-				effect.camera = new THREE.OrthoCamera( SCREEN_WIDTH / - 2, SCREEN_WIDTH / 2, SCREEN_HEIGHT / 2, SCREEN_HEIGHT / - 2, -10000, 10000 );
-				effect.camera.position.z = 100;
+				var shader = {
 
-				effect.texture = new THREE.WebGLRenderTarget( SCREEN_WIDTH, SCREEN_HEIGHT, { minFilter: THREE.LinearFilter, magFilter: THREE.NearestFilter, format: THREE.RGBFormat } );
+					uniforms : {
 
-				var heatUniforms = {
-
-					"map": { type: "t", value:0, texture: effect.texture },
-					"screenWidth": { type: "f", value: SCREEN_WIDTH },
-					"screenHeight": { type: "f", value: SCREEN_HEIGHT },
-					"sampleDistance": { type: "f", value: 0.94 },
-					"waveFactor": { type: "f", value: 0.00125 }
-
-				};
+						"map": 				{ type: "t", value: 0, texture: null },
+						"screenWidth": 		{ type: "f", value: SCREEN_WIDTH },
+						"screenHeight": 	{ type: "f", value: SCREEN_HEIGHT },
+						"sampleDistance": 	{ type: "f", value: 0.94 },
+						"waveFactor": 		{ type: "f", value: 0.00125 }
 
-				effect.materialHeat = new THREE.MeshShaderMaterial( {
+					},
 
-					uniforms: heatUniforms,
 					vertexShader: [
 
 						"varying vec2 vUv;",
@@ -279,134 +293,67 @@
 
 					fragmentShader: [
 
-							"uniform float screenWidth;",
-							"uniform float screenHeight;",
-							"uniform float sampleDistance;",
-							"uniform float waveFactor;",
+						"uniform float screenWidth;",
+						"uniform float screenHeight;",
+						"uniform float sampleDistance;",
+						"uniform float waveFactor;",
 
-							"uniform sampler2D map;",
-							"varying vec2 vUv;",
+						"uniform sampler2D map;",
+						"varying vec2 vUv;",
 
-							"void main() {",
+						"void main() {",
 
-								"vec4 color, org, tmp, add;",
-								"float sample_dist, f;",
-								"vec2 vin;",
-								"vec2 uv = vUv;",
+							"vec4 color, org, tmp, add;",
+							"float sample_dist, f;",
+							"vec2 vin;",
+							"vec2 uv = vUv;",
 
-								"add += color = org = texture2D( map, uv );",
+							"add += color = org = texture2D( map, uv );",
 
-								"vin = ( uv - vec2( 0.5 ) ) * vec2( 1.4 );",
-								"sample_dist = dot( vin, vin ) * 2.0;",
+							"vin = ( uv - vec2( 0.5 ) ) * vec2( 1.4 );",
+							"sample_dist = dot( vin, vin ) * 2.0;",
 
-								"f = ( waveFactor * 100.0 + sample_dist ) * sampleDistance * 4.0;",
+							"f = ( waveFactor * 100.0 + sample_dist ) * sampleDistance * 4.0;",
 
-								"vec2 sampleSize = vec2(  1.0 / screenWidth, 1.0 / screenHeight ) * vec2(f);",
+							"vec2 sampleSize = vec2(  1.0 / screenWidth, 1.0 / screenHeight ) * vec2(f);",
 
-								"add += tmp = texture2D( map, uv + vec2(0.111964, 0.993712) * sampleSize );",
-								"if( tmp.b < color.b ) color = tmp;",
+							"add += tmp = texture2D( map, uv + vec2(0.111964, 0.993712) * sampleSize );",
+							"if( tmp.b < color.b ) color = tmp;",
 
-								"add += tmp = texture2D( map, uv + vec2(0.846724, 0.532032) * sampleSize );",
-								"if( tmp.b < color.b ) color = tmp;",
+							"add += tmp = texture2D( map, uv + vec2(0.846724, 0.532032) * sampleSize );",
+							"if( tmp.b < color.b ) color = tmp;",
 
-								"add += tmp = texture2D( map, uv + vec2(0.943883, -0.330279) * sampleSize );",
-								"if( tmp.b < color.b ) color = tmp;",
+							"add += tmp = texture2D( map, uv + vec2(0.943883, -0.330279) * sampleSize );",
+							"if( tmp.b < color.b ) color = tmp;",
 
-								"add += tmp = texture2D( map, uv + vec2(0.330279, -0.943883) * sampleSize );",
-								"if( tmp.b < color.b ) color = tmp;",
+							"add += tmp = texture2D( map, uv + vec2(0.330279, -0.943883) * sampleSize );",
+							"if( tmp.b < color.b ) color = tmp;",
 
-								"add += tmp = texture2D( map, uv + vec2(-0.532032, -0.846724) * sampleSize );",
-								"if( tmp.b < color.b ) color = tmp;",
+							"add += tmp = texture2D( map, uv + vec2(-0.532032, -0.846724) * sampleSize );",
+							"if( tmp.b < color.b ) color = tmp;",
 
-								"add += tmp = texture2D( map, uv + vec2(-0.993712, -0.111964) * sampleSize );",
-								"if( tmp.b < color.b ) color = tmp;",
+							"add += tmp = texture2D( map, uv + vec2(-0.993712, -0.111964) * sampleSize );",
+							"if( tmp.b < color.b ) color = tmp;",
 
-								"add += tmp = texture2D( map, uv + vec2(-0.707107, 0.707107) * sampleSize );",
-								"if( tmp.b < color.b ) color = tmp;",
+							"add += tmp = texture2D( map, uv + vec2(-0.707107, 0.707107) * sampleSize );",
+							"if( tmp.b < color.b ) color = tmp;",
 
-								"color = color * vec4( 2.0 ) - ( add / vec4( 8.0 ) );",
-								"color = color + ( add / vec4(8.0) - color ) * ( vec4(1.0) - vec4(sample_dist * 0.5) );",
+							"color = color * vec4( 2.0 ) - ( add / vec4( 8.0 ) );",
+							"color = color + ( add / vec4(8.0) - color ) * ( vec4(1.0) - vec4(sample_dist * 0.5) );",
 
-								"gl_FragColor = vec4( color.rgb * color.rgb * vec3( 0.95 ) + color.rgb, 1.0 );",
+							"gl_FragColor = vec4( color.rgb * color.rgb * vec3( 0.95 ) + color.rgb, 1.0 );",
 
-							"}"
+						"}"
 
 
-						].join("\n")
+					].join("\n")
 
-				} );
+				};
 
-				effect.quad = new THREE.Mesh( new THREE.PlaneGeometry( SCREEN_WIDTH, SCREEN_HEIGHT ), effect.materialHeat );
-				effect.quad.position.z = -500;
-				effect.scene.addObject( effect.quad );
+				return shader;
 
 			}
 
-			function initPostprocessingBloom( effect ) {
-
-				effect.type = "bloomnoise";
-
-				effect.scene = new THREE.Scene();
-
-				effect.camera = new THREE.OrthoCamera( SCREEN_WIDTH / - 2, SCREEN_WIDTH / 2, SCREEN_HEIGHT / 2, SCREEN_HEIGHT / - 2, -10000, 10000 );
-				effect.camera.position.z = 100;
-
-				var pars = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat };
-
-				effect.rtTexture1 = new THREE.WebGLRenderTarget( SCREEN_WIDTH, SCREEN_HEIGHT, pars );
-				effect.rtTexture2 = new THREE.WebGLRenderTarget( 256, 512, pars );
-				effect.rtTexture3 = new THREE.WebGLRenderTarget( 512, 256, pars );
-
-				var screen_shader = THREE.ShaderExtras[ "screen" ];
-				var screen_uniforms = THREE.UniformsUtils.clone( screen_shader.uniforms );
-
-				screen_uniforms["tDiffuse"].texture = effect.rtTexture3;
-				screen_uniforms["opacity"].value = 0.75;
-
-				effect.materialScreen = new THREE.MeshShaderMaterial( {
-
-					uniforms: screen_uniforms,
-					vertexShader: screen_shader.vertexShader,
-					fragmentShader: screen_shader.fragmentShader,
-					blending: THREE.AdditiveBlending,
-					transparent: true
-
-				} );
-
-				var convolution_shader = THREE.ShaderExtras[ "convolution" ];
-				var convolution_uniforms = THREE.UniformsUtils.clone( convolution_shader.uniforms );
-
-				effect.blurx = new THREE.Vector2( 0.001953125, 0.0 ),
-				effect.blury = new THREE.Vector2( 0.0, 0.001953125 );
-
-				convolution_uniforms["tDiffuse"].texture = effect.rtTexture1;
-				convolution_uniforms["uImageIncrement"].value = effect.blurx;
-				convolution_uniforms["cKernel"].value = THREE.ShaderExtras.buildKernel( 4.0 );
-
-				effect.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.ShaderExtras[ "film" ];
-				var film_uniforms = THREE.UniformsUtils.clone( film_shader.uniforms );
-
-				film_uniforms["tDiffuse"].texture = effect.rtTexture1;
-
-				effect.materialFilm = new THREE.MeshShaderMaterial( { uniforms: film_uniforms, vertexShader: film_shader.vertexShader, fragmentShader: film_shader.fragmentShader } );
-				effect.materialFilm.uniforms.grayscale.value = 0;
-				effect.materialFilm.uniforms.nIntensity.value = 0.5;
-				effect.materialFilm.uniforms.sIntensity.value = 0.5;
-				effect.materialFilm.uniforms.sCount.value = 1448;
-
-				effect.quad = new THREE.Mesh( new THREE.PlaneGeometry( SCREEN_WIDTH, SCREEN_HEIGHT ), effect.materialConvolution );
-				effect.quad.position.z = -500;
-				effect.scene.addObject( effect.quad );
-
-			}
 
 			var j, jl, cm, data, vertices, vertices_tmp, vl, d, vt,
 				time, oldTime, delta;
@@ -591,46 +538,7 @@
 				}
 
 				renderer.clear();
-
-				// BLOOM
-
-				// Render scene into texture
-
-				renderer.render( scene, camera, postprocessing1.rtTexture1, true );
-
-				// Render quad with blured scene into texture (convolution pass 1)
-
-				postprocessing1.quad.materials[ 0 ] = postprocessing1.materialConvolution;
-
-				postprocessing1.materialConvolution.uniforms.tDiffuse.texture = postprocessing1.rtTexture1;
-				postprocessing1.materialConvolution.uniforms.uImageIncrement.value = postprocessing1.blurx;
-
-				renderer.render( postprocessing1.scene, postprocessing1.camera, postprocessing1.rtTexture2, true );
-
-				// Render quad with blured scene into texture (convolution pass 2)
-
-				postprocessing1.materialConvolution.uniforms.tDiffuse.texture = postprocessing1.rtTexture2;
-				postprocessing1.materialConvolution.uniforms.uImageIncrement.value = postprocessing1.blury;
-
-				renderer.render( postprocessing1.scene, postprocessing1.camera, postprocessing1.rtTexture3, true );
-
-				// Render original scene with superimposed blur to texture
-
-				postprocessing1.quad.materials[ 0 ] = postprocessing1.materialScreen;
-
-				renderer.render( postprocessing1.scene, postprocessing1.camera, postprocessing1.rtTexture1, false );
-
-
-				// NOISE + SCANLINES
-
-				postprocessing1.materialFilm.uniforms.time.value += 0.01;
-				postprocessing1.quad.materials[ 0 ] = postprocessing1.materialFilm;
-
-				renderer.render( postprocessing1.scene, postprocessing1.camera, postprocessing2.texture, true );
-
-				// FOCUS
-
-				renderer.render( postprocessing2.scene, postprocessing2.camera );
+				composer.render( 0.01 );
 
             }