Added physically based specular term to skin shader.

examples/js/ShaderSkin.js

@@ -8,13 +8,17 @@ THREE.ShaderSkin = {
 
 	/* ------------------------------------------------------------------------------------------
 	//	Skin shader
-	//		- Blinn-Phong
-	//		- normal + diffuse maps
-	//		- four blur layers
+	//		- Blinn-Phong diffuse term (using normal + diffuse maps)
+	//		- subsurface scattering approximation by four blur layers
+	//		- physically based specular term (Kelemen/Szirmay-Kalos specular reflectance)
+	//
 	//		- point and directional lights (use with "lights: true" material option)
 	//
 	//		- based on Nvidia Advanced Skin Rendering GDC 2007 presentation
+	//		  and GPU Gems 3 Chapter 14. Advanced Techniques for Realistic Real-Time Skin Rendering
+	//
 	//			http://developer.download.nvidia.com/presentations/2007/gdc/Advanced_Skin.pdf
+	//			http://http.developer.nvidia.com/GPUGems3/gpugems3_ch14.html
 	// ------------------------------------------------------------------------------------------ */
 
 	'skin' : {
@@ -36,13 +40,17 @@ THREE.ShaderSkin = {
 			"tBlur3"	: { type: "t", value: 4, texture: null },
 			"tBlur4"	: { type: "t", value: 5, texture: null },
 
+			"tBeckmann"	: { type: "t", value: 6, texture: null },
+
 			"uNormalScale": { type: "f", value: 1.0 },
 
 			"uDiffuseColor":  { type: "c", value: new THREE.Color( 0xeeeeee ) },
 			"uSpecularColor": { type: "c", value: new THREE.Color( 0x111111 ) },
 			"uAmbientColor":  { type: "c", value: new THREE.Color( 0x050505 ) },
-			"uShininess": 	  { type: "f", value: 30 },
-			"uOpacity": 	  { type: "f", value: 1 }
+			"uOpacity": 	  { type: "f", value: 1 },
+
+			"uRoughness": 	  		{ type: "f", value: 0.15 },
+			"uSpecularBrightness": 	{ type: "f", value: 0.75 }
 
 			}
 
@@ -53,9 +61,11 @@ THREE.ShaderSkin = {
 			"uniform vec3 uAmbientColor;",
 			"uniform vec3 uDiffuseColor;",
 			"uniform vec3 uSpecularColor;",
-			"uniform float uShininess;",
 			"uniform float uOpacity;",
 
+			"uniform float uRoughness;",
+			"uniform float uSpecularBrightness;",
+
 			"uniform int passID;",
 
 			"uniform sampler2D tDiffuse;",
@@ -66,6 +76,8 @@ THREE.ShaderSkin = {
 			"uniform sampler2D tBlur3;",
 			"uniform sampler2D tBlur4;",
 
+			"uniform sampler2D tBeckmann;",
+
 			"uniform float uNormalScale;",
 
 			"varying vec3 vTangent;",
@@ -89,6 +101,46 @@ THREE.ShaderSkin = {
 
 			THREE.ShaderChunk[ "fog_pars_fragment" ],
 
+			"float fresnelReflectance( vec3 H, vec3 V, float F0 ) {",
+
+				"float base = 1.0 - dot( V, H );",
+				"float exponential = pow( base, 5.0 );",
+
+				"return exponential + F0 * ( 1.0 - exponential );",
+
+			"}",
+
+			// Kelemen/Szirmay-Kalos specular BRDF
+
+			"float KS_Skin_Specular( vec3 N,", 		// Bumped surface normal
+									"vec3 L,", 		// Points to light
+									"vec3 V,", 		// Points to eye
+									"float m,",  	// Roughness
+									"float rho_s", 	// Specular brightness
+									") {",
+
+				"float result = 0.0;",
+				"float ndotl = dot( N, L );",
+
+				"if( ndotl > 0.0 ) {",
+
+					"vec3 h = L + V;", // Unnormalized half-way vector
+					"vec3 H = normalize( h );",
+
+					"float ndoth = dot( N, H );",
+
+					"float PH = pow( 2.0 * texture2D( tBeckmann, vec2( ndoth, m ) ).x, 10.0 );",
+					"float F = fresnelReflectance( H, V, 0.028 );",
+					"float frSpec = max( PH * F / dot( h, h ), 0.0 );",
+
+					"result = ndotl * rho_s * frSpec;", // BRDF * dot(N,L) * rho_s
+
+				"}",
+
+				"return result;",
+
+			"}",
+
 			"void main() {",
 
 				"gl_FragColor = vec4( 1.0 );",
@@ -96,8 +148,6 @@ THREE.ShaderSkin = {
 				"vec4 mColor = vec4( uDiffuseColor, uOpacity );",
 				"vec4 mSpecular = vec4( uSpecularColor, uOpacity );",
 
-				"vec3 specularTex = vec3( 1.0 );",
-
 				"vec3 normalTex = texture2D( tNormal, vUv ).xyz * 2.0 - 1.0;",
 				"normalTex.xy *= uNormalScale;",
 				"normalTex = normalize( normalTex );",
@@ -107,7 +157,6 @@ THREE.ShaderSkin = {
 
 				"gl_FragColor = gl_FragColor * pow( colDiffuse, vec4( 0.5 ) );",
 
-
 				"mat3 tsb = mat3( vTangent, vBinormal, vNormal );",
 				"vec3 finalNormal = tsb * normalTex;",
 
@@ -116,7 +165,7 @@ THREE.ShaderSkin = {
 
 				// point lights
 
-				"vec4 specularTotal = vec4( vec3( 0.0 ), 1.0 );",
+				"vec3 specularTotal = vec3( 0.0 );",
 
 				"#if MAX_POINT_LIGHTS > 0",
 
@@ -125,19 +174,14 @@ THREE.ShaderSkin = {
 					"for ( int i = 0; i < MAX_POINT_LIGHTS; i ++ ) {",
 
 						"vec3 pointVector = normalize( vPointLight[ i ].xyz );",
-						"vec3 pointHalfVector = normalize( vPointLight[ i ].xyz + viewPosition );",
 						"float pointDistance = vPointLight[ i ].w;",
 
-						"float pointDotNormalHalf = dot( normal, pointHalfVector );",
 						"float pointDiffuseWeight = max( dot( normal, pointVector ), 0.0 );",
 
-						"float pointSpecularWeight = 0.0;",
-
-						"if ( passID == 1 && pointDotNormalHalf >= 0.0 )",
-							"pointSpecularWeight = specularTex.r * pow( pointDotNormalHalf, uShininess );",
-
 						"pointTotal  += pointDistance * vec4( pointLightColor[ i ], 1.0 ) * ( mColor * pointDiffuseWeight );",
-						"specularTotal  += pointDistance * vec4( pointLightColor[ i ], 1.0 ) * ( mSpecular * pointSpecularWeight * pointDiffuseWeight );",
+
+						"if ( passID == 1 )",
+							"specularTotal += pointDistance * mSpecular.xyz * pointLightColor[ i ] * KS_Skin_Specular( normal, pointVector, viewPosition, uRoughness, uSpecularBrightness );",
 
 					"}",
 
@@ -154,17 +198,13 @@ THREE.ShaderSkin = {
 						"vec4 lDirection = viewMatrix * vec4( directionalLightDirection[ i ], 0.0 );",
 
 						"vec3 dirVector = normalize( lDirection.xyz );",
-						"vec3 dirHalfVector = normalize( lDirection.xyz + viewPosition );",
 
-						"float dirDotNormalHalf = dot( normal, dirHalfVector );",
 						"float dirDiffuseWeight = max( dot( normal, dirVector ), 0.0 );",
 
-						"float dirSpecularWeight = 0.0;",
-						"if ( passID == 1 && dirDotNormalHalf >= 0.0 )",
-							"dirSpecularWeight = specularTex.r * pow( dirDotNormalHalf, uShininess );",
-
 						"dirTotal  += vec4( directionalLightColor[ i ], 1.0 ) * ( mColor * dirDiffuseWeight );",
-						"specularTotal += vec4( directionalLightColor[ i ], 1.0 ) * ( mSpecular * dirSpecularWeight * dirDiffuseWeight );",
+
+						"if ( passID == 1 )",
+							"specularTotal += mSpecular.xyz * directionalLightColor[ i ] * KS_Skin_Specular( normal, dirVector, viewPosition, uRoughness, uSpecularBrightness );",
 
 					"}",
 
@@ -224,8 +264,7 @@ THREE.ShaderSkin = {
 
 					"gl_FragColor.xyz *= pow( colDiffuse.xyz, vec3( 0.5 ) );",
 
-					"gl_FragColor += specularTotal;",
-					"gl_FragColor.xyz += ambientLightColor * uAmbientColor * colDiffuse.xyz;",
+					"gl_FragColor.xyz += ambientLightColor * uAmbientColor * colDiffuse.xyz + specularTotal;",
 
 					"#ifndef VERSION1",
 
@@ -406,7 +445,65 @@ THREE.ShaderSkin = {
 
 		].join("\n")
 
-	}
+	},
+
+	/* ------------------------------------------------------------------------------------------
+	// Beckmann distribution function
+	//	- to be used in specular term of skin shader
+	//	- render a screen-aligned quad to precompute a 512 x 512 texture
+	//
+	//		- from http://developer.nvidia.com/node/171
+	 ------------------------------------------------------------------------------------------ */
+
+	"beckmann" : {
 
+		uniforms: {},
+
+		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: [
+
+			"varying vec2 vUv;",
+
+			"float PHBeckmann( float ndoth, float m ) {",
+
+				"float alpha = acos( ndoth );",
+				"float ta = tan( alpha );",
+
+				"float val = 1.0 / ( m * m * pow( ndoth, 4.0 ) ) * exp( -( ta * ta ) / ( m * m ) );",
+				"return val;",
+
+			"}",
+
+			"float KSTextureCompute( vec2 tex ) {",
+
+				// Scale the value to fit within [0,1] – invert upon lookup.
+
+				"return 0.5 * pow( PHBeckmann( tex.x, tex.y ), 0.1 );",
+
+			"}",
+
+			"void main() {",
+
+				"float x = KSTextureCompute( vUv );",
+
+				"gl_FragColor = vec4( x, x, x, 1.0 );",
+
+			"}"
+
+		].join("\n")
+
+	}
 
 };

examples/js/postprocessing/ShaderPass.js

@@ -25,7 +25,11 @@ THREE.ShaderPass.prototype = {
 
 	render: function ( renderer, writeBuffer, readBuffer, delta ) {
 
-		this.uniforms[ this.textureID ].texture = readBuffer;
+		if ( this.uniforms[ this.textureID ] ) {
+
+			this.uniforms[ this.textureID ].texture = readBuffer;
+
+		}
 
 		THREE.EffectComposer.quad.materials[ 0 ] = this.material;
 

examples/webgl_materials_skin.html

@@ -43,7 +43,6 @@
 
 		<script type="text/javascript" src="../build/Three.js"></script>
 
-
 		<script type="text/javascript" src="js/ShaderExtras.js"></script>
 		<script type="text/javascript" src="js/ShaderSkin.js"></script>
 
@@ -71,7 +70,7 @@
 
 			var mesh;
 
-			var composer, composerUV1, composerUV2, composerUV3;
+			var composer, composerUV1, composerUV2, composerUV3, composerBeckmann;
 
 			var directionalLight, pointLight, ambientLight;
 
@@ -99,6 +98,7 @@
 				ambientLight = new THREE.AmbientLight( 0x222222 );
 				scene.add( ambientLight );
 
+
 				directionalLight = new THREE.DirectionalLight( 0xffeedd, 1 );
 				directionalLight.position.set( 1, -1, 1 );
 				directionalLight.position.normalize();
@@ -108,7 +108,7 @@
 
 				var ambient = 0x111111, diffuse = 0xbbbbbb, specular = 0x070707, shininess = 50;
 
-				specular = 0x090909;
+				specular = 0x555555;
 
 				var shader = THREE.ShaderSkin[ "skin" ];
 
@@ -125,7 +125,8 @@
 				uniformsUV[ "uSpecularColor" ].value.setHex( specular );
 				uniformsUV[ "uAmbientColor" ].value.setHex( ambient );
 
-				uniformsUV[ "uShininess" ].value = shininess;
+				uniformsUV[ "uRoughness" ].value = 0.185;
+				uniformsUV[ "uSpecularBrightness" ].value = 0.8;
 
 				var uniforms = THREE.UniformsUtils.clone( uniformsUV );
 				uniforms[ "tDiffuse" ].texture = uniformsUV[ "tDiffuse" ].texture;
@@ -222,6 +223,14 @@
 
 				//
 
+				var effectBeckmann = new THREE.ShaderPass( THREE.ShaderSkin[ "beckmann" ] );
+
+				composerBeckmann = new THREE.EffectComposer( renderer, new THREE.WebGLRenderTarget( rtwidth, rtheight, pars ) );
+
+				composerBeckmann.addPass( effectBeckmann );
+
+				//
+
 				var effectBloom = new THREE.BloomPass( 0.25 );
 
 				var effectBleach = new THREE.ShaderPass( THREE.ShaderExtras[ "bleachbypass" ] );
@@ -242,6 +251,8 @@
 				uniforms[ "tBlur3" ].texture = composerUV2.renderTarget2;
 				uniforms[ "tBlur4" ].texture = composerUV3.renderTarget2;
 
+				uniforms[ "tBeckmann" ].texture = composerBeckmann.renderTarget1;
+
 
 			}
 
@@ -292,6 +303,9 @@
 
 				renderer.clear();
 
+				composerBeckmann.render();
+
+
 				composerScene.render();
 
 				composerUV1.render();