Refactored postprocessing out of examples into own set of classes.

Not sure yet about names and location of files.

examples/js/postprocessing/BloomPass.js

@@ -0,0 +1,91 @@
+/**
+ * @author alteredq / http://alteredqualia.com/
+ */
+
+THREE.BloomPass = function( strength, kernelSize, sigma, resolution ) {
+
+	strength = ( strength !== undefined ) ? strength : 1;
+	kernelSize = ( kernelSize !== undefined ) ? kernelSize : 25;
+	sigma = ( sigma !== undefined ) ? sigma : 4.0;
+	resolution = ( resolution !== resolution ) ? resolution : 256;
+
+	// render targets
+
+	var pars = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat };
+
+	this.renderTargetX = new THREE.WebGLRenderTarget( resolution, resolution, pars );
+	this.renderTargetY = new THREE.WebGLRenderTarget( resolution, resolution, pars );
+
+	// screen material
+
+	var screenShader = THREE.ShaderUtils.lib[ "screen" ];
+
+	this.screenUniforms = THREE.UniformsUtils.clone( screenShader.uniforms );
+
+	this.screenUniforms[ "opacity" ].value = strength;
+
+	this.materialScreen = new THREE.MeshShaderMaterial( {
+
+		uniforms: this.screenUniforms,
+		vertexShader: screenShader.vertexShader,
+		fragmentShader: screenShader.fragmentShader,
+		blending: THREE.AdditiveBlending,
+		transparent: true
+
+	} );
+
+	// convolution material
+
+	var convolutionShader = THREE.ShaderUtils.lib[ "convolution" ];
+
+	this.convolutionUniforms = THREE.UniformsUtils.clone( convolutionShader.uniforms );
+
+	this.convolutionUniforms[ "uImageIncrement" ].value = THREE.BloomPass.blurx;
+	this.convolutionUniforms[ "cKernel" ].value = THREE.ShaderUtils.buildKernel( sigma );
+
+	this.materialConvolution = new THREE.MeshShaderMaterial( {
+
+		uniforms: this.convolutionUniforms,
+		vertexShader:   "#define KERNEL_SIZE " + kernelSize + ".0\n" + convolutionShader.vertexShader,
+		fragmentShader: "#define KERNEL_SIZE " + kernelSize + "\n"   + convolutionShader.fragmentShader
+
+	} );
+
+};
+
+THREE.BloomPass.prototype = {
+
+	render: function ( renderer, renderTarget, delta ) {
+
+		// Render quad with blured scene into texture (convolution pass 1)
+
+		THREE.EffectComposer.quad.materials[ 0 ] = this.materialConvolution;
+
+		this.convolutionUniforms[ "tDiffuse" ].texture = renderTarget;
+		this.convolutionUniforms[ "uImageIncrement" ].value = THREE.BloomPass.blurX;
+
+		renderer.render( THREE.EffectComposer.scene, THREE.EffectComposer.camera, this.renderTargetX, true );
+
+		// Render quad with blured scene into texture (convolution pass 2)
+
+		this.convolutionUniforms[ "tDiffuse" ].texture = this.renderTargetX;
+		this.convolutionUniforms[ "uImageIncrement" ].value = THREE.BloomPass.blurY;
+
+		renderer.render( THREE.EffectComposer.scene, THREE.EffectComposer.camera, this.renderTargetY, true );
+
+		// Render original scene with superimposed blur to texture
+
+		THREE.EffectComposer.quad.materials[ 0 ] = this.materialScreen;
+
+		this.screenUniforms[ "tDiffuse" ].texture = this.renderTargetY;
+
+		renderer.render( THREE.EffectComposer.scene, THREE.EffectComposer.camera, renderTarget, false );
+
+	}
+
+};
+
+THREE.BloomPass.blurX = new THREE.Vector2( 0.001953125, 0.0 );
+THREE.BloomPass.blurY = new THREE.Vector2( 0.0, 0.001953125 );
+
+

examples/js/postprocessing/EffectComposer.js

@@ -0,0 +1,77 @@
+/**
+ * @author alteredq / http://alteredqualia.com/
+ */
+
+THREE.EffectComposer = function( renderer, renderTarget ) {
+
+	this.renderer = renderer;
+	this.renderTarget = renderTarget;
+
+	if ( this.renderTarget === undefined ) {
+
+		this.renderTargetParameters = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat, stencilBufer: false };
+		this.renderTarget = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, this.renderTargetParameters );
+
+	}
+
+	this.passes = [];
+
+};
+
+THREE.EffectComposer.prototype = {
+
+	addPass: function ( pass ) {
+
+		this.passes.push( pass );
+
+	},
+
+	render: function ( delta ) {
+
+		var i, il = this.passes.length;
+
+		for ( i = 0; i < il; i ++ ) {
+
+			this.passes[ i ].render( this.renderer, this.renderTarget, delta );
+
+		}
+
+	},
+
+	reset: function () {
+
+		if ( this.renderTargetParameters ) {
+
+			this.renderTarget = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, this.renderTargetParameters );
+
+		}
+
+		THREE.EffectComposer.quad.scale.set( window.innerWidth, window.innerHeight, 1 );
+
+		THREE.EffectComposer.camera.left = window.innerWidth / - 2;
+		THREE.EffectComposer.camera.right = window.innerWidth / 2;
+		THREE.EffectComposer.camera.top = window.innerHeight / 2;
+		THREE.EffectComposer.camera.bottom = window.innerHeight / - 2;
+
+		THREE.EffectComposer.camera.updateProjectionMatrix();
+
+
+	}
+
+};
+
+// shared fullscreen quad scene
+
+THREE.EffectComposer.geometry = new THREE.PlaneGeometry( 1, 1 );
+
+THREE.EffectComposer.quad = new THREE.Mesh( THREE.EffectComposer.geometry, null );
+THREE.EffectComposer.quad.position.z = -100;
+THREE.EffectComposer.quad.scale.set( window.innerWidth, window.innerHeight, 1 );
+
+THREE.EffectComposer.scene = new THREE.Scene();
+THREE.EffectComposer.scene.addObject( THREE.EffectComposer.quad );
+
+// shared ortho camera
+
+THREE.EffectComposer.camera = new THREE.OrthoCamera( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, -10000, 10000 );
+

