Refactored morph normals to be optional.

Default computation of morph normals for all models with morphs was taking unnecessary time and memory.

Also made it less resource intensive to recompute morph normals.

examples/webgl_morphnormals.html

@@ -87,7 +87,7 @@
 				loader.load( "models/animated/flamingo.js", function( geometry ) {
 
 					morphColorsToFaceColors( geometry );
-					geometry.computeVertexNormals();
+					geometry.computeMorphNormals();
 
 					var material = new THREE.MeshLambertMaterial( { color: 0xffffff, morphTargets: true, morphNormals: true, vertexColors: THREE.FaceColors, shading: THREE.FlatShading } );
 					var meshAnim = new THREE.MorphAnimMesh( geometry, material );
@@ -105,7 +105,7 @@
 				loader.load( "models/animated/flamingo.js", function( geometry ) {
 
 					morphColorsToFaceColors( geometry );
-					geometry.computeVertexNormals();
+					geometry.computeMorphNormals();
 
 					var material = new THREE.MeshPhongMaterial( { color: 0xffffff, specular: 0xffffff, shininess: 20, morphTargets: true, morphNormals: true, vertexColors: THREE.FaceColors, shading: THREE.SmoothShading, perPixel: false } );
 					var meshAnim = new THREE.MorphAnimMesh( geometry, material );

src/core/Geometry.js

@@ -230,16 +230,37 @@ THREE.Geometry.prototype = {
 
 		var i, il, f, fl, face;
 
-		// save original vertex normals
+		// save original normals
+		// - create temp variables on first access
+		//   otherwise just copy (for faster repeated calls)
 
 		for ( f = 0, fl = this.faces.length; f < fl; f ++ ) {
 
 			face = this.faces[ f ];
-			face.__originalVertexNormals = [];
+
+			if ( ! face.__originalFaceNormal ) {
+
+				face.__originalFaceNormal = face.normal.clone();
+
+			} else {
+
+				face.__originalFaceNormal.copy( face.normal );
+
+			}
+
+			if ( ! face.__originalVertexNormals ) face.__originalVertexNormals = [];
 
 			for ( i = 0, il = face.vertexNormals.length; i < il; i ++ ) {
 
-				face.__originalVertexNormals[ i ] = face.vertexNormals[ i ].clone();
+				if ( ! face.__originalVertexNormals[ i ] ) {
+
+					face.__originalVertexNormals[ i ] = face.vertexNormals[ i ].clone();
+
+				} else {
+
+					face.__originalVertexNormals[ i ].copy( face.vertexNormals[ i ] );
+
+				}
 
 			}
 
@@ -252,6 +273,42 @@ THREE.Geometry.prototype = {
 
 		for ( i = 0, il = this.morphTargets.length; i < il; i ++ ) {
 
+			// create on first access
+
+			if ( ! this.morphNormals[ i ] ) {
+
+				this.morphNormals[ i ] = {};
+				this.morphNormals[ i ].faceNormals = [];
+				this.morphNormals[ i ].vertexNormals = [];
+
+				var dstNormalsFace = this.morphNormals[ i ].faceNormals;
+				var dstNormalsVertex = this.morphNormals[ i ].vertexNormals;
+
+				var faceNormal, vertexNormals;
+
+				for ( f = 0, fl = this.faces.length; f < fl; f ++ ) {
+
+					face = this.faces[ f ];
+
+					faceNormal = new THREE.Vector3();
+
+					if ( face instanceof THREE.Face3 ) {
+
+						vertexNormals = { a: new THREE.Vector3(), b: new THREE.Vector3(), c: new THREE.Vector3() };
+
+					} else {
+
+						vertexNormals = { a: new THREE.Vector3(), b: new THREE.Vector3(), c: new THREE.Vector3(), d: new THREE.Vector3() };
+
+					}
+
+					dstNormalsFace.push( faceNormal );
+					dstNormalsVertex.push( vertexNormals );
+
+				}
+
+			}
+
 			var morphNormals = this.morphNormals[ i ];
 
 			// set vertices to morph target
@@ -295,11 +352,13 @@ THREE.Geometry.prototype = {
 
 		}
 
-		// restore original vertex normals
+		// restore original normals
 
 		for ( f = 0, fl = this.faces.length; f < fl; f ++ ) {
 
 			face = this.faces[ f ];
+
+			face.normal = face.__originalFaceNormal;
 			face.vertexNormals = face.__originalVertexNormals;
 
 		}

src/extras/loaders/JSONLoader.js

@@ -110,7 +110,6 @@ THREE.JSONLoader.prototype.createModel = function ( json, callback, texture_path
 	parseMorphing( scale );
 
 	geometry.computeCentroids();
-	geometry.computeMorphNormals();
 	geometry.computeFaceNormals();
 
 	if ( this.hasNormals( geometry ) ) geometry.computeTangents();
@@ -385,9 +384,7 @@ THREE.JSONLoader.prototype.createModel = function ( json, callback, texture_path
 
 		if ( json.morphTargets !== undefined ) {
 
-			var i, l, v, vl, x, y, z, dstVertices, srcVertices,
-				f, fl, face, dstNormalsFace, dstNormalsVertex,
-				faceNormal, vertexNormals;
+			var i, l, v, vl, x, y, z, dstVertices, srcVertices;
 
 			for ( i = 0, l = json.morphTargets.length; i < l; i ++ ) {
 
@@ -395,16 +392,9 @@ THREE.JSONLoader.prototype.createModel = function ( json, callback, texture_path
 				geometry.morphTargets[ i ].name = json.morphTargets[ i ].name;
 				geometry.morphTargets[ i ].vertices = [];
 
-				geometry.morphNormals[ i ] = {};
-				geometry.morphNormals[ i ].faceNormals = [];
-				geometry.morphNormals[ i ].vertexNormals = [];
-
 				dstVertices = geometry.morphTargets[ i ].vertices;
 				srcVertices = json.morphTargets [ i ].vertices;
 
-				dstNormalsFace = geometry.morphNormals[ i ].faceNormals;
-				dstNormalsVertex = geometry.morphNormals[ i ].vertexNormals;
-
 				for( v = 0, vl = srcVertices.length; v < vl; v += 3 ) {
 
 					x = srcVertices[ v ] * scale;
@@ -415,27 +405,6 @@ THREE.JSONLoader.prototype.createModel = function ( json, callback, texture_path
 
 				}
 
-				for ( f = 0, fl = geometry.faces.length; f < fl; f ++ ) {
-
-					face = geometry.faces[ f ];
-
-					faceNormal = new THREE.Vector3();
-
-					if ( face instanceof THREE.Face3 ) {
-
-						vertexNormals = { a: new THREE.Vector3(), b: new THREE.Vector3(), c: new THREE.Vector3() };
-
-					} else {
-
-						vertexNormals = { a: new THREE.Vector3(), b: new THREE.Vector3(), c: new THREE.Vector3(), d: new THREE.Vector3() };
-
-					}
-
-					dstNormalsFace.push( faceNormal );
-					dstNormalsVertex.push( vertexNormals );
-
-				}
-
 			}
 
 		}

src/renderers/WebGLRenderer.js

@@ -395,16 +395,26 @@ THREE.WebGLRenderer = function ( parameters ) {
 		geometryGroup.__webglFaceBuffer = _gl.createBuffer();
 		geometryGroup.__webglLineBuffer = _gl.createBuffer();
 
-		if ( geometryGroup.numMorphTargets ) {
+		var m, ml;
 
-			var m, ml;
+		if ( geometryGroup.numMorphTargets ) {
 
 			geometryGroup.__webglMorphTargetsBuffers = [];
-			geometryGroup.__webglMorphNormalsBuffers = [];
 
 			for ( m = 0, ml = geometryGroup.numMorphTargets; m < ml; m ++ ) {
 
 				geometryGroup.__webglMorphTargetsBuffers.push( _gl.createBuffer() );
+
+			}
+
+		}
+
+		if ( geometryGroup.numMorphNormals ) {
+
+			geometryGroup.__webglMorphNormalsBuffers = [];
+
+			for ( m = 0, ml = geometryGroup.numMorphNormals; m < ml; m ++ ) {
+
 				geometryGroup.__webglMorphNormalsBuffers.push( _gl.createBuffer() );
 
 			}
@@ -461,11 +471,22 @@ THREE.WebGLRenderer = function ( parameters ) {
 		_gl.deleteBuffer( geometryGroup.__webglFaceBuffer );
 		_gl.deleteBuffer( geometryGroup.__webglLineBuffer );
 
+		var m, ml;
+
 		if ( geometryGroup.numMorphTargets ) {
 
-			for ( var m = 0, ml = geometryGroup.numMorphTargets; m < ml; m ++ ) {
+			for ( m = 0, ml = geometryGroup.numMorphTargets; m < ml; m ++ ) {
 
 				_gl.deleteBuffer( geometryGroup.__webglMorphTargetsBuffers[ m ] );
+
+			}
+
+		}
+
+		if ( geometryGroup.numMorphNormals ) {
+
+			for ( m = 0, ml = geometryGroup.numMorphNormals; m < ml; m ++ ) {
+
 				_gl.deleteBuffer( geometryGroup.__webglMorphNormalsBuffers[ m ] );
 
 			}
@@ -642,14 +663,26 @@ THREE.WebGLRenderer = function ( parameters ) {
 		geometryGroup.__faceArray = new Uint16Array( ntris * 3 );
 		geometryGroup.__lineArray = new Uint16Array( nlines * 2 );
 
+		var m, ml;
+
 		if ( geometryGroup.numMorphTargets ) {
 
 			geometryGroup.__morphTargetsArrays = [];
-			geometryGroup.__morphNormalsArrays = [];
 
-			for ( var m = 0, ml = geometryGroup.numMorphTargets; m < ml; m ++ ) {
+			for ( m = 0, ml = geometryGroup.numMorphTargets; m < ml; m ++ ) {
 
 				geometryGroup.__morphTargetsArrays.push( new Float32Array( nvertices * 3 ) );
+
+			}
+
+		}
+
+		if ( geometryGroup.numMorphNormals ) {
+
+			geometryGroup.__morphNormalsArrays = [];
+
+			for ( m = 0, ml = geometryGroup.numMorphNormals; m < ml; m ++ ) {
+
 				geometryGroup.__morphNormalsArrays.push( new Float32Array( nvertices * 3 ) );
 
 			}
@@ -3634,6 +3667,7 @@ THREE.WebGLRenderer = function ( parameters ) {
 			hash_map = {};
 
 		var numMorphTargets = geometry.morphTargets.length;
+		var numMorphNormals = geometry.morphNormals.length;
 
 		geometry.geometryGroups = {};
 
@@ -3654,7 +3688,7 @@ THREE.WebGLRenderer = function ( parameters ) {
 
 			if ( geometry.geometryGroups[ groupHash ] === undefined ) {
 
-				geometry.geometryGroups[ groupHash ] = { 'faces3': [], 'faces4': [], 'materialIndex': materialIndex, 'vertices': 0, 'numMorphTargets': numMorphTargets };
+				geometry.geometryGroups[ groupHash ] = { 'faces3': [], 'faces4': [], 'materialIndex': materialIndex, 'vertices': 0, 'numMorphTargets': numMorphTargets, 'numMorphNormals': numMorphNormals };
 
 			}
 
@@ -3667,7 +3701,7 @@ THREE.WebGLRenderer = function ( parameters ) {
 
 				if ( geometry.geometryGroups[ groupHash ] === undefined ) {
 
-					geometry.geometryGroups[ groupHash ] = { 'faces3': [], 'faces4': [], 'materialIndex': materialIndex, 'vertices': 0, 'numMorphTargets': numMorphTargets };
+					geometry.geometryGroups[ groupHash ] = { 'faces3': [], 'faces4': [], 'materialIndex': materialIndex, 'vertices': 0, 'numMorphTargets': numMorphTargets, 'numMorphNormals': numMorphNormals };
 
 				}