Moved focus shader out of dynamic particles example into ShaderExtras.

Also updated dynamic particles example to handle resizing.

examples/js/ShaderExtras.js

@@ -275,67 +275,67 @@ THREE.ShaderExtras = {
 
 	"void main() {",
 
-	"vec2 aspectcorrect = vec2( 1.0, aspect );",
-
-	"vec4 depth1 = texture2D( tDepth, vUv );",
-
-	"float factor = depth1.x - focus;",
-
-	"vec2 dofblur = vec2 ( clamp( factor * aperture, -maxblur, maxblur ) );",
-
-	"vec2 dofblur9 = dofblur * 0.9;",
-	"vec2 dofblur7 = dofblur * 0.7;",
-	"vec2 dofblur4 = dofblur * 0.4;",
-
-	"vec4 col = vec4( 0.0 );",
-
-	"col += texture2D( tColor, vUv.xy );",
-	"col += texture2D( tColor, vUv.xy + ( vec2(  0.0,   0.4  ) * aspectcorrect ) * dofblur );",
-	"col += texture2D( tColor, vUv.xy + ( vec2(  0.15,  0.37 ) * aspectcorrect ) * dofblur );",
-	"col += texture2D( tColor, vUv.xy + ( vec2(  0.29,  0.29 ) * aspectcorrect ) * dofblur );",
-	"col += texture2D( tColor, vUv.xy + ( vec2( -0.37,  0.15 ) * aspectcorrect ) * dofblur );",
-	"col += texture2D( tColor, vUv.xy + ( vec2(  0.40,  0.0  ) * aspectcorrect ) * dofblur );",
-	"col += texture2D( tColor, vUv.xy + ( vec2(  0.37, -0.15 ) * aspectcorrect ) * dofblur );",
-	"col += texture2D( tColor, vUv.xy + ( vec2(  0.29, -0.29 ) * aspectcorrect ) * dofblur );",
-	"col += texture2D( tColor, vUv.xy + ( vec2( -0.15, -0.37 ) * aspectcorrect ) * dofblur );",
-	"col += texture2D( tColor, vUv.xy + ( vec2(  0.0,  -0.4  ) * aspectcorrect ) * dofblur );",
-	"col += texture2D( tColor, vUv.xy + ( vec2( -0.15,  0.37 ) * aspectcorrect ) * dofblur );",
-	"col += texture2D( tColor, vUv.xy + ( vec2( -0.29,  0.29 ) * aspectcorrect ) * dofblur );",
-	"col += texture2D( tColor, vUv.xy + ( vec2(  0.37,  0.15 ) * aspectcorrect ) * dofblur );",
-	"col += texture2D( tColor, vUv.xy + ( vec2( -0.4,   0.0  ) * aspectcorrect ) * dofblur );",
-	"col += texture2D( tColor, vUv.xy + ( vec2( -0.37, -0.15 ) * aspectcorrect ) * dofblur );",
-	"col += texture2D( tColor, vUv.xy + ( vec2( -0.29, -0.29 ) * aspectcorrect ) * dofblur );",
-	"col += texture2D( tColor, vUv.xy + ( vec2(  0.15, -0.37 ) * aspectcorrect ) * dofblur );",
-
-	"col += texture2D( tColor, vUv.xy + ( vec2(  0.15,  0.37 ) * aspectcorrect ) * dofblur9 );",
-	"col += texture2D( tColor, vUv.xy + ( vec2( -0.37,  0.15 ) * aspectcorrect ) * dofblur9 );",
-	"col += texture2D( tColor, vUv.xy + ( vec2(  0.37, -0.15 ) * aspectcorrect ) * dofblur9 );",
-	"col += texture2D( tColor, vUv.xy + ( vec2( -0.15, -0.37 ) * aspectcorrect ) * dofblur9 );",
-	"col += texture2D( tColor, vUv.xy + ( vec2( -0.15,  0.37 ) * aspectcorrect ) * dofblur9 );",
-	"col += texture2D( tColor, vUv.xy + ( vec2(  0.37,  0.15 ) * aspectcorrect ) * dofblur9 );",
-	"col += texture2D( tColor, vUv.xy + ( vec2( -0.37, -0.15 ) * aspectcorrect ) * dofblur9 );",
-	"col += texture2D( tColor, vUv.xy + ( vec2(  0.15, -0.37 ) * aspectcorrect ) * dofblur9 );",
-
-	"col += texture2D( tColor, vUv.xy + ( vec2(  0.29,  0.29 ) * aspectcorrect ) * dofblur7 );",
-	"col += texture2D( tColor, vUv.xy + ( vec2(  0.40,  0.0  ) * aspectcorrect ) * dofblur7 );",
-	"col += texture2D( tColor, vUv.xy + ( vec2(  0.29, -0.29 ) * aspectcorrect ) * dofblur7 );",
-	"col += texture2D( tColor, vUv.xy + ( vec2(  0.0,  -0.4  ) * aspectcorrect ) * dofblur7 );",
-	"col += texture2D( tColor, vUv.xy + ( vec2( -0.29,  0.29 ) * aspectcorrect ) * dofblur7 );",
-	"col += texture2D( tColor, vUv.xy + ( vec2( -0.4,   0.0  ) * aspectcorrect ) * dofblur7 );",
-	"col += texture2D( tColor, vUv.xy + ( vec2( -0.29, -0.29 ) * aspectcorrect ) * dofblur7 );",
-	"col += texture2D( tColor, vUv.xy + ( vec2(  0.0,   0.4  ) * aspectcorrect ) * dofblur7 );",
-
-	"col += texture2D( tColor, vUv.xy + ( vec2(  0.29,  0.29 ) * aspectcorrect ) * dofblur4 );",
-	"col += texture2D( tColor, vUv.xy + ( vec2(  0.4,   0.0  ) * aspectcorrect ) * dofblur4 );",
-	"col += texture2D( tColor, vUv.xy + ( vec2(  0.29, -0.29 ) * aspectcorrect ) * dofblur4 );",
-	"col += texture2D( tColor, vUv.xy + ( vec2(  0.0,  -0.4  ) * aspectcorrect ) * dofblur4 );",
-	"col += texture2D( tColor, vUv.xy + ( vec2( -0.29,  0.29 ) * aspectcorrect ) * dofblur4 );",
-	"col += texture2D( tColor, vUv.xy + ( vec2( -0.4,   0.0  ) * aspectcorrect ) * dofblur4 );",
-	"col += texture2D( tColor, vUv.xy + ( vec2( -0.29, -0.29 ) * aspectcorrect ) * dofblur4 );",
-	"col += texture2D( tColor, vUv.xy + ( vec2(  0.0,   0.4  ) * aspectcorrect ) * dofblur4 );",
-
-	"gl_FragColor = col / 41.0;",
-	"gl_FragColor.a = 1.0;",
+		"vec2 aspectcorrect = vec2( 1.0, aspect );",
+
+		"vec4 depth1 = texture2D( tDepth, vUv );",
+
+		"float factor = depth1.x - focus;",
+
+		"vec2 dofblur = vec2 ( clamp( factor * aperture, -maxblur, maxblur ) );",
+
+		"vec2 dofblur9 = dofblur * 0.9;",
+		"vec2 dofblur7 = dofblur * 0.7;",
+		"vec2 dofblur4 = dofblur * 0.4;",
+
+		"vec4 col = vec4( 0.0 );",
+
+		"col += texture2D( tColor, vUv.xy );",
+		"col += texture2D( tColor, vUv.xy + ( vec2(  0.0,   0.4  ) * aspectcorrect ) * dofblur );",
+		"col += texture2D( tColor, vUv.xy + ( vec2(  0.15,  0.37 ) * aspectcorrect ) * dofblur );",
+		"col += texture2D( tColor, vUv.xy + ( vec2(  0.29,  0.29 ) * aspectcorrect ) * dofblur );",
+		"col += texture2D( tColor, vUv.xy + ( vec2( -0.37,  0.15 ) * aspectcorrect ) * dofblur );",
+		"col += texture2D( tColor, vUv.xy + ( vec2(  0.40,  0.0  ) * aspectcorrect ) * dofblur );",
+		"col += texture2D( tColor, vUv.xy + ( vec2(  0.37, -0.15 ) * aspectcorrect ) * dofblur );",
+		"col += texture2D( tColor, vUv.xy + ( vec2(  0.29, -0.29 ) * aspectcorrect ) * dofblur );",
+		"col += texture2D( tColor, vUv.xy + ( vec2( -0.15, -0.37 ) * aspectcorrect ) * dofblur );",
+		"col += texture2D( tColor, vUv.xy + ( vec2(  0.0,  -0.4  ) * aspectcorrect ) * dofblur );",
+		"col += texture2D( tColor, vUv.xy + ( vec2( -0.15,  0.37 ) * aspectcorrect ) * dofblur );",
+		"col += texture2D( tColor, vUv.xy + ( vec2( -0.29,  0.29 ) * aspectcorrect ) * dofblur );",
+		"col += texture2D( tColor, vUv.xy + ( vec2(  0.37,  0.15 ) * aspectcorrect ) * dofblur );",
+		"col += texture2D( tColor, vUv.xy + ( vec2( -0.4,   0.0  ) * aspectcorrect ) * dofblur );",
+		"col += texture2D( tColor, vUv.xy + ( vec2( -0.37, -0.15 ) * aspectcorrect ) * dofblur );",
+		"col += texture2D( tColor, vUv.xy + ( vec2( -0.29, -0.29 ) * aspectcorrect ) * dofblur );",
+		"col += texture2D( tColor, vUv.xy + ( vec2(  0.15, -0.37 ) * aspectcorrect ) * dofblur );",
+
+		"col += texture2D( tColor, vUv.xy + ( vec2(  0.15,  0.37 ) * aspectcorrect ) * dofblur9 );",
+		"col += texture2D( tColor, vUv.xy + ( vec2( -0.37,  0.15 ) * aspectcorrect ) * dofblur9 );",
+		"col += texture2D( tColor, vUv.xy + ( vec2(  0.37, -0.15 ) * aspectcorrect ) * dofblur9 );",
+		"col += texture2D( tColor, vUv.xy + ( vec2( -0.15, -0.37 ) * aspectcorrect ) * dofblur9 );",
+		"col += texture2D( tColor, vUv.xy + ( vec2( -0.15,  0.37 ) * aspectcorrect ) * dofblur9 );",
+		"col += texture2D( tColor, vUv.xy + ( vec2(  0.37,  0.15 ) * aspectcorrect ) * dofblur9 );",
+		"col += texture2D( tColor, vUv.xy + ( vec2( -0.37, -0.15 ) * aspectcorrect ) * dofblur9 );",
+		"col += texture2D( tColor, vUv.xy + ( vec2(  0.15, -0.37 ) * aspectcorrect ) * dofblur9 );",
+
+		"col += texture2D( tColor, vUv.xy + ( vec2(  0.29,  0.29 ) * aspectcorrect ) * dofblur7 );",
+		"col += texture2D( tColor, vUv.xy + ( vec2(  0.40,  0.0  ) * aspectcorrect ) * dofblur7 );",
+		"col += texture2D( tColor, vUv.xy + ( vec2(  0.29, -0.29 ) * aspectcorrect ) * dofblur7 );",
+		"col += texture2D( tColor, vUv.xy + ( vec2(  0.0,  -0.4  ) * aspectcorrect ) * dofblur7 );",
+		"col += texture2D( tColor, vUv.xy + ( vec2( -0.29,  0.29 ) * aspectcorrect ) * dofblur7 );",
+		"col += texture2D( tColor, vUv.xy + ( vec2( -0.4,   0.0  ) * aspectcorrect ) * dofblur7 );",
+		"col += texture2D( tColor, vUv.xy + ( vec2( -0.29, -0.29 ) * aspectcorrect ) * dofblur7 );",
+		"col += texture2D( tColor, vUv.xy + ( vec2(  0.0,   0.4  ) * aspectcorrect ) * dofblur7 );",
+
+		"col += texture2D( tColor, vUv.xy + ( vec2(  0.29,  0.29 ) * aspectcorrect ) * dofblur4 );",
+		"col += texture2D( tColor, vUv.xy + ( vec2(  0.4,   0.0  ) * aspectcorrect ) * dofblur4 );",
+		"col += texture2D( tColor, vUv.xy + ( vec2(  0.29, -0.29 ) * aspectcorrect ) * dofblur4 );",
+		"col += texture2D( tColor, vUv.xy + ( vec2(  0.0,  -0.4  ) * aspectcorrect ) * dofblur4 );",
+		"col += texture2D( tColor, vUv.xy + ( vec2( -0.29,  0.29 ) * aspectcorrect ) * dofblur4 );",
+		"col += texture2D( tColor, vUv.xy + ( vec2( -0.4,   0.0  ) * aspectcorrect ) * dofblur4 );",
+		"col += texture2D( tColor, vUv.xy + ( vec2( -0.29, -0.29 ) * aspectcorrect ) * dofblur4 );",
+		"col += texture2D( tColor, vUv.xy + ( vec2(  0.0,   0.4  ) * aspectcorrect ) * dofblur4 );",
+
+		"gl_FragColor = col / 41.0;",
+		"gl_FragColor.a = 1.0;",
 
 	"}"
 
@@ -588,6 +588,96 @@ THREE.ShaderExtras = {
 
 	},
 
+	/* --------------------------------------------------------------------------------------------------
+	//	Focus shader
+	//	- based on PaintEffect postprocess from ro.me
+	//		http://code.google.com/p/3-dreams-of-black/source/browse/deploy/js/effects/PaintEffect.js
+	 -------------------------------------------------------------------------------------------------- */
+
+	'focus': {
+
+		uniforms : {
+
+			"tDiffuse": 		{ type: "t", value: 0, texture: null },
+			"screenWidth": 		{ type: "f", value: 1024 },
+			"screenHeight": 	{ type: "f", value: 1024 },
+			"sampleDistance": 	{ type: "f", value: 0.94 },
+			"waveFactor": 		{ type: "f", value: 0.00125 }
+
+		},
+
+		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 screenWidth;",
+			"uniform float screenHeight;",
+			"uniform float sampleDistance;",
+			"uniform float waveFactor;",
+
+			"uniform sampler2D tDiffuse;",
+
+			"varying vec2 vUv;",
+
+			"void main() {",
+
+				"vec4 color, org, tmp, add;",
+				"float sample_dist, f;",
+				"vec2 vin;",
+				"vec2 uv = vUv;",
+
+				"add += color = org = texture2D( tDiffuse, uv );",
+
+				"vin = ( uv - vec2( 0.5 ) ) * vec2( 1.4 );",
+				"sample_dist = dot( vin, vin ) * 2.0;",
+
+				"f = ( waveFactor * 100.0 + sample_dist ) * sampleDistance * 4.0;",
+
+				"vec2 sampleSize = vec2(  1.0 / screenWidth, 1.0 / screenHeight ) * vec2( f );",
+
+				"add += tmp = texture2D( tDiffuse, uv + vec2( 0.111964, 0.993712 ) * sampleSize );",
+				"if( tmp.b < color.b ) color = tmp;",
+
+				"add += tmp = texture2D( tDiffuse, uv + vec2( 0.846724, 0.532032 ) * sampleSize );",
+				"if( tmp.b < color.b ) color = tmp;",
+
+				"add += tmp = texture2D( tDiffuse, uv + vec2( 0.943883, -0.330279 ) * sampleSize );",
+				"if( tmp.b < color.b ) color = tmp;",
+
+				"add += tmp = texture2D( tDiffuse, uv + vec2( 0.330279, -0.943883 ) * sampleSize );",
+				"if( tmp.b < color.b ) color = tmp;",
+
+				"add += tmp = texture2D( tDiffuse, uv + vec2( -0.532032, -0.846724 ) * sampleSize );",
+				"if( tmp.b < color.b ) color = tmp;",
+
+				"add += tmp = texture2D( tDiffuse, uv + vec2( -0.993712, -0.111964 ) * sampleSize );",
+				"if( tmp.b < color.b ) color = tmp;",
+
+				"add += tmp = texture2D( tDiffuse, 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 ) );",
+
+				"gl_FragColor = vec4( color.rgb * color.rgb * vec3( 0.95 ) + color.rgb, 1.0 );",
+
+			"}"
+
+
+		].join("\n")
+	},
+
 	/* -------------------------------------------------------------------------
 	//	Simple test shader
 	 ------------------------------------------------------------------------- */