examples/js/postprocessing/FilmPass.js

@@ -0,0 +1,49 @@
+/**
+ * @author alteredq / http://alteredqualia.com/
+ */
+
+THREE.FilmPass = function( noiseIntensity, scanlinesIntensity, scanlinesCount, grayscale ) {
+
+	var shader = THREE.ShaderUtils.lib[ "film" ];
+
+	this.uniforms = THREE.UniformsUtils.clone( shader.uniforms );
+
+	this.material = new THREE.MeshShaderMaterial( {
+
+		uniforms: this.uniforms,
+		vertexShader: shader.vertexShader,
+		fragmentShader: shader.fragmentShader
+
+	} );
+
+	if ( grayscale !== undefined )	this.uniforms.grayscale.value = grayscale;
+	if ( noiseIntensity !== undefined ) this.uniforms.nIntensity.value = noiseIntensity;
+	if ( scanlinesIntensity !== undefined ) this.uniforms.sIntensity.value = scanlinesIntensity;
+	if ( scanlinesCount !== undefined ) this.uniforms.sCount.value = scanlinesCount;
+
+	this.renderToScreen = false;
+
+};
+
+THREE.FilmPass.prototype = {
+
+	render: function ( renderer, renderTarget, delta ) {
+
+		this.uniforms[ "tDiffuse" ].texture = renderTarget;
+		this.uniforms[ "time" ].value += delta;
+
+		THREE.EffectComposer.quad.materials[ 0 ] = this.material;
+
+		if ( this.renderToScreen ) {
+
+			renderer.render( THREE.EffectComposer.scene, THREE.EffectComposer.camera );
+
+		} else {
+
+			renderer.render( THREE.EffectComposer.scene, THREE.EffectComposer.camera, renderTarget, false );
+
+		}
+
+	}
+
+};

examples/js/postprocessing/RenderPass.js

@@ -0,0 +1,22 @@
+/**
+ * @author alteredq / http://alteredqualia.com/
+ */
+
+THREE.RenderPass = function ( scene, camera ) {
+
+	this.scene = scene;
+	this.camera = camera;
+
+	this.clear = true;
+
+};
+
+THREE.RenderPass.prototype = {
+
+	render: function ( renderer, renderTarget, delta ) {
+
+		renderer.render( this.scene, this.camera, renderTarget, this.clear );
+
+	}
+
+};

examples/js/postprocessing/ScreenPass.js

@@ -0,0 +1,34 @@
+/**
+ * @author alteredq / http://alteredqualia.com/
+ */
+
+THREE.ScreenPass = function( opacity ) {
+
+	var shader = THREE.ShaderUtils.lib[ "screen" ];
+
+	this.uniforms = THREE.UniformsUtils.clone( shader.uniforms );
+	this.uniforms[ "opacity" ].value = ( opacity !== undefined ) ? opacity : 1.0;
+
+	this.material = new THREE.MeshShaderMaterial( {
+
+		uniforms: this.uniforms,
+		vertexShader: shader.vertexShader,
+		fragmentShader: shader.fragmentShader
+
+	} );
+
+};
+
+THREE.ScreenPass.prototype = {
+
+	render: function ( renderer, renderTarget, delta ) {
+
+		this.uniforms[ "tDiffuse" ].texture = renderTarget;
+
+		THREE.EffectComposer.quad.materials[ 0 ] = this.material;
+
+		renderer.render( THREE.EffectComposer.scene, THREE.EffectComposer.camera );
+
+	}
+
+};

examples/webgl_flycamera_earth.html

@@ -32,6 +32,11 @@
 	</style>
 
 	<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/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>
@@ -59,19 +64,13 @@
 	var SCREEN_HEIGHT = window.innerHeight - MARGIN * 2;
 	var SCREEN_WIDTH  = window.innerWidth;
 
-	var ENABLE_LENSFLARES = false;
-
-	var lensFlare, lensFlareRotate;
-
 	var container, stats;
 	var camera, scene, sceneCube, renderer;
 	var geometry, meshPlanet, meshClouds, meshMoon;
 	var dirLight, pointLight, ambientLight;
 	var lastUpdate = new Date().getTime();
 
