Added support to "shading" materials parameter in WebGLRenderer.

This is actually tricky due to multimaterials and vertex normals.

The practical effects of "shading" parameter in WebGLRenderer are currently following:

- if your model has vertex normals, now you can "dumb down" its shading by specifying THREE.FlatShading for MeshLambertMaterial and MeshPhongMaterial
- if your model has only face normals, it will always have just flat shading, no matter which shading you set, no escape from this
- if your model has multiple materials, smooth shading always "wins", meaning if there is at least one smooth shaded material in multimaterial group, all other materials in this group will be also smooth shaded (this is solvable by having multiple normal buffers, but seems wasteful, at least for the moment, till there are no practical use cases)

Currently implemented shading / material combinations:

  - MeshNormalMaterial: FlatShading [default], GouradShading
  - MeshDepthMaterial:  no shading parameter in material, uses own specific shading
  - MeshBasicMaterial: no shading parameter in material, uses own specific shading
  - MeshLambertMaterial: FlatShading, GouraudShading [default]
  - MeshPhongMaterial: FlatShading, PhongShading [default]

examples/lights_pointlights_gl.html

@@ -68,7 +68,8 @@
 				
 				loader.loadAscii( "obj/walt/WaltHead_slim.js", function( geometry ) {
 				
-					object = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial( { ambient: 0x555555, color: 0x555555, specular: 0xffffff, shininess: 50 } )  );
+					//object = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial( { ambient: 0x555555, color: 0x555555, specular: 0xffffff, shininess: 50, shading: THREE.FlatShading } )  );
+					object = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial( { ambient: 0x555555, color: 0x555555, specular: 0xffffff, shininess: 50, shading: THREE.PhongShading } )  );
 					object.scale.x = object.scale.y = object.scale.z = 0.80;
 					object.overdraw = true;
 					scene.addObject( object );

examples/materials.html

@@ -65,16 +65,19 @@
 
 				// Spheres
 
-				var geometry = new Sphere( 100, 14, 8 );
+				var geometry = new Sphere( 100, 14, 8, true );
 
+				var generatedTexture = new THREE.Texture( generateTexture() );
+				generatedTexture.loaded = 1;
+				
 				var materials = [];
 				materials.push( { material: new THREE.MeshBasicMaterial( { color: 0x00ffff, wireframe: true } ), overdraw: false, doubleSided: true } );
 				materials.push( { material: new THREE.MeshBasicMaterial( { color: 0xff0000, blending: THREE.AdditiveBlending } ), overdraw: false, doubleSided: true } );
 				materials.push( { material: new THREE.MeshLambertMaterial( { color: 0xffffff } ), overdraw: true, doubleSided: false } );
 				materials.push( { material: new THREE.MeshPhongMaterial( { ambient: 0x030383, color: 0xf55555, specular: 0x66f6f6, shininess: 10 } ), overdraw: true, doubleSided: false } );
 				materials.push( { material: new THREE.MeshDepthMaterial( { near: 1, far: 2000 } ), overdraw: true, doubleSided: false } );
-				materials.push( { material: new THREE.MeshNormalMaterial(), overdraw: true, doubleSided: false } );
-				materials.push( { material: new THREE.MeshBasicMaterial( { map: new THREE.Texture( generateTexture() ) } ), overdraw: true, doubleSided: false } );
+				materials.push( { material: new THREE.MeshNormalMaterial( ), overdraw: true, doubleSided: false } );
+				materials.push( { material: new THREE.MeshBasicMaterial( { map: generatedTexture } ), overdraw: true, doubleSided: false } );
 
 				objects = [];
 
@@ -97,8 +100,9 @@
 
 				}
 
-				particleLight = new THREE.Particle( new THREE.ParticleCircleMaterial( { color: 0xffffff } ) );
-				particleLight.scale.x = particleLight.scale.y = particleLight.scale.z = 4;
+				//particleLight = new THREE.Particle( new THREE.ParticleCircleMaterial( { color: 0xffffff } ) );
+				//particleLight.scale.x = particleLight.scale.y = particleLight.scale.z = 4;
+				particleLight = new THREE.Mesh( new Sphere( 4, 8, 8 ), new THREE.MeshBasicMaterial( { color: 0xffffff } ) );
 				scene.addObject( particleLight );
 
 				// Lights
@@ -116,6 +120,7 @@
 				scene.addLight( pointLight );
 
 				renderer = new THREE.CanvasRenderer();
+				//renderer = new THREE.WebGLRenderer();
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				container.appendChild( renderer.domElement );

src/materials/MeshNormalMaterial.js

