Moved film shader into ShaderUtils.

build/ThreeExtras.js

@@ -229,6 +229,7 @@ uDirLightColor:{type:"c",value:new THREE.Color(15658734)},uAmbientLightColor:{ty
 vertex_shader:"attribute vec4 tangent;\nuniform vec3 uPointLightPos;\n#ifdef VERTEX_TEXTURES\nuniform sampler2D tDisplacement;\nuniform float uDisplacementScale;\nuniform float uDisplacementBias;\n#endif\nvarying vec3 vTangent;\nvarying vec3 vBinormal;\nvarying vec3 vNormal;\nvarying vec2 vUv;\nvarying vec3 vPointLightVector;\nvarying vec3 vViewPosition;\nvoid main() {\nvec4 mPosition = objectMatrix * vec4( position, 1.0 );\nvViewPosition = cameraPosition - mPosition.xyz;\nvec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );\nvNormal = normalize( normalMatrix * normal );\nvTangent = normalize( normalMatrix * tangent.xyz );\nvBinormal = cross( vNormal, vTangent ) * tangent.w;\nvBinormal = normalize( vBinormal );\nvUv = uv;\nvec4 lPosition = viewMatrix * vec4( uPointLightPos, 1.0 );\nvPointLightVector = normalize( lPosition.xyz - mvPosition.xyz );\n#ifdef VERTEX_TEXTURES\nvec3 dv = texture2D( tDisplacement, uv ).xyz;\nfloat df = uDisplacementScale * dv.x + uDisplacementBias;\nvec4 displacedPosition = vec4( vNormal.xyz * df, 0.0 ) + mvPosition;\ngl_Position = projectionMatrix * displacedPosition;\n#else\ngl_Position = projectionMatrix * mvPosition;\n#endif\n}"},
 cube:{uniforms:{tCube:{type:"t",value:1,texture:null}},vertex_shader:"varying vec3 vViewPosition;\nvoid main() {\nvec4 mPosition = objectMatrix * vec4( position, 1.0 );\nvViewPosition = cameraPosition - mPosition.xyz;\ngl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n}",fragment_shader:"uniform samplerCube tCube;\nvarying vec3 vViewPosition;\nvoid main() {\nvec3 wPos = cameraPosition - vViewPosition;\ngl_FragColor = textureCube( tCube, vec3( - wPos.x, wPos.yz ) );\n}"},convolution:{uniforms:{tDiffuse:{type:"t",
 value:0,texture:null},uImageIncrement:{type:"v2",value:new THREE.Vector2(0.001953125,0)},cKernel:{type:"fv1",value:[]}},vertex_shader:"varying vec2 vUv;\nuniform vec2 uImageIncrement;\n#define KERNEL_SIZE 25.0\nvoid main(void) {\nvUv = uv - ((KERNEL_SIZE - 1.0) / 2.0) * uImageIncrement;\ngl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n}",fragment_shader:"varying vec2 vUv;\nuniform sampler2D tDiffuse;\nuniform vec2 uImageIncrement;\n#define KERNEL_SIZE 25\nuniform float cKernel[KERNEL_SIZE];\nvoid main(void) {\nvec2 imageCoord = vUv;\nvec4 sum = vec4( 0.0, 0.0, 0.0, 0.0 );\nfor( int i=0; i<KERNEL_SIZE; ++i ) {\nsum += texture2D( tDiffuse, imageCoord ) * cKernel[i];\nimageCoord += uImageIncrement;\n}\ngl_FragColor = sum;\n}"},