-	var t, d, dPlanet, dMoon, dMoonVec = new THREE.Vector3();
-
-	var postprocessing = { enabled : true, bloom: false };
+	var delta, d, dPlanet, dMoon, dMoonVec = new THREE.Vector3();
 
 	init();
 	animate();
@@ -105,10 +104,6 @@
         dirLight.position.normalize();
         scene.addLight( dirLight );
 
-        pointLight = new THREE.PointLight( 0x000000 );
-        pointLight.position.set( -5000, 0, 5000 );
-        //scene.addLight( pointLight );
-
 		ambientLight = new THREE.AmbientLight( 0x000000 );
 		scene.addLight( ambientLight );
 
@@ -153,7 +148,7 @@
 
 		// clouds
 
-        var materialClouds = new THREE.MeshLambertMaterial( { color: 0xffffff, map: cloudsTexture, transparent:true } );
+        var materialClouds = new THREE.MeshLambertMaterial( { color: 0xffffff, map: cloudsTexture, transparent: true } );
 
 		meshClouds = new THREE.Mesh( geometry, materialClouds );
 		meshClouds.scale.set( cloudsScale, cloudsScale, cloudsScale );
@@ -174,7 +169,7 @@
 		var i, r = radius,
 			starsGeometry = [ new THREE.Geometry(), new THREE.Geometry() ];
 
