Added generic ShaderPass. Removed SepiaPass, ScreenPass, VignettePass. Added bleachbypass shader. Simplified multi-composer pipeline in postprocessing example.

examples/js/postprocessing/SepiaPass.js → examples/js/postprocessing/ShaderPass.js

@@ -2,12 +2,11 @@
  * @author alteredq / http://alteredqualia.com/
  */
 
-THREE.SepiaPass = function( amount ) {
+THREE.ShaderPass = function( shader, textureID ) {
 
-	var shader = THREE.ShaderUtils.lib[ "sepia" ];
+	this.textureID = ( textureID !== undefined ) ? textureID : "tDiffuse";
 
 	this.uniforms = THREE.UniformsUtils.clone( shader.uniforms );
-	this.uniforms[ "amount" ].value = ( amount !== undefined ) ? amount : 1.0;
 
 	this.material = new THREE.MeshShaderMaterial( {
 
@@ -21,11 +20,11 @@ THREE.SepiaPass = function( amount ) {
 
 };
 
-THREE.SepiaPass.prototype = {
+THREE.ShaderPass.prototype = {
 
 	render: function ( renderer, renderTarget, delta ) {
 
-		this.uniforms[ "tDiffuse" ].texture = renderTarget;
+		this.uniforms[ this.textureID ].texture = renderTarget;
 
 		THREE.EffectComposer.quad.materials[ 0 ] = this.material;
 

examples/js/postprocessing/ScreenPass.js → examples/js/postprocessing/TexturePass.js

@@ -2,12 +2,14 @@
  * @author alteredq / http://alteredqualia.com/
  */
 
-THREE.ScreenPass = function( opacity ) {
+THREE.TexturePass = function( texture, opacity ) {
 
 	var shader = THREE.ShaderUtils.lib[ "screen" ];
 
 	this.uniforms = THREE.UniformsUtils.clone( shader.uniforms );
+
 	this.uniforms[ "opacity" ].value = ( opacity !== undefined ) ? opacity : 1.0;
+	this.uniforms[ "tDiffuse" ].texture = texture;
 
 	this.material = new THREE.MeshShaderMaterial( {
 
@@ -19,15 +21,13 @@ THREE.ScreenPass = function( opacity ) {
 
 };
 
-THREE.ScreenPass.prototype = {
+THREE.TexturePass.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 );
+		renderer.render( THREE.EffectComposer.scene, THREE.EffectComposer.camera, renderTarget );
 
 	}
 

examples/js/postprocessing/VignettePass.js

@@ -1,46 +0,0 @@
-/**
- * @author alteredq / http://alteredqualia.com/
- */
-
-THREE.VignettePass = function( offset, darkness ) {
-
-	var shader = THREE.ShaderUtils.lib[ "vignette" ];
-
-	this.uniforms = THREE.UniformsUtils.clone( shader.uniforms );
-
-	if ( offset !== undefined )	this.uniforms[ "offset"].value = offset;
-	if ( darkness !== undefined ) this.uniforms[ "darkness"].value = darkness;
-
-	this.material = new THREE.MeshShaderMaterial( {
-
-		uniforms: this.uniforms,
-		vertexShader: shader.vertexShader,
-		fragmentShader: shader.fragmentShader
-
-	} );
-
-	this.renderToScreen = false;
-
-};
-
-THREE.VignettePass.prototype = {
-
-	render: function ( renderer, renderTarget, delta ) {
-
-		this.uniforms[ "tDiffuse" ].texture = renderTarget;
-
-		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/webgl_lines_colors.html

@@ -47,7 +47,7 @@
 
 		<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/ShaderPass.js"></script>
 		<script type="text/javascript" src="js/postprocessing/BloomPass.js"></script>
 
 		<script type="text/javascript" src="js/Detector.js"></script>
@@ -153,7 +153,9 @@
 
 				var renderModel = new THREE.RenderPass( scene, camera );
 				var effectBloom = new THREE.BloomPass( 1.3 );
-				var effectScreen = new THREE.ScreenPass();
+				var effectScreen = new THREE.ShaderPass( THREE.ShaderUtils.lib[ "screen" ] );
+
+				effectScreen.renderToScreen = true;
 
 				composer = new THREE.EffectComposer( renderer );
 

examples/webgl_postprocessing.html

@@ -11,7 +11,7 @@
 			text-align:center;
 			font-weight: bold;
 
-			background-color: #fff;
+			background-color: #000;
 			margin: 0px;
 			overflow: hidden;
 		    }
@@ -20,7 +20,7 @@
 			color:#fff;
 			background-color: rgba( 0, 0, 0, 0.5 );
 			position: relative;
-			margin: 0 auto -2em;
+			margin: 0 auto -2.1em;
 			top: 0px;
 			width: 550px;
 			padding: 5px;
@@ -45,10 +45,9 @@
 		<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/postprocessing/SepiaPass.js"></script>
 		<script type="text/javascript" src="js/postprocessing/DotScreenPass.js"></script>
-		<script type="text/javascript" src="js/postprocessing/ScreenPass.js"></script>
-		<script type="text/javascript" src="js/postprocessing/VignettePass.js"></script>
+		<script type="text/javascript" src="js/postprocessing/TexturePass.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>
@@ -99,7 +98,7 @@
 			var halfWidth = window.innerWidth / 2;
 			var halfHeight = window.innerHeight / 2;
 
-			var rtTexture, materialColor, material2D, quadBG1, quadBG2;
+			var materialColor, material2D, quadBG, renderScene;
 
 			var delta = 0.01;
 
@@ -144,10 +143,10 @@
 
 				var plane = new THREE.PlaneGeometry( 1, 1 );
 
-				quadBG1 = new THREE.Mesh( plane, materialColor );
-				quadBG1.position.z = -500;
-				quadBG1.scale.set( window.innerWidth, window.innerHeight, 1 );
-				sceneBG.addObject( quadBG1 );
+				quadBG = new THREE.Mesh( plane, materialColor );
+				quadBG.position.z = -500;
+				quadBG.scale.set( window.innerWidth, window.innerHeight, 1 );
+				sceneBG.addObject( quadBG );
 
 				//
 
@@ -162,22 +161,38 @@
 				stats = new Stats();
 				stats.domElement.style.position = 'absolute';
 				stats.domElement.style.top = '0px';
-				//container.appendChild( stats.domElement );
+				container.appendChild( stats.domElement );
 
 				//
 
-				var effectBloom = new THREE.BloomPass( 0.75 );
-				var effectFilm = new THREE.FilmPass( 0.75, 0.025, 648, false );
+				var shaderBleach = THREE.ShaderUtils.lib[ "bleachbypass" ];
+				var shaderSepia = THREE.ShaderUtils.lib[ "sepia" ];
+				var shaderVignette = THREE.ShaderUtils.lib[ "vignette" ];
+				var shaderScreen = THREE.ShaderUtils.lib[ "screen" ];
+
+				var effectBleach = new THREE.ShaderPass( shaderBleach );
+				var effectSepia = new THREE.ShaderPass( shaderSepia );
+				var effectVignette = new THREE.ShaderPass( shaderVignette );
+				var effectScreen = new THREE.ShaderPass( shaderScreen );
+
+				effectBleach.uniforms[ "opacity" ].value = 0.95;
+
+				effectSepia.uniforms[ "amount" ].value = 0.6;
+
+				effectVignette.uniforms[ "offset" ].value = 0.95;
+				effectVignette.uniforms[ "darkness" ].value = 1.6;
+
+				var effectBloom = new THREE.BloomPass( 0.5 );
+				var effectFilm = new THREE.FilmPass( 0.5, 0.025, 648, false );
 				var effectFilmBW = new THREE.FilmPass( 0.35, 0.5, 2048, true );
-				var effectSepia = new THREE.SepiaPass( 1.0 );
-				var effectScreen = new THREE.ScreenPass();
 				var effectDotScreen = new THREE.DotScreenPass( new THREE.Vector2( 0, 0 ), 0.5, 0.4 );
-				var effectVignette = new THREE.VignettePass( 0.95, 1.6 );
 
 				//effectFilm.renderToScreen = true;
 				//effectFilmBW.renderToScreen = true;
 				//effectDotScreen.renderToScreen = true;
+				//effectBleach.renderToScreen = true;
 				effectVignette.renderToScreen = true;
+				//effectScreen.renderToScreen = true;
 
 				//
 
@@ -193,33 +208,13 @@
 
 				//
 
-				scene2D = new THREE.Scene();
-
-				var shader = THREE.ShaderUtils.lib[ "screen" ];
-
-				material2D = new THREE.MeshShaderMaterial( {
-
-					uniforms: THREE.UniformsUtils.clone( shader.uniforms ),
-					vertexShader: shader.vertexShader,
-					fragmentShader: shader.fragmentShader
-
-				} );
-
-				material2D.uniforms[ "tDiffuse" ].texture = composerScene.renderTarget;
-
-				quadBG2 = new THREE.Mesh( plane, material2D );
-				quadBG2.position.z = -500;
-				quadBG2.scale.set( window.innerWidth, window.innerHeight, 1 );
-				scene2D.addObject( quadBG2 );
-
-				var renderScene = new THREE.RenderPass( scene2D, cameraOrtho );
+				renderScene = new THREE.TexturePass( composerScene.renderTarget );
 
 				//
 
 				composer1 = new THREE.EffectComposer( renderer );
 
 				composer1.addPass( renderScene );
-				composer1.addPass( effectBloom );
 				composer1.addPass( effectFilmBW );
 				composer1.addPass( effectVignette );
 
@@ -246,6 +241,8 @@
 
 				composer4.addPass( renderScene );
 				composer4.addPass( effectBloom );
+				composer4.addPass( effectFilm );
+				composer4.addPass( effectBleach );
 				composer4.addPass( effectVignette );
 
 				//
@@ -280,10 +277,9 @@
 				composer3.reset();
 				composer4.reset();
 
-				material2D.uniforms[ "tDiffuse" ].texture = composerScene.renderTarget;
+				renderScene.uniforms[ "tDiffuse" ].texture = composerScene.renderTarget;
 
-				quadBG1.scale.set( window.innerWidth, window.innerHeight, 1 );
-				quadBG2.scale.set( window.innerWidth, window.innerHeight, 1 );
+				quadBG.scale.set( window.innerWidth, window.innerHeight, 1 );
 
 			}
 

examples/webgl_ribbons.html

@@ -35,7 +35,7 @@
 
 		<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/ShaderPass.js"></script>
 		<script type="text/javascript" src="js/postprocessing/BloomPass.js"></script>
 
 		<script type="text/javascript" src="js/Detector.js"></script>
@@ -198,7 +198,9 @@
 
 				var renderModel = new THREE.RenderPass( scene, camera );
 				var effectBloom = new THREE.BloomPass( 1.0 );
-				var effectScreen = new THREE.ScreenPass();
+				var effectScreen = new THREE.ShaderPass( THREE.ShaderUtils.lib[ "screen" ] );
+
+				effectScreen.renderToScreen = true;
 
 				composer = new THREE.EffectComposer( renderer );
 

src/extras/ShaderUtils.js

@@ -420,14 +420,15 @@ THREE.ShaderUtils = {
 
 			vertexShader: [
 
-				"varying vec2 vUv;",
+				//"#define KERNEL_SIZE 25.0",
 
 				"uniform vec2 uImageIncrement;",
-				//"#define KERNEL_SIZE 25.0",
 
-				"void main(void) {",
+				"varying vec2 vUv;",
+
+				"void main() {",
 
-					"vUv = uv - ((KERNEL_SIZE - 1.0) / 2.0) * uImageIncrement;",
+					"vUv = uv - ( ( KERNEL_SIZE - 1.0 ) / 2.0 ) * uImageIncrement;",
 					"gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
 
 				"}"
@@ -436,22 +437,26 @@ THREE.ShaderUtils = {
 
 			fragmentShader: [
 
-				"varying vec2 vUv;",
+				//"#define KERNEL_SIZE 25",
+				"uniform float cKernel[ KERNEL_SIZE ];",
 
 				"uniform sampler2D tDiffuse;",
 				"uniform vec2 uImageIncrement;",
 
-				//"#define KERNEL_SIZE 25",
-				"uniform float cKernel[KERNEL_SIZE];",
+				"varying vec2 vUv;",
 
-				"void main(void) {",
+				"void main() {",
 
 					"vec2 imageCoord = vUv;",
 					"vec4 sum = vec4( 0.0, 0.0, 0.0, 0.0 );",
-					"for( int i=0; i<KERNEL_SIZE; ++i ) {",
-						"sum += texture2D( tDiffuse, imageCoord ) * cKernel[i];",
+
+					"for( int i = 0; i < KERNEL_SIZE; i ++ ) {",
+
+						"sum += texture2D( tDiffuse, imageCoord ) * cKernel[ i ];",
 						"imageCoord += uImageIncrement;",
+
 					"}",
+
 					"gl_FragColor = sum;",
 
 				"}"
@@ -510,9 +515,6 @@ THREE.ShaderUtils = {
 
 			fragmentShader: [
 
-				"varying vec2 vUv;",
-				"uniform sampler2D tDiffuse;",
-
 				// control parameter
 				"uniform float time;",
 
@@ -527,6 +529,10 @@ THREE.ShaderUtils = {
 				// scanlines effect count value (0 = no effect, 4096 = full effect)
 				"uniform float sCount;",
 
+				"uniform sampler2D tDiffuse;",
+
+				"varying vec2 vUv;",
+
 				"void main() {",
 
 					// sample the source
@@ -551,7 +557,9 @@ THREE.ShaderUtils = {
 
 					// convert to grayscale if desired
 					"if( grayscale ) {",
+
 						"cResult = vec3( cResult.r * 0.3 + cResult.g * 0.59 + cResult.b * 0.11 );",
+
 					"}",
 
 					"gl_FragColor =  vec4( cResult, cTextureScreen.a );",
@@ -595,9 +603,10 @@ THREE.ShaderUtils = {
 
 				"uniform float amount;",
 
-				"varying vec2 vUv;",
 				"uniform sampler2D tDiffuse;",
 
+				"varying vec2 vUv;",
+
 				"void main() {",
 
 					"vec4 color = texture2D( tDiffuse, vUv );",
@@ -653,9 +662,10 @@ THREE.ShaderUtils = {
 				"uniform float scale;",
 				"uniform vec2 tSize;",
 
-				"varying vec2 vUv;",
 				"uniform sampler2D tDiffuse;",
 
+				"varying vec2 vUv;",
+
 				"float pattern() {",
 
 					"float s = sin( angle ), c = cos( angle );",
@@ -715,9 +725,10 @@ THREE.ShaderUtils = {
 				"uniform float offset;",
 				"uniform float darkness;",
 
-				"varying vec2 vUv;",
 				"uniform sampler2D tDiffuse;",
 
+				"varying vec2 vUv;",
+
 				"void main() {",
 
 					// Eskil's vignette
@@ -742,6 +753,69 @@ THREE.ShaderUtils = {
 
 		},
 
+		/* -------------------------------------------------------------------------
+		//	Bleach bypass shader [http://en.wikipedia.org/wiki/Bleach_bypass]
+		//	- based on Nvidia example
+		//		http://developer.download.nvidia.com/shaderlibrary/webpages/shader_library.html#post_bleach_bypass
+		 ------------------------------------------------------------------------- */
+
+		'bleachbypass': {
+
+			uniforms: {
+
+				tDiffuse: { type: "t", value: 0, texture: null },
+				opacity:  { type: "f", value: 1.0 }
+
+			},
+
+			vertexShader: [
+
+				"varying vec2 vUv;",
+
+				"void main() {",
+
+					"vUv = vec2( uv.x, 1.0 - uv.y );",
+					"gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
+
+				"}"
+
+			].join("\n"),
+
+			fragmentShader: [
+
+				"uniform float opacity;",
+
+				"uniform sampler2D tDiffuse;",
+
+				"varying vec2 vUv;",
+
+				"void main() {",
+
+					"vec4 base = texture2D( tDiffuse, vUv );",
+
+					"vec3 lumCoeff = vec3( 0.25, 0.65, 0.1 );",
+					"float lum = dot( lumCoeff, base.rgb );",
+					"vec3 blend = vec3( lum );",
+
+					"float L = min( 1.0, max( 0.0, 10.0 * ( lum - 0.45 ) ) );",
+
+					"vec3 result1 = 2.0 * base.rgb * blend;",
+					"vec3 result2 = 1.0 - 2.0 * ( 1.0 - blend ) * ( 1.0 - base.rgb );",
+
+					"vec3 newColor = mix( result1, result2, L );",
+
+					"float A2 = opacity * base.a;",
+					"vec3 mixRGB = A2 * newColor.rgb;",
+					"mixRGB += ( ( 1.0 - A2 ) * base.rgb );",
+
+					"gl_FragColor = vec4( mixRGB, base.a );",
+
+				"}"
+
+			].join("\n")
+
+		},
+
 		/* -------------------------------------------------------------------------
 		//	Full-screen textured quad shader
 		 ------------------------------------------------------------------------- */
@@ -770,10 +844,12 @@ THREE.ShaderUtils = {
 
 			fragmentShader: [
 
-				"varying vec2 vUv;",
-				"uniform sampler2D tDiffuse;",
 				"uniform float opacity;",
 
+				"uniform sampler2D tDiffuse;",
+
+				"varying vec2 vUv;",
+
 				"void main() {",
 
 					"vec4 texel = texture2D( tDiffuse, vUv );",