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).

examples/webgl_postprocessing.html

@@ -222,21 +222,13 @@
 				uniforms[ "enableAO" ].value = false;
 				uniforms[ "enableDiffuse" ].value = true;
 
-				uniforms[ "uPointLightPos" ].value = new THREE.Vector3(0,0,0);
-				uniforms[ "uPointLightColor" ].value = new THREE.Color(1,0,0);
-
-				uniforms[ "uDirLightPos" ].value = directionalLight.position;
-				uniforms[ "uDirLightColor" ].value = directionalLight.color;
-
-				uniforms[ "uAmbientLightColor" ].value = new THREE.Color(0,0,0);
-
 				uniforms[ "uDiffuseColor" ].value.setHex( diffuse );
 				uniforms[ "uSpecularColor" ].value.setHex( specular );
 				uniforms[ "uAmbientColor" ].value.setHex( ambient );
 
 				uniforms[ "uShininess" ].value = shininess;
 
-				var parameters = { fragmentShader: shader.fragmentShader, vertexShader: shader.vertexShader, uniforms: uniforms };
+				var parameters = { fragmentShader: shader.fragmentShader, vertexShader: shader.vertexShader, uniforms: uniforms, lights: true };
 				var mat2 = new THREE.MeshShaderMaterial( parameters );
 
 				mesh = new THREE.Mesh( geometry, mat2 );

examples/webgl_trackballcamera_earth.html

@@ -28,7 +28,7 @@
 		a { color: green; }
 		b { color: green; }
 
-	</style> 
+	</style>
 
 	<script type="text/javascript" src="../build/Three.js"></script>
 	<script type="text/javascript" src="js/Detector.js"></script>