-		for ( i = 0; i < 250; ++i ) {
+		for ( i = 0; i < 250; i ++ ) {
 
 			vector1 = new THREE.Vector3( Math.random() * 2 - 1, Math.random() * 2 - 1, Math.random() * 2 - 1 );
 			vector1.multiplyScalar( r );
@@ -201,9 +196,10 @@
 							   new THREE.ParticleBasicMaterial( { color: 0x1a1a1a, size: 1, sizeAttenuation: false } )
 							];
 
-		for ( i = 10; i < 30; i ++) {
+		for ( i = 10; i < 30; i ++ ) {
 
 			stars = new THREE.ParticleSystem( starsGeometry[ i % 2 ], starsMaterials[ i % 6 ] );
+
 			stars.rotation.x = Math.random() * 6;
 			stars.rotation.y = Math.random() * 6;
 			stars.rotation.z = Math.random() * 6;
@@ -218,38 +214,10 @@
 
 		}
 
-		if ( ENABLE_LENSFLARES ) {
-
-			lensFlare = new THREE.LensFlare( THREE.ImageUtils.loadTexture( "textures/lensflare/lensflare0.png" ), 700, 0.0, THREE.AdditiveBlending );
-
-			lensFlare.add( THREE.ImageUtils.loadTexture( "textures/lensflare/lensflare2.png" ), 512, 0.0, THREE.AdditiveBlending );
-			lensFlare.add( lensFlare.lensFlares[ 1 ].texture, 512, 0.0, THREE.AdditiveBlending );
-			lensFlare.add( lensFlare.lensFlares[ 1 ].texture, 512, 0.0, THREE.AdditiveBlending );
-
-			lensFlare.add( THREE.ImageUtils.loadTexture( "textures/lensflare/lensflare3.png" ), 60, 0.6, THREE.AdditiveBlending );
-			lensFlare.add( lensFlare.lensFlares[ 4 ].texture, 70, 0.7, THREE.AdditiveBlending );
-			lensFlare.add( lensFlare.lensFlares[ 4 ].texture, 120, 0.9, THREE.AdditiveBlending );
-			lensFlare.add( lensFlare.lensFlares[ 4 ].texture, 70, 1.0, THREE.AdditiveBlending );
-
-			lensFlare.customUpdateCallback = lensFlareUpdateCallback;
-			lensFlare.position.set( 0, 0, -99000 );
-
-
-			lensFlareRotate = new THREE.Object3D();
-			lensFlareRotate.addChild( lensFlare );
-
-			scene.addChild( lensFlareRotate );
-
-			lensFlareRotate.rotation.x = Math.PI;
-			lensFlareRotate.rotation.y = Math.PI / 2;
-
-		}
-
         renderer = new THREE.WebGLRenderer( { clearAlpha: 1, clearColor: 0x000000 } );
         renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
         renderer.sortObjects = false;
 
-		initPostprocessing();
 		renderer.autoClear = false;
 
         container.appendChild( renderer.domElement );
@@ -258,10 +226,22 @@
         stats.domElement.style.position = 'absolute';
         stats.domElement.style.top = '0px';
         stats.domElement.style.zIndex = 100;
-        //container.appendChild( stats.domElement );
+        container.appendChild( stats.domElement );
 
 		window.addEventListener( 'resize', onWindowResize, false );
 
+		// postprocessing
+
+		var renderModel = new THREE.RenderPass( scene, camera );
+		var effectFilm = new THREE.FilmPass( 0.35, 0.75, 2048, false );
+
+		effectFilm.renderToScreen = true;
+
+		composer = new THREE.EffectComposer( renderer );
+
+		composer.addPass( renderModel );
+		composer.addPass( effectFilm );
+
 	};
 
 	function onWindowResize( event ) {
@@ -274,106 +254,16 @@
 		camera.aspect = SCREEN_WIDTH / SCREEN_HEIGHT;
 		camera.updateProjectionMatrix();
 
-		initPostprocessing();
+		composer.reset();
 
 	}
 
-	function initPostprocessing() {
-
-		postprocessing.scene = new THREE.Scene();
-
-		postprocessing.camera = new THREE.OrthoCamera( SCREEN_WIDTH / - 2, SCREEN_WIDTH / 2,  SCREEN_HEIGHT / 2, SCREEN_HEIGHT / - 2, -10000, 10000 );
-		postprocessing.camera.position.z = 100;
-
-		var pars = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBAFormat };
-		postprocessing.rtTexture1 = new THREE.WebGLRenderTarget( SCREEN_WIDTH, SCREEN_HEIGHT, 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.35;
-		postprocessing.materialFilm.uniforms.sIntensity.value = 0.75;
-		postprocessing.materialFilm.uniforms.sCount.value = 2048;
-
-		postprocessing.quad = new THREE.Mesh( new THREE.PlaneGeometry( SCREEN_WIDTH, SCREEN_HEIGHT ), postprocessing.materialConvolution );
-		postprocessing.quad.position.z = - 500;
-		postprocessing.scene.addObject( postprocessing.quad );
-
-	};
-
 	function cap_bottom( val, bottom ) {
 
 		return val < bottom ? bottom : val;
 
 	};
 
-	function lensFlareUpdateCallback( object ) {
-
-		var f, fl = object.lensFlares.length;
-		var flare;
-		var vecX = -object.positionScreen.x * 2;
-		var vecY = -object.positionScreen.y * 2;
-
-
-		for( f = 0; f < fl; f++ ) {
-
-			   flare = object.lensFlares[ f ];
-
-			   flare.x = object.positionScreen.x + vecX * flare.distance;
-			   flare.y = object.positionScreen.y + vecY * flare.distance;
-
-			   flare.rotation = 0;
-
-			   flare.opacity = cap_bottom( 1 - 0.01 * d / radius, 0 );
-
-		}
-
-		// hard coded stuff
-
-		object.lensFlares[ 2 ].y += 0.025;
-		object.lensFlares[ 3 ].rotation = object.positionScreen.x * 0.5 + 45 * Math.PI / 180;
-
-	};
 
 	function animate() {
 
@@ -395,10 +285,10 @@
 
 		// rotate the planet and clouds
 
-		t = this.getFrametime();
+		delta = this.getFrametime();
 
-        meshPlanet.rotation.y += rotationSpeed * t;
-		meshClouds.rotation.y += 1.25 * rotationSpeed * t;
+        meshPlanet.rotation.y += rotationSpeed * delta;
+		meshClouds.rotation.y += 1.25 * rotationSpeed * delta;
 
 		// slow down as we approach the surface
 
@@ -419,63 +309,8 @@
 
         camera.movementSpeed = 0.33 * d;
 
-		if ( ENABLE_LENSFLARES ) {
-
-			lensFlareRotate.position.set( camera.position.x, camera.position.y, camera.position.z );
-
-		}
-
-		if ( postprocessing.enabled ) {
-
-			renderer.clear();
-
-			// Render scene into texture
-
-			renderer.render( scene, camera, postprocessing.rtTexture1, true );
-
-			if ( postprocessing.bloom ) {
-
-				// 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 = 0.75;
-
-				renderer.render( postprocessing.scene, postprocessing.camera, postprocessing.rtTexture1, false );
-
-			}
-
-			// Render to screen
-
-			postprocessing.materialFilm.uniforms.time.value += 0.01;
-			postprocessing.quad.materials = [ postprocessing.materialFilm ];
-
-			postprocessing.materialScreen.uniforms.tDiffuse.texture = postprocessing.rtTexture1;
-			renderer.render( postprocessing.scene, postprocessing.camera );
-
-		} else {
-
-			renderer.clear();
-			renderer.render( scene, camera );
-
-		}
+		renderer.clear();
+		composer.render( delta );
 
 	};
 

examples/webgl_lines_colors.html

@@ -45,6 +45,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/ScreenPass.js"></script>
+		<script type="text/javascript" src="js/postprocessing/BloomPass.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>
@@ -58,10 +63,8 @@
 			windowHalfX = window.innerWidth / 2,
 			windowHalfY = window.innerHeight / 2,
 
-			camera, scene, renderer, material;
+			camera, scene, renderer, material, composer;
 
-			var postprocessing = { enabled: true };
-			
 			init();
 			animate();
 
@@ -69,8 +72,8 @@
 
 				var i, container;
 
-				container = document.createElement('div');
-				document.body.appendChild(container);
+				container = document.createElement( 'div' );
+				document.body.appendChild( container );
 
 				camera = new THREE.Camera( 33, window.innerWidth / window.innerHeight, 1, 10000 );
 				camera.position.z = 700;
@@ -79,6 +82,7 @@
 
 				renderer = new THREE.WebGLRenderer( { clearColor: 0x000000, clearAlpha: 1, antialias: false } );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.autoClear = false;
 
 				container.appendChild( renderer.domElement );
 
@@ -132,19 +136,30 @@
 
 				}
 
-				
+				//
+
 				stats = new Stats();
 				stats.domElement.style.position = 'absolute';
 				stats.domElement.style.top = '0px';