+film:{uniforms:{tDiffuse:{type:"t",value:0,texture:null},time:{type:"f",value:0}},vertex_shader:"varying vec2 vUv;\nvoid main() {\nvUv = vec2( uv.x, 1.0 - uv.y );\ngl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n}",fragment_shader:"varying vec2 vUv;\nuniform sampler2D tDiffuse;\nuniform float time;\nconst float fNintensity = 0.35;\nconst float fSintensity = 0.35;\nconst float fScount = 4096.0;\nvoid main() {\nvec4 cTextureScreen = texture2D( tDiffuse, vUv );\nfloat x = vUv.x * vUv.y * time *  1000.0;\nx = mod( x, 13.0 ) * mod( x, 123.0 );\nfloat dx = mod( x, 0.01 );\nvec3 cResult = cTextureScreen.rgb + cTextureScreen.rgb * clamp( 0.1 + dx * 100.0, 0.0, 1.0 );\nvec2 sc = vec2( sin(vUv.y * fScount), cos(vUv.y * fScount) );\ncResult += cTextureScreen.rgb * vec3( sc.x, sc.y, sc.x ) * fSintensity;\ncResult = cTextureScreen.rgb + clamp( fNintensity, 0.0,1.0 ) * ( cResult - cTextureScreen.rgb );\ncResult = vec3( cResult.r * 0.3 + cResult.g * 0.59 + cResult.b * 0.11 );\ngl_FragColor =  vec4( cResult, cTextureScreen.a );\n}"},
 screen:{uniforms:{tDiffuse:{type:"t",value:0,texture:null},opacity:{type:"f",value:1}},vertex_shader:"varying vec2 vUv;\nvoid main() {\nvUv = vec2( uv.x, 1.0 - uv.y );\ngl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n}",fragment_shader:"varying vec2 vUv;\nuniform sampler2D tDiffuse;\nuniform float opacity;\nvoid main() {\nvec4 texel = texture2D( tDiffuse, vUv );\ngl_FragColor = opacity * texel;\n}"},basic:{uniforms:{},vertex_shader:"void main() {\ngl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n}",
 fragment_shader:"void main() {\ngl_FragColor = vec4( 1.0, 0.0, 0.0, 0.5 );\n}"}},buildKernel:function(a){var c,d,e,g,b=2*Math.ceil(a*3)+1;if(b>25)b=25;g=(b-1)*0.5;d=Array(b);for(c=e=0;c<b;++c){d[c]=Math.exp(-((c-g)*(c-g))/(2*a*a));e+=d[c]}for(c=0;c<b;++c)d[c]/=e;return d}},Cube=function(a,c,d,e,g,b,l,j){function h(B,G,t,k,f,m,n,C){var w,p,F=e||1,y=g||1,J=F+1,E=y+1,A=f/2,M=m/2;f=f/F;var aa=m/y,N=o.vertices.length;if(B=="x"&&G=="y"||B=="y"&&G=="x")w="z";else if(B=="x"&&G=="z"||B=="z"&&G=="x")w="y";
 else if(B=="z"&&G=="y"||B=="y"&&G=="z")w="x";for(p=0;p<E;p++)for(m=0;m<J;m++){var U=new THREE.Vector3;U[B]=(m*f-A)*t;U[G]=(p*aa-M)*k;U[w]=n;o.vertices.push(new THREE.Vertex(U))}for(p=0;p<y;p++)for(m=0;m<F;m++){o.faces.push(new THREE.Face4(m+J*p+N,m+J*(p+1)+N,m+1+J*(p+1)+N,m+1+J*p+N,null,C));o.uvs.push([new THREE.UV(m/F,p/y),new THREE.UV(m/F,(p+1)/y),new THREE.UV((m+1)/F,(p+1)/y),new THREE.UV((m+1)/F,p/y)])}}THREE.Geometry.call(this);var o=this,v=a/2,z=c/2,u=d/2;l=l?-1:1;if(b!==undefined)if(b instanceof

examples/postprocessing.html

@@ -65,68 +65,6 @@
 
         <script type="text/javascript" src="js/Stats.js"></script>
         <script type="text/javascript" src="../build/ThreeExtras.js"></script>
-		
-		<!-- -----------------------------------------------------------------
-			Film grain & scanlines shader
-				- ported from HLSL to WebGL / GLSL
-					http://www.truevision3d.com/forums/showcase/staticnoise_colorblackwhite_scanline_shaders-t18698.0.html
-
-		// Screen Space Static Postprocessor
-		//
-		// Produces an analogue noise overlay similar to a film grain / TV static
-		//
-		// Original implementation and noise algorithm
-		// Pat 'Hawthorne' Shearon
-		//
-		// Optimized scanlines + noise version with intensity scaling
-		// Georg 'Leviathan' Steinrohder
-		
-		// This version is provided under a Creative Commons Attribution 3.0 License
-		// http://creativecommons.org/licenses/by/3.0/
-		----------------------------------------------------------------- -->
-		
-		<!-- Film grain & scanlines fragment shader -->
-		<script id="fs-film" type="x-shader/x-fragment">
-		varying vec2 vUv;
-		uniform sampler2D tDiffuse; 
-		
-		// control parameter
-		uniform float time;
-
-		// noise effect intensity value (0 = no effect, 1 = full effect)
-		const float fNintensity = 0.35;
-		// scanlines effect intensity value (0 = no effect, 1 = full effect)
-		const float fSintensity = 0.35;
-		// scanlines effect count value (0 = no effect, 4096 = full effect)
-		const float fScount = 4096.0;
-		
-		void main(void) {
-			// sample the source
-			vec4 cTextureScreen = texture2D( tDiffuse, vUv );
-
-			// make some noise
-			float x = vUv.x * vUv.y * time *  1000.0;
-			x = mod( x, 13.0 ) * mod( x, 123.0 );
-			float dx = mod( x, 0.01 );
-
-			// add noise
-			vec3 cResult = cTextureScreen.rgb + cTextureScreen.rgb * clamp( 0.1 + dx * 100.0, 0.0, 1.0 );
-
-			// get us a sine and cosine
-			vec2 sc = vec2( sin(vUv.y * fScount), cos(vUv.y * fScount) );
-
-			// add scanlines
-			cResult += cTextureScreen.rgb * vec3( sc.x, sc.y, sc.x ) * fSintensity;
-			
-			// interpolate between source and result by intensity
-			cResult = cTextureScreen.rgb + clamp( fNintensity, 0.0,1.0 ) * ( cResult - cTextureScreen.rgb );
-
-			// convert to grayscale if desired
-			cResult = vec3( cResult.r * 0.3 + cResult.g * 0.59 + cResult.b * 0.11 );
-
-			gl_FragColor =  vec4( cResult, cTextureScreen.a );
-		}
-		</script>
 
 		<!-- Time modulated procedural color fragment shader -->
         <script id="fs-colors" type="x-shader/x-fragment">
@@ -220,16 +158,20 @@
 
                 } );
 