@@ -3,6 +3,7 @@
  *
  * parameters = {
  *  opacity: <float>,
+ *  shading: THREE.FlatShading,
  *  blending: THREE.NormalBlending
  * } 
  */
@@ -10,12 +11,14 @@
 THREE.MeshNormalMaterial = function ( parameters ) {
 
 	this.opacity = 1;
+    this.shading = THREE.FlatShading;
 	this.blending = THREE.NormalBlending;
 
 
 	if ( parameters ) {
 
 		if ( parameters.opacity !== undefined ) this.opacity  = parameters.opacity;
+        if ( parameters.shading !== undefined ) this.shading  = parameters.shading;
 		if ( parameters.blending !== undefined ) this.blending = parameters.blending;
 
 	}

src/materials/MeshPhongMaterial.js

@@ -28,7 +28,7 @@ THREE.MeshPhongMaterial = function ( parameters ) {
 	this.specular_map = null;
 	this.shininess = 30;
 	this.opacity = 1;
-	this.shading = THREE.GouraudShading;
+	this.shading = THREE.PhongShading;
 	this.blending = THREE.NormalBlending;
 	this.wireframe = false;
 	this.wireframe_linewidth = 1;

src/renderers/WebGLRenderer.js

@@ -185,7 +185,7 @@ THREE.WebGLRenderer = function ( scene ) {
 
 	this.createBuffers = function ( object, mf ) {
 
-		var f, fl, fi, face, vertexNormals, normal, uv, v1, v2, v3, v4,
+		var f, fl, fi, face, vertexNormals, normal, uv, v1, v2, v3, v4, m, ml, i, l,
 
 		materialFaceGroup = object.materialFaceGroup[ mf ],
 
@@ -196,8 +196,52 @@ THREE.WebGLRenderer = function ( scene ) {
 		normalArray = [],
 		uvArray = [],
 
-		vertexIndex = 0;
+		vertexIndex = 0,
 
+		useSmoothNormals = false;
+		
+		// need to find out if there is any material in the object
+		// (among all mesh materials and also face materials)
+		// which would need smooth normals
+		
+		function needsSmoothNormals( material ) {
+			
+			return material.shading != undefined && ( material.shading == THREE.GouraudShading || material.shading == THREE.PhongShading );
+			
+		}
+		
+		for ( m = 0, ml = object.material.length; m < ml; m++ ) {
+
+			meshMaterial = object.material[ m ];
+
+			if ( meshMaterial instanceof THREE.MeshFaceMaterial ) {
+
+				for ( i = 0, l = materialFaceGroup.material.length; i < l; i++ ) {
+					
+					if ( needsSmoothNormals( materialFaceGroup.material[ i ] ) ) {
+						
+						useSmoothNormals = true;
+						break;
+						
+					}
+
+				}
+
+			} else {
+
+				if ( needsSmoothNormals( meshMaterial ) ) {
+					
+					useSmoothNormals = true;
+					break;
+					
+				}
+
+			}
+			
+			if ( useSmoothNormals ) break;
+
+		}
+		
 		for ( f = 0, fl = materialFaceGroup.faces.length; f < fl; f++ ) {
 
 			fi = materialFaceGroup.faces[f];
@@ -217,7 +261,7 @@ THREE.WebGLRenderer = function ( scene ) {
 				vertexArray.push( v2.x, v2.y, v2.z );
 				vertexArray.push( v3.x, v3.y, v3.z );
 
-				if ( vertexNormals.length == 3 ) {
+				if ( vertexNormals.length == 3 && useSmoothNormals ) {
 
 					normalArray.push( vertexNormals[0].x, vertexNormals[0].y, vertexNormals[0].z );
 					normalArray.push( vertexNormals[1].x, vertexNormals[1].y, vertexNormals[1].z );
@@ -261,7 +305,7 @@ THREE.WebGLRenderer = function ( scene ) {
 				vertexArray.push( v3.x, v3.y, v3.z );
 				vertexArray.push( v4.x, v4.y, v4.z );
 
-				if ( vertexNormals.length == 4 ) {
+				if ( vertexNormals.length == 4 && useSmoothNormals ) {
 
 					normalArray.push( vertexNormals[0].x, vertexNormals[0].y, vertexNormals[0].z );
 					normalArray.push( vertexNormals[1].x, vertexNormals[1].y, vertexNormals[1].z );
@@ -298,6 +342,7 @@ THREE.WebGLRenderer = function ( scene ) {
 				lineArray.push( vertexIndex + 2, vertexIndex + 3 );
 
 				vertexIndex += 4;
+				
 			}
 		}