Add support for normal maps in MeshPhongMaterial.js

Normal maps store the perturbation of the surface normal (vector field), as opposed to bump maps, which are height fields (scalar field).

src/materials/MeshPhongMaterial.js

@@ -17,6 +17,9 @@
  *  bumpMap: new THREE.Texture( <Image> ),
  *  bumpScale: <float>,
  *
+ *  normalMap: new THREE.Texture( <Image> ),
+ *  normalScale: <float>,
+ *
  *  specularMap: new THREE.Texture( <Image> ),
  *
  *  envMap: new THREE.TextureCube( [posx, negx, posy, negy, posz, negz] ),
@@ -64,6 +67,9 @@ THREE.MeshPhongMaterial = function ( parameters ) {
 	this.bumpMap = null;
 	this.bumpScale = 1;
 
+	this.normalMap = null;
+	this.normalScale = 1;
+
 	this.specularMap = null;
 
 	this.envMap = null;
@@ -115,7 +121,10 @@ THREE.MeshPhongMaterial.prototype.clone = function () {
 	material.lightMap = this.lightMap;
 
 	material.bumpMap = this.bumpMap;
-	material.bumpScale= this.bumpScale;
+	material.bumpScale = this.bumpScale;
+
+	material.normalMap = this.normalMap;
+	material.normalScale = this.normalScale;
 
 	material.specularMap = this.specularMap;
 

src/renderers/WebGLRenderer.js

@@ -928,7 +928,7 @@ THREE.WebGLRenderer = function ( parameters ) {
 
 		// material must use some texture to require uvs
 
-		if ( material.map || material.lightMap || material.bumpMap || material.specularMap || material instanceof THREE.ShaderMaterial ) {
+		if ( material.map || material.lightMap || material.bumpMap || material.normalMap || material.specularMap || material instanceof THREE.ShaderMaterial ) {
 
 			return true;
 
@@ -4647,6 +4647,7 @@ THREE.WebGLRenderer = function ( parameters ) {
 			envMap: !!material.envMap,
 			lightMap: !!material.lightMap,
 			bumpMap: !!material.bumpMap,
+			normalMap: !!material.normalMap,
 			specularMap: !!material.specularMap,
 
 			vertexColors: material.vertexColors,
@@ -4996,6 +4997,11 @@ THREE.WebGLRenderer = function ( parameters ) {
 			uniforms.bumpScale.value = material.bumpScale;
 
 		}
+		if ( material.normalMap ) {
+
+			uniforms.normalMap.texture = material.normalMap;
+			uniforms.normalScale.value = material.normalScale;
+		}
 
 		// uv repeat and offset setting priorities
 		//	1. color map
@@ -5012,6 +5018,10 @@ THREE.WebGLRenderer = function ( parameters ) {
 
 			uvScaleMap = material.specularMap;
 
+		} else if ( material.normalMap ) {
+
+			uvScaleMap = material.normalMap;
+
 		} else if ( material.bumpMap ) {
 
 			uvScaleMap = material.bumpMap;
@@ -5871,6 +5881,7 @@ THREE.WebGLRenderer = function ( parameters ) {
 			parameters.envMap ? "#define USE_ENVMAP" : "",
 			parameters.lightMap ? "#define USE_LIGHTMAP" : "",
 			parameters.bumpMap ? "#define USE_BUMPMAP" : "",
+			parameters.normalMap ? "#define USE_NORMALMAP" : "",
 			parameters.specularMap ? "#define USE_SPECULARMAP" : "",
 			parameters.vertexColors ? "#define USE_COLOR" : "",
 
@@ -5952,7 +5963,7 @@ THREE.WebGLRenderer = function ( parameters ) {
 
 			"precision " + _precision + " float;",
 
-			parameters.bumpMap ? "#extension GL_OES_standard_derivatives : enable" : "",
+			(parameters.bumpMap||parameters.normalMap) ? "#extension GL_OES_standard_derivatives : enable" : "",
 
 			"#define MAX_DIR_LIGHTS " + parameters.maxDirLights,
 			"#define MAX_POINT_LIGHTS " + parameters.maxPointLights,
@@ -5973,6 +5984,7 @@ THREE.WebGLRenderer = function ( parameters ) {
 			parameters.envMap ? "#define USE_ENVMAP" : "",
 			parameters.lightMap ? "#define USE_LIGHTMAP" : "",
 			parameters.bumpMap ? "#define USE_BUMPMAP" : "",
+            parameters.normalMap ? "#define USE_NORMALMAP" : "",
 			parameters.specularMap ? "#define USE_SPECULARMAP" : "",
 			parameters.vertexColors ? "#define USE_COLOR" : "",
 
@@ -5990,7 +6002,9 @@ THREE.WebGLRenderer = function ( parameters ) {
 			"uniform vec3 cameraPosition;",
 			""
 
-		].join("\n");
+		];
+        
+        prefix_fragment = prefix_fragment.join("\n");
 
 		var glFragmentShader = getShader( "fragment", prefix_fragment + fragmentShader );
 		var glVertexShader = getShader( "vertex", prefix_vertex + vertexShader );

src/renderers/WebGLShaders.js

@@ -64,7 +64,7 @@ THREE.ShaderChunk = {
 			"uniform float flipEnvMap;",
 			"uniform int combine;",
 
-			"#ifdef USE_BUMPMAP",
+			"#if defined(USE_BUMPMAP) || defined(USE_NORMALMAP)",
 
 				"uniform bool useRefract;",
 				"uniform float refractionRatio;",
@@ -85,7 +85,7 @@ THREE.ShaderChunk = {
 
 			"vec3 reflectVec;",
 
-			"#ifdef USE_BUMPMAP",
+			"#if defined(USE_BUMPMAP) || defined(USE_NORMALMAP)",
 
 				"vec3 cameraToVertex = normalize( vWorldPosition - cameraPosition );",
 
@@ -138,7 +138,7 @@ THREE.ShaderChunk = {
 
 	envmap_pars_vertex: [
 
-		"#if defined( USE_ENVMAP ) && ! defined( USE_BUMPMAP )",
+		"#if defined( USE_ENVMAP ) && ! defined( USE_BUMPMAP ) && ! defined(USE_NORMALMAP)",
 
 			"varying vec3 vReflect;",
 
@@ -157,7 +157,7 @@ THREE.ShaderChunk = {
 
 		"#endif",
 
-		"#if defined( USE_ENVMAP ) && ! defined( USE_BUMPMAP )",
+		"#if defined( USE_ENVMAP ) && ! defined( USE_BUMPMAP ) && ! defined(USE_NORMALMAP)",
 
 			"vec3 nWorld = mat3( modelMatrix[ 0 ].xyz, modelMatrix[ 1 ].xyz, modelMatrix[ 2 ].xyz ) * normal;",
 
@@ -202,7 +202,7 @@ THREE.ShaderChunk = {
 
 	map_pars_vertex: [
 
-		"#if defined( USE_MAP ) || defined( USE_BUMPMAP ) || defined( USE_SPECULARMAP )",
+		"#if defined( USE_MAP ) || defined( USE_BUMPMAP ) || defined( USE_NORMALMAP ) || defined( USE_SPECULARMAP )",
 
 			"varying vec2 vUv;",
 			"uniform vec4 offsetRepeat;",
@@ -213,7 +213,7 @@ THREE.ShaderChunk = {
 
 	map_pars_fragment: [
 
-		"#if defined( USE_MAP ) || defined( USE_BUMPMAP ) || defined( USE_SPECULARMAP )",
+		"#if defined( USE_MAP ) || defined( USE_BUMPMAP ) || defined( USE_NORMALMAP ) || defined( USE_SPECULARMAP )",
 
 			"varying vec2 vUv;",
 
@@ -229,7 +229,7 @@ THREE.ShaderChunk = {
 
 	map_vertex: [
 
-		"#if defined( USE_MAP ) || defined( USE_BUMPMAP ) || defined( USE_SPECULARMAP )",
+		"#if defined( USE_MAP ) || defined( USE_BUMPMAP ) || defined( USE_NORMALMAP ) || defined( USE_SPECULARMAP )",
 
 			"vUv = uv * offsetRepeat.zw + offsetRepeat.xy;",
 
@@ -348,6 +348,39 @@ THREE.ShaderChunk = {
 
 	].join("\n"),
 
+	// NORMAL MAP
+	normalmap_pars_fragment: [
+
+		"#ifdef USE_NORMALMAP",
+
+			"uniform sampler2D normalMap;",
+			"uniform float normalScale;",
+
+			// Per-Pixel Tangent Space Normal Mapping
+			// http://hacksoflife.blogspot.ch/2009/11/per-pixel-tangent-space-normal-mapping.html
+
+			"vec3 perturbNormal2Arb( vec3 eye_pos, vec3 surf_norm) {",
+
+				"vec3 q0 = dFdx(eye_pos.xyz);",
+				"vec3 q1 = dFdy(eye_pos.xyz);",
+				"vec2 st0 = dFdx(vUv.st);",
+				"vec2 st1 = dFdy(vUv.st);",
+
+				"vec3 S = normalize( q0 * st1.t - q1 * st0.t);",
+				"vec3 T = normalize(-q0 * st1.s + q1 * st0.s);",
+				"vec3 N = normalize(surf_norm);",
+
+				"vec3 mapN = texture2D( normalMap, vUv ).xyz * 2.0 - 1.0;",
+				"mapN.xy = normalScale * mapN.xy;",
+				"mat3 tsn = mat3( S, T, N );",
+				"return normalize( tsn * mapN );",
+
+			"}",
+
+		"#endif"
+
+	].join("\n"),
+
 	// SPECULAR MAP
 
 	specularmap_pars_fragment: [
@@ -763,7 +796,11 @@ THREE.ShaderChunk = {
 
 		"#endif",
 
-		"#ifdef USE_BUMPMAP",
+		"#ifdef USE_NORMALMAP",
+
+			"normal = perturbNormal2Arb( -viewPosition, normal);",
+
+		"#elif defined( USE_BUMPMAP )",
 
 			"normal = perturbNormalArb( -vViewPosition, normal, dHdxy_fwd() );",
 
@@ -1633,6 +1670,12 @@ THREE.UniformsLib = {
 
 	},
 
+	normalmap: {
+
+		"normalMap" : { type: "t", value: 4, texture: null },
+		"normalScale" : { type: "f", value: 1 }
+	},
+
 	fog : {
 
 		"fogDensity" : { type: "f", value: 0.00025 },
@@ -1973,6 +2016,7 @@ THREE.ShaderLib = {
 
 			THREE.UniformsLib[ "common" ],
 			THREE.UniformsLib[ "bump" ],
+            THREE.UniformsLib[ "normalmap" ],
 			THREE.UniformsLib[ "fog" ],
 			THREE.UniformsLib[ "lights" ],
 			THREE.UniformsLib[ "shadowmap" ],
@@ -2053,6 +2097,7 @@ THREE.ShaderLib = {
 			THREE.ShaderChunk[ "lights_phong_pars_fragment" ],
 			THREE.ShaderChunk[ "shadowmap_pars_fragment" ],
 			THREE.ShaderChunk[ "bumpmap_pars_fragment" ],
+            THREE.ShaderChunk[ "normalmap_pars_fragment" ],
 			THREE.ShaderChunk[ "specularmap_pars_fragment" ],
 
 			"void main() {",