+				var film_shader = ShaderUtils.lib["film"];
+				var film_uniforms = Uniforms.clone( film_shader.uniforms );
+				
+				film_uniforms["tDiffuse"].texture = rtTexture1;
+				
                 materialFilm = new THREE.MeshShaderMaterial( {
 
-                    uniforms: { tDiffuse: { type: "t", value: 0, texture: rtTexture1 },
-								time: { type: "f", value: 0.0 }
-							  },
-                    vertex_shader: getText( 'vs-generic' ),
-                    fragment_shader: getText( 'fs-film' )
+                    uniforms: film_uniforms,
+                    vertex_shader: film_shader.vertex_shader,
+                    fragment_shader: film_shader.fragment_shader
 
                 } );
 
+
 				var increment = 0.001953125;
 				
 				blurx = new THREE.Vector2( increment, 0.0 ),

src/extras/ShaderUtils.js

@@ -3,8 +3,8 @@ var ShaderUtils = {
 	lib: { 
 		
 		/* -------------------------------------------------------------------------
-			Fresnel shader
-			- based on Nvidia Cg tutorial
+		//	Fresnel shader
+		//	- based on Nvidia Cg tutorial
 		 ------------------------------------------------------------------------- */
 		
 		'fresnel': {
@@ -78,10 +78,10 @@ var ShaderUtils = {
 		},
 
 		/* -------------------------------------------------------------------------
-			Normal map shader 
-				- Blinn-Phong 
-				- normal + diffuse + AO + displacement maps
-				- 1 point and 1 directional lights
+		//	Normal map shader 
+		//		- Blinn-Phong 
+		//		- normal + diffuse + AO + displacement maps
+		//		- 1 point and 1 directional lights
 		 ------------------------------------------------------------------------- */
 		
 		'normal' : {
@@ -282,7 +282,7 @@ var ShaderUtils = {
 		},
 
 		/* -------------------------------------------------------------------------
-			Cube map shader
+		//	Cube map shader
 		 ------------------------------------------------------------------------- */
 		
 		'cube': {
@@ -322,9 +322,9 @@ var ShaderUtils = {
 		},
 
 		/* ------------------------------------------------------------------------
-			Convolution shader 
-			  - ported from o3d sample to WebGL / GLSL
-					http://o3d.googlecode.com/svn/trunk/samples/convolution.html
+		//	Convolution shader 
+		//	  - ported from o3d sample to WebGL / GLSL
+		//			http://o3d.googlecode.com/svn/trunk/samples/convolution.html
 		------------------------------------------------------------------------ */
 		
 		'convolution': {
@@ -380,7 +380,97 @@ var ShaderUtils = {
 		},
 
 		/* -------------------------------------------------------------------------
-			Full-screen textured quad shader
+		
+		// Film grain & scanlines shader
+		
+		//	- ported from HLSL to WebGL / GLSL
+		//	  http://www.truevision3d.com/forums/showcase/staticnoise_colorblackwhite_scanline_shaders-t18698.0.html
+
+		// Screen Space Static Postprocessor
+		//
+		// Produces an analogue noise overlay similar to a film grain / TV static
+		//
+		// Original implementation and noise algorithm
+		// Pat 'Hawthorne' Shearon
+		//
+		// Optimized scanlines + noise version with intensity scaling
+		// Georg 'Leviathan' Steinrohder
+		
+		// This version is provided under a Creative Commons Attribution 3.0 License
+		// http://creativecommons.org/licenses/by/3.0/
+		 ------------------------------------------------------------------------- */
+
+		'film': {
+
+		uniforms: { tDiffuse: { type: "t", value: 0, texture: null },
+					time: { type: "f", value: 0.0 }
+				  },
+
+		vertex_shader: [
+            
+		"varying vec2 vUv;",
+
+		"void main() {",
+               
+			"vUv = vec2( uv.x, 1.0 - uv.y );",
+			"gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
+		
+		"}"
+
+		].join("\n"),
+
+		fragment_shader: [
+		
+		"varying vec2 vUv;",
+		"uniform sampler2D tDiffuse;",
+		
+		// control parameter
+		"uniform float time;",
+
+		// noise effect intensity value (0 = no effect, 1 = full effect)
+		"const float fNintensity = 0.35;",
+		
+		// scanlines effect intensity value (0 = no effect, 1 = full effect)
+		"const float fSintensity = 0.35;",
+		
+		// scanlines effect count value (0 = no effect, 4096 = full effect)
+		"const float fScount = 4096.0;",
+		
+		"void main() {",
+			
+			// sample the source
+			"vec4 cTextureScreen = texture2D( tDiffuse, vUv );",
+
+			// make some noise
+			"float x = vUv.x * vUv.y * time *  1000.0;",
+			"x = mod( x, 13.0 ) * mod( x, 123.0 );",
+			"float dx = mod( x, 0.01 );",
+
+			// add noise
+			"vec3 cResult = cTextureScreen.rgb + cTextureScreen.rgb * clamp( 0.1 + dx * 100.0, 0.0, 1.0 );",
+
+			// get us a sine and cosine
+			"vec2 sc = vec2( sin(vUv.y * fScount), cos(vUv.y * fScount) );",
+
+			// add scanlines
+			"cResult += cTextureScreen.rgb * vec3( sc.x, sc.y, sc.x ) * fSintensity;",
+			
+			// interpolate between source and result by intensity
+			"cResult = cTextureScreen.rgb + clamp( fNintensity, 0.0,1.0 ) * ( cResult - cTextureScreen.rgb );",
+
+			// convert to grayscale if desired
+			"cResult = vec3( cResult.r * 0.3 + cResult.g * 0.59 + cResult.b * 0.11 );",
+
+			"gl_FragColor =  vec4( cResult, cTextureScreen.a );",
+		
+		"}"
+
+		].join("\n")
+
+		},
+
+		/* -------------------------------------------------------------------------
+		//	Full-screen textured quad shader
 		 ------------------------------------------------------------------------- */
 		
 		'screen': {
@@ -421,7 +511,7 @@ var ShaderUtils = {
 
 		
 		/* -------------------------------------------------------------------------
-			Simple test shader
+		//	Simple test shader
 		 ------------------------------------------------------------------------- */
 		
 		'basic': {