Let skin shader use derivatives for tangents.

examples/js/ShaderSkin.js

@@ -355,7 +355,9 @@ THREE.ShaderSkin = {
 				"opacity": 	  { type: "f", value: 1 },
 
 				"uRoughness": 	  		{ type: "f", value: 0.15 },
-				"uSpecularBrightness": 	{ type: "f", value: 0.75 }
+				"uSpecularBrightness": 	{ type: "f", value: 0.75 },
+
+				"uPixelSize":	{ type: "f", value: 0.01 }
 
 			}
 
@@ -383,9 +385,8 @@ THREE.ShaderSkin = {
 			"uniform sampler2D tBeckmann;",
 
 			"uniform float uNormalScale;",
+			"uniform float uPixelSize;",
 
-			"varying vec3 vTangent;",
-			"varying vec3 vBinormal;",
 			"varying vec3 vNormal;",
 			"varying vec2 vUv;",
 
@@ -453,16 +454,26 @@ THREE.ShaderSkin = {
 
 				"vec4 mSpecular = vec4( specular, opacity );",
 
-				"vec3 normalTex = texture2D( tNormal, vUv ).xyz * 2.0 - 1.0;",
-				"normalTex.xy *= uNormalScale;",
-				"normalTex = normalize( normalTex );",
-
 				"vec4 colDiffuse = texture2D( tDiffuse, vUv );",
 				"colDiffuse *= colDiffuse;",
 
 				"diffuseColor *= colDiffuse;",
 
-				"mat3 tsb = mat3( vTangent, vBinormal, vNormal );",
+				// normal mapping
+
+				"vec2 uz = vec2( vUv.x, vViewPosition.z );",
+				"vec2 uzDx = dFdx( uz ), uzDy = dFdy( uz );",
+				"vec2 tangent2D = normalize( vec2( uzDx.x, uzDy.x ) );",
+				"vec2 zVec2D = vec2( uzDx.y, uzDy.y );",
+				"vec3 tangent = vec3( tangent2D * uPixelSize, dot( tangent2D, zVec2D ) );",
+				"vec3 binormal = normalize( cross( vNormal, tangent ) );",
+				"tangent = cross( binormal, vNormal );",
+				"mat3 tsb = mat3( tangent, binormal, vNormal );",
+
+				"vec3 normalTex = texture2D( tNormal, vUv ).xyz * 2.0 - 1.0;",
+				"normalTex.xy *= uNormalScale;",
+				"normalTex = normalize( normalTex );",
+
 				"vec3 finalNormal = tsb * normalTex;",
 
 				"vec3 normal = normalize( finalNormal );",
@@ -572,8 +583,6 @@ THREE.ShaderSkin = {
 
 		vertexShader: [
 
-			"attribute vec4 tangent;",
-
 			"#ifdef VERTEX_TEXTURES",
 
 				"uniform sampler2D tDisplacement;",
@@ -582,8 +591,6 @@ THREE.ShaderSkin = {
 
 			"#endif",
 
-			"varying vec3 vTangent;",
-			"varying vec3 vBinormal;",
 			"varying vec3 vNormal;",
 			"varying vec2 vUv;",
 
@@ -611,13 +618,6 @@ THREE.ShaderSkin = {
 
 				"vNormal = normalize( normalMatrix * normal );",
 
-				// tangent and binormal vectors
-
-				"vTangent = normalize( normalMatrix * tangent.xyz );",
-
-				"vBinormal = cross( vNormal, vTangent ) * tangent.w;",
-				"vBinormal = normalize( vBinormal );",
-
 				"vUv = uv;",
 
 				// point lights
@@ -659,8 +659,6 @@ THREE.ShaderSkin = {
 
 		vertexShaderUV: [
 
-			"attribute vec4 tangent;",
-
 			"#ifdef VERTEX_TEXTURES",
 
 				"uniform sampler2D tDisplacement;",
@@ -669,8 +667,6 @@ THREE.ShaderSkin = {
 
 			"#endif",
 
-			"varying vec3 vTangent;",
-			"varying vec3 vBinormal;",
 			"varying vec3 vNormal;",
 			"varying vec2 vUv;",
 
@@ -698,13 +694,6 @@ THREE.ShaderSkin = {
 
 				"vNormal = normalize( normalMatrix * normal );",
 
-				// tangent and binormal vectors
-
-				"vTangent = normalize( normalMatrix * tangent.xyz );",
-
-				"vBinormal = cross( vNormal, vTangent ) * tangent.w;",
-				"vBinormal = normalize( vBinormal );",
-
 				"vUv = uv;",
 
 				// point lights

examples/webgl_materials_skin.html

@@ -87,6 +87,8 @@
 			var windowHalfX = window.innerWidth / 2;
 			var windowHalfY = window.innerHeight / 2;
 
+			var pixelSizeUniform = { type: 'f', value: 0.001 };
+
 			var firstPass = true;
 
 			init();
@@ -134,14 +136,18 @@
 				uniformsUV[ "uRoughness" ].value = 0.185;
 				uniformsUV[ "uSpecularBrightness" ].value = 0.8;
 
+
 				var uniforms = THREE.UniformsUtils.clone( uniformsUV );
 				uniforms[ "tDiffuse" ].value = uniformsUV[ "tDiffuse" ].value;
 				uniforms[ "tNormal" ].value = uniformsUV[ "tNormal" ].value;
 				uniforms[ "passID" ].value = 1;
 
-				var parameters = { fragmentShader: shader.fragmentShader, vertexShader: shader.vertexShader, uniforms: uniforms, lights: true };
-				var parametersUV = { fragmentShader: shader.fragmentShader, vertexShader: shader.vertexShaderUV, uniforms: uniformsUV, lights: true };
+				// let those refer to the same object for central control
+				uniformsUV[ "pixelSize" ] = pixelSizeUniform;
+				uniforms[ "pixelSize" ] = pixelSizeUniform;
 
+				var parameters = { fragmentShader: shader.fragmentShader, vertexShader: shader.vertexShader, uniforms: uniforms, lights: true, derivatives: true };
+				var parametersUV = { fragmentShader: shader.fragmentShader, vertexShader: shader.vertexShaderUV, uniforms: uniformsUV, lights: true, derivatives: true };
 
 				material = new THREE.ShaderMaterial( parameters );
 				var materialUV = new THREE.ShaderMaterial( parametersUV );
@@ -156,9 +162,10 @@
 				renderer = new THREE.WebGLRenderer( { antialias: false } );
 				renderer.setClearColor( 0x050505 );
 				renderer.setPixelRatio( window.devicePixelRatio );
-				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.autoClear = false;
 
+				onWindowResize(); // sets size
+
 				container.appendChild( renderer.domElement );
 
 				// STATS
@@ -267,14 +274,17 @@
 				camera.aspect = window.innerWidth / window.innerHeight;
 				camera.updateProjectionMatrix();
 
+				var projection00 = camera.projectionMatrix.elements[0];
+				// == 1 / windowHalfX, in view space, assuming near == 1
+
+				pixelSizeUniform.value = 1 / ( projection00 * windowHalfX );
+
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 			}
 
 			function createScene( geometry, scale, material ) {
 
-				geometry.computeTangents();
-
 				mesh = new THREE.Mesh( geometry, material );
 				mesh.position.y = - 50;
 				mesh.scale.set( scale, scale, scale );