-				//container.appendChild(stats.domElement);
+				//container.appendChild( stats.domElement );
 
+				//
 
 				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
 				document.addEventListener( 'touchmove', onDocumentTouchMove, false );
 
-				initPostprocessing();
-				renderer.autoClear = false;
+				//
+
+				var renderModel = new THREE.RenderPass( scene, camera );
+				var effectBloom = new THREE.BloomPass( 1.3 );
+				var effectScreen = new THREE.ScreenPass();
+
+				composer = new THREE.EffectComposer( renderer );
+
+				composer.addPass( renderModel );
+				composer.addPass( effectBloom );
+				composer.addPass( effectScreen );
 
 			}
 
@@ -153,7 +168,7 @@
 
 			function hilbert3D( center, side, iterations, v0, v1, v2, v3, v4, v5, v6, v7 ) {
 
-				var half = side/2,
+				var half = side / 2,
 
 					vec_s = [
 
@@ -192,63 +207,11 @@
 
 			//
 
-			function initPostprocessing() {
-
-				postprocessing.scene = new THREE.Scene();
-
-				postprocessing.camera = new THREE.Camera();
-				postprocessing.camera.projectionMatrix = THREE.Matrix4.makeOrtho( 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
-
-				} );
-
-				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) {
+			function onDocumentMouseMove( event ) {
 
 				mouseX = event.clientX - windowHalfX;
 				mouseY = event.clientY - windowHalfY;
+
 			}
 
 			function onDocumentTouchStart( event ) {
@@ -259,7 +222,9 @@
 
 					mouseX = event.touches[ 0 ].pageX - windowHalfX;
 					mouseY = event.touches[ 0 ].pageY - windowHalfY;
+
 				}
+
 			}
 
 			function onDocumentTouchMove( event ) {
@@ -271,6 +236,7 @@
 					mouseX = event.touches[ 0 ].pageX - windowHalfX;
 					mouseY = event.touches[ 0 ].pageY - windowHalfY;
 				}
+
 			}
 
 			//
@@ -278,7 +244,6 @@
 			function animate() {
 
 				requestAnimationFrame( animate );
-
 				render();
 
 			}
@@ -290,60 +255,17 @@
 
 				var time = new Date().getTime() * 0.0005;
 
-				for( var i = 0; i<scene.objects.length; i++ ) {
+				for( var i = 0; i < scene.objects.length; i ++ ) {
 
-					scene.objects[i].rotation.y = time * ( i % 2 ? 1 : -1);
+					scene.objects[ i ].rotation.y = time * ( i % 2 ? 1 : -1 );
 
 				}
 
-				if ( postprocessing.enabled ) {
-
-					renderer.clear();
-
-					// 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.clear();
-					renderer.render( scene, camera );
-
-				}
+				renderer.clear();
+				composer.render();
 
 			}
 
-
 		</script>
 	</body>
 </html>

examples/webgl_postprocessing.html

@@ -25,7 +25,6 @@
 		    }
 
 		    a { color: red; }
-
 		</style>
 	</head>
 	<body>
@@ -38,6 +37,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>
@@ -45,19 +49,22 @@
 		<!-- Time modulated procedural color fragment shader -->
 
 		<script id="fs-colors" type="x-shader/x-fragment">
+
 			varying vec2 vUv;
 			uniform float time;
 
-			void main(void) {
+			void main() {
 
 				gl_FragColor = vec4( time, vUv.x, vUv.y, 1.0 );
 
 			}
+
 		</script>
 
 		<!-- Generic vertex shader -->
 
 		<script id="vs-generic" type="x-shader/x-vertex">
+
 			varying vec2 vUv;
 
 			void main() {
@@ -66,6 +73,7 @@
 				gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
 
 			}
+
 		</script>
 
 
@@ -75,7 +83,9 @@
 
 			var container, stats;
 
-			var cameraOrtho, cameraPerspective, sceneModel, sceneScreen, sceneBG, renderer, mesh, directionalLight;
+			var composer;
+
+			var cameraOrtho, cameraPerspective, sceneModel, sceneBG, renderer, mesh, directionalLight;
 
 			var windowHalfX = window.innerWidth / 2;
 			var windowHalfY = window.innerHeight / 2;
@@ -97,20 +107,22 @@
 				cameraPerspective = new THREE.Camera( 50, window.innerWidth / window.innerHeight, 1, 10000 );
 				cameraPerspective.position.z = 900;
 
+				//
+
 				sceneModel = new THREE.Scene();
-				sceneScreen = new THREE.Scene();
-				sceneBG = new THREE.Scene();
 
 				directionalLight = new THREE.DirectionalLight( 0xffffff );
 				directionalLight.position.set( 0, 0, 1 );
 				directionalLight.position.normalize();
 				sceneModel.addLight( directionalLight );
 
-				var pars1 = { minFilter: THREE.LinearFilter, magFilter: THREE.NearestFilter, format: THREE.RGBFormat },
-					pars2 = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter,  format: THREE.RGBFormat };
-				rtTexture1 = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, pars1 );
-				rtTexture2 = new THREE.WebGLRenderTarget( 256, 512, pars2 );
-				rtTexture3 = new THREE.WebGLRenderTarget( 512, 256, pars2 );
+				loader = new THREE.JSONLoader( true );
+				document.body.appendChild( loader.statusDomElement );
+				loader.load( { model: "obj/leeperrysmith/LeePerrySmith.js", callback: function( geometry ) { createMesh( geometry, sceneModel, 100 ) } } );
+
+				//
+
+				sceneBG = new THREE.Scene();
 
 				materialColor = new THREE.MeshShaderMaterial( {
 
@@ -121,70 +133,13 @@
 
 				} );
 