examples/webgl_particles_dynamic.html

@@ -73,7 +73,7 @@
 
 			var total = 0, totaln = 0;
 
-			var composer;
+			var composer, effectFocus;
 
             init();
             animate();
@@ -169,7 +169,11 @@
 				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 = new THREE.ShaderPass( THREE.ShaderExtras[ "focus" ] );
+
+				effectFocus.uniforms[ "screenWidth" ].value = window.innerWidth;
+				effectFocus.uniforms[ "screenHeight" ].value = window.innerHeight;
 
 				effectFocus.renderToScreen = true;
 
@@ -180,8 +184,30 @@
 				composer.addPass( effectFilm );
 				composer.addPass( effectFocus );
 
+				//
+
+				window.addEventListener( 'resize', onWindowResize, false );
+
             }
 
+			//
+
+			function onWindowResize( event ) {
+
+				renderer.setSize( window.innerWidth, window.innerHeight );
+
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.updateProjectionMatrix();
+
+				composer.reset();
+
+				effectFocus.uniforms[ "screenWidth" ].value = window.innerWidth;
+				effectFocus.uniforms[ "screenHeight" ].value = window.innerHeight;
+
+			}
+
+			//
+
 			function createMesh( originalGeometry, scene, scale, x, y, z, color, dynamic ) {
 
 				var i, c;
@@ -260,97 +286,7 @@
 							  dynamic: dynamic,
 							  bb: geometry.boundingBox } );
 