@@ -81,7 +81,7 @@
 	function init() {
 
 		container = document.createElement( 'div' );
-		document.body.appendChild( container ); 
+		document.body.appendChild( container );
 
 
 		scene = new THREE.Scene();
@@ -96,7 +96,7 @@
 
 		camera = new THREE.TrackballCamera({
 
-			fov: 25, 
+			fov: 25,
 			aspect: width / height,
 			near: 50,
 			far: 1e7,
@@ -150,11 +150,6 @@
 		uniforms[ "enableDiffuse" ].value = true;
 		uniforms[ "enableSpecular" ].value = true;
 
-		uniforms[ "uDirLightPos" ].value = dirLight.position;
-		uniforms[ "uDirLightColor" ].value = dirLight.color;
-
-		uniforms[ "uAmbientLightColor" ].value = ambientLight.color;
-
 		uniforms[ "uDiffuseColor" ].value.setHex( 0xffffff );
 		uniforms[ "uSpecularColor" ].value.setHex( 0xaaaaaa );
 		uniforms[ "uAmbientColor" ].value.setHex( 0x000000 );
@@ -162,11 +157,12 @@
 		uniforms[ "uShininess" ].value = 30;
 
 		var materialNormalMap = new THREE.MeshShaderMaterial({
-			fragmentShader: shader.fragmentShader, 
-			vertexShader: shader.vertexShader, 
-			uniforms: uniforms 
+			fragmentShader: shader.fragmentShader,
+			vertexShader: shader.vertexShader,
+			uniforms: uniforms,
+			lights: true
 		});
-		
+
 
 		// planet
 
@@ -215,7 +211,7 @@
 		}
 
 		var stars,
-		starsMaterials = [ 
+		starsMaterials = [
 			new THREE.ParticleBasicMaterial( { color: 0x555555, size: 2, sizeAttenuation: false } ),
 			new THREE.ParticleBasicMaterial( { color: 0x555555, size: 1, sizeAttenuation: false } ),
 			new THREE.ParticleBasicMaterial( { color: 0x333333, size: 2, sizeAttenuation: false } ),
@@ -272,7 +268,7 @@
 	function animate() {
 
 		requestAnimationFrame( animate );
- 
+
 		render();
 		stats.update();
 
@@ -284,7 +280,7 @@
 		dt = ( t - time ) / 1000;
 		time = t;
 
-		meshPlanet.rotation.y += rotationSpeed * dt; 
+		meshPlanet.rotation.y += rotationSpeed * dt;
 		meshClouds.rotation.y += 1.25 * rotationSpeed * dt;
 
 		var angle = dt * rotationSpeed;

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,79 +235,117 @@ THREE.Loader.prototype = {
 
 		}
 
-		if ( m.mapDiffuse && texture_path ) {
+		// colors
+
+		if ( m.colorDiffuse ) {
+
+			mpars.color = rgb2hex( m.colorDiffuse );
 
-			texture = document.createElement( 'canvas' );
+		} else if ( m.DbgColor ) {
 
-			mpars.map = new THREE.Texture( texture );
-			mpars.map.sourceFile = m.mapDiffuse;
+			mpars.color = m.DbgColor;
 
-			if( m.mapDiffuseRepeat ) {
+		}
 
-				mpars.map.repeat.set( m.mapDiffuseRepeat[ 0 ], m.mapDiffuseRepeat[ 1 ] );
+		if ( m.colorSpecular ) {
 
-				if ( m.mapDiffuseRepeat[ 0 ] != 1 ) mpars.map.wrapS = THREE.RepeatWrapping;
-				if ( m.mapDiffuseRepeat[ 1 ] != 1 ) mpars.map.wrapT = THREE.RepeatWrapping;
+			mpars.specular = rgb2hex( m.colorSpecular );
 
-			}
+		}
 
-			if( m.mapDiffuseOffset ) {
+		if ( m.colorAmbient ) {
 
-				mpars.map.offset.set( m.mapDiffuseOffset[ 0 ], m.mapDiffuseOffset[ 1 ] );
+			mpars.ambient = rgb2hex( m.colorAmbient );
 
-			}
+		}
 
-			if( m.mapDiffuseWrap ) {
+		// modifiers
 
-				var wrapMap = {
-				"repeat" 	: THREE.RepeatWrapping,
-				"mirror"	: THREE.MirroredRepeatWrapping
-				}
+		if ( m.transparency ) {
 
-				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 ] ];
+			mpars.opacity = m.transparency;
 
-			}
+		}
 
-			load_image( mpars.map, texture_path + "/" + m.mapDiffuse );
+		if ( m.specularCoef ) {
 
-		} else if ( m.colorDiffuse ) {
+			mpars.shininess = m.specularCoef;
 
-			color = ( m.colorDiffuse[ 0 ] * 255 << 16 ) + ( m.colorDiffuse[ 1 ] * 255 << 8 ) + m.colorDiffuse[ 2 ] * 255;
-			mpars.color = color;
-			mpars.opacity =  m.transparency;
+		}
 
-		} else if ( m.DbgColor ) {
+		// textures
 
-			mpars.color = m.DbgColor;
+		if ( m.mapDiffuse && texture_path ) {
+
+			create_texture( mpars, "map", m.mapDiffuse, m.mapDiffuseRepeat, m.mapDiffuseOffset, m.mapDiffuseWrap );
 
 		}
 
 		if ( m.mapLight && texture_path ) {
 
-			texture = document.createElement( 'canvas' );
+			create_texture( mpars, "lightMap", m.mapLight, m.mapLightRepeat, m.mapLightOffset, m.mapLightWrap );
 
-			mpars.lightMap = new THREE.Texture( texture );
-			mpars.lightMap.sourceFile = m.mapLight;
+		}
 
-			if( m.mapLightmapRepeat ) {
+		if ( m.mapNormal && texture_path ) {
 
-				mpars.lightMap.repeat.set( m.mapLightRepeat[ 0 ], m.mapLightRepeat[ 1 ] );
-				mpars.lightMap.wrapS = mpars.lightMap.wrapT = THREE.RepeatWrapping;
+			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( m.mapLightmapOffset ) {
+			if ( mpars.map ) {
 
-				mpars.lightMap.offset.set( m.mapLightmapOffset[ 0 ], m.mapLightmapOffset[ 1 ] );
+				uniforms[ "tDiffuse" ].texture = mpars.map;
+				uniforms[ "enableDiffuse" ].value = true;
 
 			}
 
-			load_image( mpars.lightMap, texture_path + "/" + m.mapLightmap );
+			// 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;
 
-		material = new THREE[ mtype ]( mpars );
+			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;