-				var screen_shader = THREE.ShaderUtils.lib[ "screen" ];
-				var screen_uniforms = THREE.UniformsUtils.clone( screen_shader.uniforms );
-
-				screen_uniforms[ "tDiffuse" ].texture = rtTexture1;
-				screen_uniforms[ "opacity" ].value = 0.4;
-
-				materialScreen = new THREE.MeshShaderMaterial( {
-
-					uniforms: screen_uniforms,
-					vertexShader: screen_shader.vertexShader,
-					fragmentShader: screen_shader.fragmentShader,
-					blending: THREE.AdditiveBlending,
-					transparent: true
-
-				} );
-
-				var film_shader = THREE.ShaderUtils.lib["film"];
-				var film_uniforms = THREE.UniformsUtils.clone( film_shader.uniforms );
-
-				film_uniforms[ "tDiffuse" ].texture = rtTexture1;
-				film_uniforms[ "nIntensity" ].value = 0.25;
-				film_uniforms[ "sIntensity" ].value = 0.5;
-
-				materialFilm = new THREE.MeshShaderMaterial( {
-
-					uniforms: film_uniforms,
-					vertexShader: film_shader.vertexShader,
-					fragmentShader: film_shader.fragmentShader
-
-				} );
-
-				var increment = 0.001953125;
-
-				blurx = new THREE.Vector2( increment, 0.0 ),
-				blury = new THREE.Vector2( 0.0, increment );
-
-				var convolution_shader = THREE.ShaderUtils.lib[ "convolution" ];
-				var convolution_uniforms = THREE.UniformsUtils.clone( convolution_shader.uniforms );
-
-				convolution_uniforms[ "tDiffuse" ].texture = rtTexture1;
-				convolution_uniforms[ "uImageIncrement" ].value = blurx;
-				convolution_uniforms[ "cKernel" ].value = THREE.ShaderUtils.buildKernel( 4.0 );
-
-				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 plane = new THREE.PlaneGeometry( window.innerWidth, window.innerHeight );
 
 				quadBG = new THREE.Mesh( plane, materialColor );
 				quadBG.position.z = -500;
 				sceneBG.addObject( quadBG );
 
-				loader = new THREE.JSONLoader( true );
-				document.body.appendChild( loader.statusDomElement );
-				loader.load( { model: "obj/leeperrysmith/LeePerrySmith.js", callback: function( geometry ) { createMesh( geometry, sceneModel, 100 ) } } );
-
-				quadScreen = new THREE.Mesh( plane, materialConvolution );
-				quadScreen.position.z = -100;
-				sceneScreen.addObject( quadScreen );
+				//
 
 				renderer = new THREE.WebGLRenderer( { antialias: false } );
 				renderer.setSize( window.innerWidth, window.innerHeight );
@@ -195,7 +150,24 @@
 				stats = new Stats();
 				stats.domElement.style.position = 'absolute';
 				stats.domElement.style.top = '0px';
-				//container.appendChild( stats.domElement );
+				container.appendChild( stats.domElement );
+
+				//
+
+				var renderBackground = new THREE.RenderPass( sceneBG, cameraOrtho );
+				var renderModel = new THREE.RenderPass( sceneModel, cameraPerspective );
+				var effectBloom = new THREE.BloomPass( 1.0 );
+				var effectFilm = new THREE.FilmPass( 0.25, 0.5 );
+
+				renderModel.clear = false;
+				effectFilm.renderToScreen = true;
+
+				composer = new THREE.EffectComposer( renderer );
+
+				composer.addPass( renderBackground );
+				composer.addPass( renderModel );
+				composer.addPass( effectBloom );
+				composer.addPass( effectFilm );
 
 			}
 
@@ -264,51 +236,13 @@
 
 				}
 
-				materialColor.uniforms.time.value += delta/2;
-				materialFilm.uniforms.time.value += delta;
+				materialColor.uniforms.time.value += delta / 2;
 
 				renderer.clear();
-
-				// Render scene into texture
-
-				// background
-
-				renderer.render( sceneBG, cameraOrtho, rtTexture1, true );
-
-				// model
-
-				renderer.render( sceneModel, cameraPerspective, rtTexture1, false );
-
-				// Render quad with blured scene into texture (convolution pass 1)
-
-				quadScreen.materials[ 0 ] = materialConvolution;
-				materialConvolution.uniforms.tDiffuse.texture = rtTexture1;
-				materialConvolution.uniforms.uImageIncrement.value = blurx;
-				renderer.render( sceneScreen, cameraOrtho, rtTexture2, true );
-
-				// Render quad with blured scene into texture (convolution pass 2)
-
-				materialConvolution.uniforms.tDiffuse.texture = rtTexture2;
-				materialConvolution.uniforms.uImageIncrement.value = blury;
-				renderer.render( sceneScreen, cameraOrtho, rtTexture3, true );
-
-				// Render original scene with superimposed blur into texture
-
-				quadScreen.materials[ 0 ] = materialScreen;
-
-				materialScreen.uniforms.tDiffuse.texture = rtTexture3;
-				materialScreen.uniforms.opacity.value = 1.0;
-				renderer.render( sceneScreen, cameraOrtho, rtTexture1, false );
-
-				// Render final scene to the screen with film shader
-
-				materialFilm.uniforms.tDiffuse.texture = rtTexture1;
-				quadScreen.materials[ 0 ] = materialFilm;
-				renderer.render( sceneScreen, cameraOrtho );
+				composer.render( delta );
 
 			}
 