-				console.log( total, totaln );
-
-			}
-
-			function generateFocusShader() {
-
-				var shader = {
-
-					uniforms : {
-
-						"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 }
-
-					},
-
-					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 screenWidth;",
-						"uniform float screenHeight;",
-						"uniform float sampleDistance;",
-						"uniform float waveFactor;",
-
-						"uniform sampler2D map;",
-						"varying vec2 vUv;",
-
-						"void main() {",
-
-							"vec4 color, org, tmp, add;",
-							"float sample_dist, f;",
-							"vec2 vin;",
-							"vec2 uv = vUv;",
-
-							"add += color = org = texture2D( map, uv );",
-
-							"vin = ( uv - vec2( 0.5 ) ) * vec2( 1.4 );",
-							"sample_dist = dot( vin, vin ) * 2.0;",
-
-							"f = ( waveFactor * 100.0 + sample_dist ) * sampleDistance * 4.0;",
-
-							"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.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.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.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;",
-
-							"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 );",
-
-						"}"
-
-
-					].join("\n")
-
-				};
-
-				return shader;
+				//console.log( total, totaln );
 
 			}
 
@@ -363,7 +299,7 @@
 				requestAnimationFrame( animate );
 
 				render();
-				//stats.update();
+				stats.update();
 
 			}