Extended Loader base class to handle normal map materials.

Plus some more Loader changes:

- fixed diffuse color and opacity being skipped when diffuse texture is present in JSON
- more proper handling of Phong materials (now use ambient / diffuse / specular / shininess from JSON)
- added handling of wrap / offset / repeat parameters for all textures

Fixed broken multiple lights indices in new normal map shader and changed displacement scale and bias to saner values.

Fixed broken postprocessing and Earth examples (were not yet translated to use new normal map shader).

src/extras/ShaderUtils.js

@@ -3,6 +3,8 @@
  * @author mr.doob / http://mrdoob.com/
  */
 
+if ( THREE.WebGLRenderer ) {
+
 THREE.ShaderUtils = {
 
 	lib: {
@@ -109,8 +111,8 @@ THREE.ShaderUtils = {
 				"uNormalScale": { type: "f", value: 1.0 },
 
 				"tDisplacement": { type: "t", value: 5, texture: null },
-				"uDisplacementBias": { type: "f", value: -0.5 },
-				"uDisplacementScale": { type: "f", value: 2.5 },
+				"uDisplacementBias": { type: "f", value: 0.0 },
+				"uDisplacementScale": { type: "f", value: 1.0 },
 
 				"uDiffuseColor": { type: "c", value: new THREE.Color( 0xeeeeee ) },
 				"uSpecularColor": { type: "c", value: new THREE.Color( 0x111111 ) },
@@ -196,8 +198,8 @@ THREE.ShaderUtils = {
 
 						"for ( int i = 0; i < MAX_POINT_LIGHTS; i ++ ) {",
 
-							"vec3 pointVector = normalize( vPointLight[ 0 ].xyz );",
-							"vec3 pointHalfVector = normalize( vPointLight[ 0 ].xyz + vViewPosition );",
+							"vec3 pointVector = normalize( vPointLight[ i ].xyz );",
+							"vec3 pointHalfVector = normalize( vPointLight[ i ].xyz + vViewPosition );",
 							"float pointDistance = vPointLight[ i ].w;",
 
 							"float pointDotNormalHalf = dot( normal, pointHalfVector );",
@@ -207,7 +209,7 @@ THREE.ShaderUtils = {
 							"if ( pointDotNormalHalf >= 0.0 )",
 								"pointSpecularWeight = specularTex.r * pow( pointDotNormalHalf, uShininess );",
 
-							"pointTotal  += pointDistance * vec4( pointLightColor[ 0 ], 1.0 ) * ( mColor * pointDiffuseWeight + mSpecular * pointSpecularWeight * pointDiffuseWeight );",
+							"pointTotal  += pointDistance * vec4( pointLightColor[ i ], 1.0 ) * ( mColor * pointDiffuseWeight + mSpecular * pointSpecularWeight * pointDiffuseWeight );",
 
 						"}",
 
@@ -221,7 +223,7 @@ THREE.ShaderUtils = {
 
 						"for( int i = 0; i < MAX_DIR_LIGHTS; i++ ) {",
 
-							"vec4 lDirection = viewMatrix * vec4( directionalLightDirection[ 0 ], 0.0 );",
+							"vec4 lDirection = viewMatrix * vec4( directionalLightDirection[ i ], 0.0 );",
 
 							"vec3 dirVector = normalize( lDirection.xyz );",
 							"vec3 dirHalfVector = normalize( lDirection.xyz + vViewPosition );",
@@ -233,7 +235,7 @@ THREE.ShaderUtils = {
 							"if ( dirDotNormalHalf >= 0.0 )",
 								"dirSpecularWeight = specularTex.r * pow( dirDotNormalHalf, uShininess );",
 
-							"dirTotal  += vec4( directionalLightColor[ 0 ], 1.0 ) * ( mColor * dirDiffuseWeight + mSpecular * dirSpecularWeight * dirDiffuseWeight );",
+							"dirTotal  += vec4( directionalLightColor[ i ], 1.0 ) * ( mColor * dirDiffuseWeight + mSpecular * dirSpecularWeight * dirDiffuseWeight );",
 
 						"}",
 
@@ -655,3 +657,5 @@ THREE.ShaderUtils = {
 	}
 
 };
+
+};

src/extras/io/BinaryLoader.js

@@ -227,6 +227,8 @@ THREE.BinaryLoader.prototype = {
 			this.computeCentroids();
 			this.computeFaceNormals();
 
+			if ( THREE.Loader.prototype.hasNormals( this ) ) this.computeTangents();
+
 			//var e = (new Date).getTime();
 
 			//log( "binary data parse time: " + (e-s) + " ms" );

src/extras/io/JSONLoader.js

@@ -26,7 +26,7 @@ THREE.JSONLoader.prototype.load = function ( parameters ) {
 
 	var scope = this,
 		url = parameters.model,
-		callback = parameters.callback, 
+		callback = parameters.callback,
 		texture_path = parameters.texture_path ? parameters.texture_path : this.extractUrlbase( url ),
 		worker = new Worker( url );
 
@@ -59,6 +59,8 @@ THREE.JSONLoader.prototype.createModel = function ( json, callback, texture_path
 	geometry.computeCentroids();
 	geometry.computeFaceNormals();
 
+	if ( this.hasNormals( geometry ) ) geometry.computeTangents();
+
 	// geometry.computeEdgeFaces();
 
 	function parseModel( scale ) {
@@ -351,7 +353,7 @@ THREE.JSONLoader.prototype.createModel = function ( json, callback, texture_path
 
 				}
 
-			} 
+			}
 
 		}
 
@@ -376,7 +378,7 @@ THREE.JSONLoader.prototype.createModel = function ( json, callback, texture_path
 
 				}
 
-			} 
+			}
 
 		}
 

src/extras/io/Loader.js

@@ -19,15 +19,15 @@ THREE.Loader.prototype = {
 
 		var e = document.createElement( "div" );
 
-		e.style.position = "absolute"; 
-		e.style.right = "0px"; 
-		e.style.top = "0px"; 
-		e.style.fontSize = "0.8em"; 
+		e.style.position = "absolute";
+		e.style.right = "0px";
+		e.style.top = "0px";
+		e.style.fontSize = "0.8em";
 		e.style.textAlign = "left";
-		e.style.background = "rgba(0,0,0,0.25)"; 
-		e.style.color = "#fff"; 
-		e.style.width = "120px"; 
-		e.style.padding = "0.5em 0.5em 0.5em 0.5em"; 
+		e.style.background = "rgba(0,0,0,0.25)";
+		e.style.color = "#fff";
+		e.style.width = "120px";
+		e.style.padding = "0.5em 0.5em 0.5em 0.5em";
 		e.style.zIndex = 1000;
 
 		e.innerHTML = "Loading ...";
@@ -75,6 +75,22 @@ THREE.Loader.prototype = {
 
 	},
 
+	hasNormals: function( scope ) {
+
+		var m, i, il = scope.materials.length;
+
+		for( i = 0; i < il; i++ ) {
+
+			m = scope.materials[ i ][ 0 ];
+
+			if ( m instanceof THREE.MeshShaderMaterial ) return true;
+
+		}
+
+		return false;
+
+	},
+
 	createMaterial: function ( m, texture_path ) {
 
 		function is_pow2( n ) {
@@ -120,7 +136,53 @@ THREE.Loader.prototype = {
 
 		}
 
-		var material, mtype, mpars, texture, color, vertexColors;
+		function create_texture( where, name, sourceFile, repeat, offset, wrap ) {
+
+			var texture = document.createElement( 'canvas' );
+
+			where[ name ] = new THREE.Texture( texture );
+			where[ name ].sourceFile = sourceFile;
+
+			if( repeat ) {
+
+				where[ name ].repeat.set( repeat[ 0 ], repeat[ 1 ] );
+
+				if ( repeat[ 0 ] != 1 ) where[ name ].wrapS = THREE.RepeatWrapping;
+				if ( repeat[ 1 ] != 1 ) where[ name ].wrapT = THREE.RepeatWrapping;
+
+			}
+
+			if( offset ) {
+
+				where[ name ].offset.set( offset[ 0 ], offset[ 1 ] );
+
+			}
+
+			if( wrap ) {
+
+				var wrapMap = {
+				"repeat" 	: THREE.RepeatWrapping,
+				"mirror"	: THREE.MirroredRepeatWrapping
+				}
+
+				if ( wrapMap[ wrap[ 0 ] ] !== undefined ) where[ name ].wrapS = wrapMap[ wrap[ 0 ] ];
+				if ( wrapMap[ wrap[ 1 ] ] !== undefined ) where[ name ].wrapT = wrapMap[ wrap[ 1 ] ];
+
+			}
+
+			load_image( where[ name ], texture_path + "/" + sourceFile );
+
+		}
+
+		function rgb2hex( rgb ) {
+
+			return ( rgb[ 0 ] * 255 << 16 ) + ( rgb[ 1 ] * 255 << 8 ) + rgb[ 2 ] * 255;
+
+		}
+
+		var material, mtype, mpars,
+			color, specular, ambient,
+			vertexColors;
 
 		// defaults
 
@@ -128,7 +190,7 @@ THREE.Loader.prototype = {
 
 		// vertexColors
 
-		mpars = { color: 0xeeeeee, opacity: 1.0, map: null, lightMap: null, wireframe: m.wireframe };
+		mpars = { color: 0xeeeeee, opacity: 1.0, map: null, lightMap: null, normalMap: null, wireframe: m.wireframe };
 
 		// parameters from model file
 
@@ -173,47 +235,11 @@ THREE.Loader.prototype = {
 
 		}
 
-		if ( m.mapDiffuse && texture_path ) {
+		// colors
 
-			texture = document.createElement( 'canvas' );
+		if ( m.colorDiffuse ) {
 
-			mpars.map = new THREE.Texture( texture );
-			mpars.map.sourceFile = m.mapDiffuse;
-
-			if( m.mapDiffuseRepeat ) {
-
-				mpars.map.repeat.set( m.mapDiffuseRepeat[ 0 ], m.mapDiffuseRepeat[ 1 ] );
-
-				if ( m.mapDiffuseRepeat[ 0 ] != 1 ) mpars.map.wrapS = THREE.RepeatWrapping;
-				if ( m.mapDiffuseRepeat[ 1 ] != 1 ) mpars.map.wrapT = THREE.RepeatWrapping;
-
-			}
-
-			if( m.mapDiffuseOffset ) {
-
-				mpars.map.offset.set( m.mapDiffuseOffset[ 0 ], m.mapDiffuseOffset[ 1 ] );
-
-			}
-
-			if( m.mapDiffuseWrap ) {
-
-				var wrapMap = {
-				"repeat" 	: THREE.RepeatWrapping,
-				"mirror"	: THREE.MirroredRepeatWrapping
-				}
-
-				if ( wrapMap[ m.mapDiffuseWrap[ 0 ] ] !== undefined ) mpars.map.wrapS = wrapMap[ m.mapDiffuseWrap[ 0 ] ];
-				if ( wrapMap[ m.mapDiffuseWrap[ 1 ] ] !== undefined ) mpars.map.wrapT = wrapMap[ m.mapDiffuseWrap[ 1 ] ];
-
-			}
-
-			load_image( mpars.map, texture_path + "/" + m.mapDiffuse );
-
-		} else if ( m.colorDiffuse ) {
-
-			color = ( m.colorDiffuse[ 0 ] * 255 << 16 ) + ( m.colorDiffuse[ 1 ] * 255 << 8 ) + m.colorDiffuse[ 2 ] * 255;
-			mpars.color = color;
-			mpars.opacity =  m.transparency;
+			mpars.color = rgb2hex( m.colorDiffuse );
 
 		} else if ( m.DbgColor ) {
 
@@ -221,31 +247,105 @@ THREE.Loader.prototype = {
 
 		}
 
-		if ( m.mapLight && texture_path ) {
+		if ( m.colorSpecular ) {
 
-			texture = document.createElement( 'canvas' );
-
-			mpars.lightMap = new THREE.Texture( texture );
-			mpars.lightMap.sourceFile = m.mapLight;
-
-			if( m.mapLightmapRepeat ) {
-
-				mpars.lightMap.repeat.set( m.mapLightRepeat[ 0 ], m.mapLightRepeat[ 1 ] );
-				mpars.lightMap.wrapS = mpars.lightMap.wrapT = THREE.RepeatWrapping;
-
-			}
-
-			if( m.mapLightmapOffset ) {
-
-				mpars.lightMap.offset.set( m.mapLightmapOffset[ 0 ], m.mapLightmapOffset[ 1 ] );
-
-			}
-
-			load_image( mpars.lightMap, texture_path + "/" + m.mapLightmap );
+			mpars.specular = rgb2hex( m.colorSpecular );
 
 		}
 
-		material = new THREE[ mtype ]( mpars );
+		if ( m.colorAmbient ) {
+
+			mpars.ambient = rgb2hex( m.colorAmbient );
+
+		}
+
+		// modifiers
+
+		if ( m.transparency ) {
+
+			mpars.opacity = m.transparency;
+
+		}
+
+		if ( m.specularCoef ) {
+
+			mpars.shininess = m.specularCoef;
+
+		}
+
+		// textures
+
+		if ( m.mapDiffuse && texture_path ) {
+
+			create_texture( mpars, "map", m.mapDiffuse, m.mapDiffuseRepeat, m.mapDiffuseOffset, m.mapDiffuseWrap );
+
+		}
+
+		if ( m.mapLight && texture_path ) {
+
+			create_texture( mpars, "lightMap", m.mapLight, m.mapLightRepeat, m.mapLightOffset, m.mapLightWrap );
+
+		}
+
+		if ( m.mapNormal && texture_path ) {
+
+			create_texture( mpars, "normalMap", m.mapNormal, m.mapNormalRepeat, m.mapNormalOffset, m.mapNormalWrap );
+
+		}
+
+		// special case for normal mapped material
+
+		if ( m.mapNormal ) {
+
+			var shader = THREE.ShaderUtils.lib[ "normal" ];
+			var uniforms = THREE.UniformsUtils.clone( shader.uniforms );
+
+			var diffuse = mpars.color;
+			var specular = mpars.specular;
+			var ambient = mpars.ambient;
+			var shininess = mpars.shininess;
+
+			uniforms[ "tNormal" ].texture = mpars.normalMap;
+
+			if ( m.mapNormalFactor ) {
+
+				uniforms[ "uNormalScale" ].value = m.mapNormalFactor;
+
+			}
+
+			if ( mpars.map ) {
+
+				uniforms[ "tDiffuse" ].texture = mpars.map;
+				uniforms[ "enableDiffuse" ].value = true;
+
+			}
+
+			// for the moment don't handle specular, AO and displacement textures
+
+			uniforms[ "enableAO" ].value = false;
+			uniforms[ "enableSpecular" ].value = false;
+
+			uniforms[ "uDiffuseColor" ].value.setHex( diffuse );
+			uniforms[ "uSpecularColor" ].value.setHex( specular );
+			uniforms[ "uAmbientColor" ].value.setHex( ambient );
+
+			uniforms[ "uShininess" ].value = shininess;
+
+			if ( mpars.opacity ) {
+
+				uniforms[ "uOpacity" ].value = mpars.opacity;
+
+			}
+
+			var parameters = { fragmentShader: shader.fragmentShader, vertexShader: shader.vertexShader, uniforms: uniforms, lights: true };
+
+			material = new THREE.MeshShaderMaterial( parameters );
+
+		} else {
+
+			material = new THREE[ mtype ]( mpars );
+
+		}
 
 		return material;