-
 		</script>
 	</body>
 </html>

examples/webgl_ribbons.html

@@ -33,6 +33,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/ScreenPass.js"></script>
+		<script type="text/javascript" src="js/postprocessing/BloomPass.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>
@@ -57,6 +62,8 @@
 
 			var postprocessing = { enabled  : true };
 
+			var composer;
+
 			init();
 			animate();
 
@@ -71,12 +78,6 @@
 				scene = new THREE.Scene();
 				scene.fog = new THREE.FogExp2( 0x000000, 0.0016 );
 
-				renderer = new THREE.WebGLRenderer( { antialias: false } );
-				renderer.setSize( window.innerWidth, window.innerHeight );
-				container.appendChild( renderer.domElement );
-
-				renderer.setClearColor( scene.fog.color, 1 );
-
 				geometry = new THREE.Geometry();
 				geometry2 = new THREE.Geometry();
 
@@ -99,12 +100,11 @@
 					vector = new THREE.Vector3( x, y, z );
 					geometry.vertices.push( new THREE.Vertex( vector ) );
 
-
 					vector = new THREE.Vector3( x, y, z );
 					geometry2.vertices.push( new THREE.Vertex( vector ) );
 
-					h = i2%2 ? 1 : 0.15;
-					if( i2%4 <= 2 ) h -= 0.15;
+					h = i2 % 2 ? 1 : 0.15;
+					if( i2 % 4 <= 2 ) h -= 0.15;
 
 					color = new THREE.Color( 0xffffff );
 					color.setHSV( 0.1 , 0, h );
@@ -116,22 +116,17 @@
 				var tmpRot = new THREE.Matrix4();
 				tmpRot.setRotationAxis( new THREE.Vector3( 1, 0, 0 ), 1.57 );
 
-				var material_base = new THREE.MeshBasicMaterial( { color:0xffffff, vertexColors:true } );
-
-				renderer.initMaterial( material_base, scene.lights, scene.fog );
-
 				xgrid = 34;
 				ygrid = 15;
 				nribbons = xgrid * ygrid;
 
 				c = 0;
-				for ( i = 0; i < xgrid; i++ )
-				for ( j = 0; j < ygrid; j++ ) {
+				for ( i = 0; i < xgrid; i ++ )
+				for ( j = 0; j < ygrid; j ++ ) {
 
-					materials[c] = new THREE.MeshBasicMaterial( { color:0xffffff, vertexColors:true } );
-					//materials[c].program = material_base.program;
+					materials[ c ] = new THREE.MeshBasicMaterial( { color: 0xffffff, vertexColors: true } );
 
-					ribbon = new THREE.Ribbon( i % 2 ? geometry : geometry2, materials[c] );
+					ribbon = new THREE.Ribbon( i % 2 ? geometry : geometry2, materials[ c ] );
 					ribbon.rotation.x = 0;
 					ribbon.rotation.y = 1.57;
 					ribbon.rotation.z = 3.14;
@@ -141,7 +136,7 @@
 					z = 0;
 					ribbon.position.set( x, y, z );
 
-					materials[c].color.setHSV( i/xgrid, 0.3 +  0.7*j/ygrid, 1 );
+					materials[c].color.setHSV( i / xgrid, 0.3 +  0.7 * j / ygrid, 1 );
 
 					ribbon.doubleSided = true;
 					ribbon.matrixAutoUpdate = false;
@@ -171,24 +166,46 @@
 					ribbons.push( ribbon );
 					scene.addObject( ribbon );
 
-					c++;
+					c ++;
 
 				}
 
 				scene.matrixAutoUpdate = false;
 
-				initPostprocessing();
+				//
+
+				renderer = new THREE.WebGLRenderer( { antialias: false } );
+				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.autoClear = false;
+				renderer.setClearColor( scene.fog.color, 1 );
+
+				container.appendChild( renderer.domElement );
+
+				//
 
 				stats = new Stats();
 				stats.domElement.style.position = 'absolute';
 				stats.domElement.style.top = '0px';
 				container.appendChild( stats.domElement );
 
+				//
+
 				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
 				document.addEventListener( 'touchmove', onDocumentTouchMove, false );
 
+				//
+
+				var renderModel = new THREE.RenderPass( scene, camera );
+				var effectBloom = new THREE.BloomPass( 1.0 );
+				var effectScreen = new THREE.ScreenPass();
+
+				composer = new THREE.EffectComposer( renderer );
+
+				composer.addPass( renderModel );
+				composer.addPass( effectBloom );
+				composer.addPass( effectScreen );
+
 			}
 
 			function onDocumentMouseMove( event ) {
@@ -223,58 +240,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
-
-				} );
-
-				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() {
@@ -293,73 +258,30 @@
 				camera.position.x += ( mouseX - camera.position.x ) * 0.036;
 				camera.position.y += ( - (mouseY) - camera.position.y ) * 0.036;
 
-				for ( i = -n; i < n; i++ ) {
+				for ( i = -n; i < n; i ++ ) {
 
 					i2 = i + n;
 
 					z  =  10 * Math.sin( i2 * 0.1 + time*30 );
 					z2 =  20 * Math.cos( Math.sin( i2 * 0.1 + time * 20 ) );
 
-					geometry.vertices[i2].position.z = z;
-					geometry2.vertices[i2].position.z = z2;
+					geometry.vertices[ i2 ].position.z = z;
+					geometry2.vertices[ i2 ].position.z = z2;
 
 				}
 
 				geometry.__dirtyVertices = true;
 				geometry2.__dirtyVertices = true;
 
-
 				for( i = 0; i < nribbons; i++ ) {
 
-					h = ( 360 * ( i/nribbons + time ) % 360 ) / 360;
-					materials[i].color.setHSV( h, 0.5+0.5*(i%20/20), 1 );
+					h = ( 360 * ( i / nribbons + time ) % 360 ) / 360;
+					materials[ i ].color.setHSV( h, 0.5 + 0.5 * ( i % 20 / 20 ), 1 );
 
 				}
 
-				if ( postprocessing.enabled ) {
-
-					renderer.clear();
-
-					// Render scene into texture
-
-					renderer.render( scene, camera, postprocessing.rtTexture1, true );
-
-					// 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;
-					postprocessing.materialScreen.uniforms.opacity.value = 1.2;
-
-					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.clear();
-					renderer.render( scene, camera );
-
-				}
+				renderer.clear();
+				composer.render( 0.1 );
 
 			}
 

examples/webgl_shader_lava.html

@@ -37,6 +37,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>
@@ -86,6 +91,7 @@
 				gl_FragColor = mix( gl_FragColor, vec4( fogColor, gl_FragColor.w ), fogFactor );
 
 			}
+
 		</script>
 
 		<script id="vertexShader" type="x-shader/x-vertex">
@@ -112,7 +118,7 @@
 
 			var start_time;
 
-			var camera, scene, renderer;
+			var camera, scene, renderer, composer;
 
 			var uniforms, material, mesh;
 
@@ -122,8 +128,6 @@
 			var windowHalfX = window.innerWidth / 2;
 			var windowHalfY = window.innerHeight / 2;
 
-			var postprocessing = { enabled : true };
-
 			init();
 			animate();
 
@@ -169,18 +173,35 @@
 				mesh.rotation.x = 0.3;
 				scene.addObject( mesh );
 
+				//
 
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				container.appendChild( renderer.domElement );
-
-				initPostprocessing();
 				renderer.autoClear = false;
 
+				//
+
 				stats = new Stats();
 				stats.domElement.style.position = 'absolute';
 				stats.domElement.style.top = '0px';
 				//container.appendChild( stats.domElement );
 
+				//
+
+				var renderModel = new THREE.RenderPass( scene, camera );
+				var effectBloom = new THREE.BloomPass( 1.25 );
+				var effectFilm = new THREE.FilmPass( 0.35, 0.95, 2048, false );
+
+				effectFilm.renderToScreen = true;
+
+				composer = new THREE.EffectComposer( renderer );
+
+				composer.addPass( renderModel );
+				composer.addPass( effectBloom );
+				composer.addPass( effectFilm );
+
+				//
+
 				onWindowResize();
 
 				window.addEventListener( 'resize', onWindowResize, false );
@@ -197,68 +218,7 @@
 				camera.aspect = window.innerWidth / window.innerHeight;
 				camera.updateProjectionMatrix();
 
-			}
-
-			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.35;
-				postprocessing.materialFilm.uniforms.sIntensity.value = 0.95;
-				postprocessing.materialFilm.uniforms.sCount.value = 2048;
-
-				postprocessing.quad = new THREE.Mesh( new THREE.PlaneGeometry( window.innerWidth, window.innerHeight ), postprocessing.materialConvolution );
-				postprocessing.quad.position.z = - 500;
-				postprocessing.scene.addObject( postprocessing.quad );
+				composer.reset();
 
 			}
 
@@ -280,53 +240,8 @@
 				mesh.rotation.y += 0.00125;
 				mesh.rotation.x += 0.005;
 
-				if ( postprocessing.enabled ) {
-
-					renderer.clear();
-
-					// Render scene into texture
-
-					renderer.render( scene, camera, postprocessing.rtTexture1, true );
-
-					// 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;
-					postprocessing.materialScreen.uniforms.opacity.value = 1.25;
-
-					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;
-
-					postprocessing.materialScreen.uniforms.tDiffuse.texture = postprocessing.rtTexture1;
-					renderer.render( postprocessing.scene, postprocessing.camera );
-
-				} else {
-
-					renderer.clear();
-					renderer.render( scene, camera );
-
-				}
+				renderer.clear();
+				composer.render( 0.01 );
 
 			}