optimization - stage one. Reduce temp memory allocations, cache PropertyBinding.apply logic as a closure.

examples/webgl_animation_track_clip_mixer.html

@@ -258,13 +258,16 @@
 
 				mixer = new THREE.AnimationMixer( mesh );
 
-				//var clip = THREE.AnimationClip.CreateShakeAnimation( 10, new THREE.Vector3( 10, 10, 10 ) );
-				//var clip = THREE.AnimationClip.CreatePulsationAnimation( 10, 100 );
-				//var clip = THREE.AnimationClip.CreateRotationAnimation( 100, 'y' );
-				//var clip = THREE.AnimationClip.CreateScaleAxisAnimation( 10, 'x' );
-				var clip = THREE.AnimationClip.CreateMaterialColorAnimation( 10, [ new THREE.Color( 0xffffff ), new THREE.Color( 0xff0000 ), new THREE.Color( 0xff00ff ) ] );
-
-				mixer.addAction( new THREE.AnimationAction( clip, 0, 1, 1, true ) );
+				var clip1 = THREE.AnimationClip.CreateShakeAnimation( 10, new THREE.Vector3( 10, 10, 10 ) );
+				mixer.addAction( new THREE.AnimationAction( clip1, 0, 1, 1, true ) );
+				var clip2 = THREE.AnimationClip.CreatePulsationAnimation( 10, 100 );
+				mixer.addAction( new THREE.AnimationAction( clip2, 0, 1, 1, true ) );
+				var clip3 = THREE.AnimationClip.CreateRotationAnimation( 100, 'y' );
+				mixer.addAction( new THREE.AnimationAction( clip3, 0, 1, 1, true ) );
+				var clip4 = THREE.AnimationClip.CreateScaleAxisAnimation( 10, 'x' );
+				mixer.addAction( new THREE.AnimationAction( clip4, 0, 1, 1, true ) );
+				var clip5 = THREE.AnimationClip.CreateMaterialColorAnimation( 10, [ new THREE.Color( 0xffffff ), new THREE.Color( 0xff0000 ), new THREE.Color( 0xff00ff ) ] );
+				mixer.addAction( new THREE.AnimationAction( clip5, 0, 1, 1, true ) );
 
 			}
 

src/animation/AnimationAction.js

@@ -23,49 +23,49 @@ THREE.AnimationAction.prototype = {
 
 	toAnimationClipTime: function( time ) {
 
-		console.log( 'AnimationAction[' + this.clip.name + '].toAnimationClipTime( ' + time + ' )' );
+		//console.log( 'AnimationAction[' + this.clip.name + '].toAnimationClipTime( ' + time + ' )' );
 
 		var clipTime = time - this.startTime;
-		console.log( '   clipTime: ' + clipTime );
+		//console.log( '   clipTime: ' + clipTime );
 
 		clipTime *= this.timeScale;
-		console.log( '   clipTime: ' + clipTime );
+		//console.log( '   clipTime: ' + clipTime );
 
 		if( this.loop ) {
 
 			if( clipTime < 0 ) {
 
 				clipTime = clipTime - Math.floor( clipTime / this.clip.duration ) * this.clip.duration;
-				console.log( '   clipTime: ' + clipTime );
+				//console.log( '   clipTime: ' + clipTime );
 
 			}
 
 	   		clipTime = clipTime % this.clip.duration;
-			console.log( '   clipTime: ' + clipTime );
+			//console.log( '   clipTime: ' + clipTime );
 
 	   	}
 	   	else {
 
 	   		clipTime = Math.min( clipTime, this.clip.duration );
 	   		clipTime = Math.max( clipTime, 0 );
-			console.log( '   clipTime: ' + clipTime );
+			//console.log( '   clipTime: ' + clipTime );
 
 	   	}
 
-		console.log( '   clipTime: ' + clipTime );
+		//console.log( '   clipTime: ' + clipTime );
 
    		return clipTime;
 	},
 
 	getAt: function( time ) {
 
-		console.log( 'AnimationAction[' + this.clip.name + '].getAt( ' + time + ' )' );
+		//console.log( 'AnimationAction[' + this.clip.name + '].getAt( ' + time + ' )' );
 
 		var clipTime = this.toAnimationClipTime( time );
 
 		var clipResults = this.clip.getAt( clipTime );
 
-		console.log( "  clipResults: ", clipResults );
+		//console.log( "  clipResults: ", clipResults );
 
 		return clipResults;
 		

src/animation/AnimationClip.js

@@ -29,7 +29,7 @@ THREE.AnimationClip.prototype = {
 		for( var trackIndex in this.tracks ) {
 
 			var track = this.tracks[ trackIndex ];
-			console.log( 'track', track );
+			//console.log( 'track', track );
 
 			results[ track.name ] = track.getAt( clipTime );
 
@@ -191,7 +191,7 @@ THREE.AnimationClip.CreateMorphAnimation = function( morphTargetNames, duration
 	}
 
 	var clip = new THREE.AnimationClip( 'morphAnimation', duration, tracks );
-	console.log( 'morphAnimationClip', clip );
+	//console.log( 'morphAnimationClip', clip );
 
 	return clip;
 };
@@ -208,7 +208,7 @@ THREE.AnimationClip.CreateRotationAnimation = function( period, axis ) {
 	var track = new THREE.KeyframeTrack( trackName, keys );
 
 	var clip = new THREE.AnimationClip( 'rotate.x', 10, [ track ] );
-	console.log( 'rotateClip', clip );
+	//console.log( 'rotateClip', clip );
 
 	return clip;
 };
@@ -225,7 +225,7 @@ THREE.AnimationClip.CreateScaleAxisAnimation = function( period, axis ) {
 	var track = new THREE.KeyframeTrack( trackName, keys );
 
 	var clip = new THREE.AnimationClip( 'scale.x', 10, [ track ] );
-	console.log( 'scaleClip', clip );
+	//console.log( 'scaleClip', clip );
 
 	return clip;
 };
@@ -248,7 +248,7 @@ THREE.AnimationClip.CreateShakeAnimation = function( duration, shakeScale ) {
 	var track = new THREE.KeyframeTrack( trackName, keys );
 
 	var clip = new THREE.AnimationClip( 'shake' + duration, duration, [ track ] );
-	console.log( 'shakeClip', clip );
+	//console.log( 'shakeClip', clip );
 
 	return clip;
 };
@@ -273,7 +273,7 @@ THREE.AnimationClip.CreatePulsationAnimation = function( duration, pulseScale )
 	var track = new THREE.KeyframeTrack( trackName, keys );
 
 	var clip = new THREE.AnimationClip( 'scale' + duration, duration, [ track ] );
-	console.log( 'scaleClip', clip );
+	//console.log( 'scaleClip', clip );
 
 	return clip;
 };
@@ -292,7 +292,7 @@ THREE.AnimationClip.CreateMaterialColorAnimation = function( duration, colors, l
 	var track = new THREE.KeyframeTrack( trackName, keys );
 
 	var clip = new THREE.AnimationClip( 'colorDiffuse', 10, [ track ] );
-	console.log( 'diffuseClip', clip );
+	//console.log( 'diffuseClip', clip );
 
 	return clip;
 };

src/animation/AnimationMixer.js

@@ -21,11 +21,10 @@ THREE.AnimationMixer.prototype = {
 	constructor: THREE.AnimationMixer,
 
 	addAction: function( action ) {
-		console.log( this.root.name + ".AnimationMixer.addAnimationAction( " + action.name + " )" );
+		//console.log( this.root.name + ".AnimationMixer.addAnimationAction( " + action.name + " )" );
 
 		this.actions.push( action );
 
-
 		for( var trackID in action.clip.tracks ) {
 
 			var track = action.clip.tracks[ trackID ];
@@ -39,7 +38,7 @@ THREE.AnimationMixer.prototype = {
 	},
 
 	removeAction: function( action ) {
-		console.log( this.root.name + ".AnimationMixer.addRemove( " + action.name + " )" );
+		//console.log( this.root.name + ".AnimationMixer.addRemove( " + action.name + " )" );
 
 		var index = this.actions.indexOf( action );
 
@@ -51,9 +50,13 @@ THREE.AnimationMixer.prototype = {
 	},
 
 	update: function( time ) {
-		console.log( this.root.name + ".AnimationMixer.update( " + time + " )" );
+		//console.log( this.root.name + ".AnimationMixer.update( " + time + " )" );
+
+		for ( var name in this.propertyBindings ) {
+
+			this.propertyBindings[ name ].reset();
 
-		var mixerResults = {};
+		}
 
 		for( var i = 0; i < this.actions.length; i ++ ) {
 
@@ -62,47 +65,19 @@ THREE.AnimationMixer.prototype = {
 			if( action.weight <= 0 || ! action.enabled ) continue;
 
 			var actionResults = action.getAt( time );
-			console.log( '   actionResults', actionResults );
-			for( var name in actionResults ) {
-
-				var mixerResult = mixerResults[name];
-				var actionResult = actionResults[name];
-				console.log( '   name', name );
-				console.log( '   mixerResult', mixerResult );
-				console.log( '   actionResult', actionResult );
-		
-				if( ! mixerResult ) {
 
-					mixerResults[name] = {
-						cumulativeValue: actionResult,
-						cumulativeWeight: action.weight
-					};
-
-				}
-				else {
-
-					var lerpAlpha = action.weight / ( mixerResult.cumulativeWeight + action.weight );
-					mixerResult.cumulativeValue = THREE.AnimationUtils.lerp( mixerResult.cumulativeValue, actionResult, lerpAlpha );
-					mixerResult.cumulativeWeight += action.weight;
+			for( var name in actionResults ) {
 
-				}
+				this.propertyBindings[name].accumulate( actionResults[name], action.weight );
 
-				console.log( '   mixerResults[name]', mixerResults[name] );
 			}
 
 		}
-	    console.log( "  mixerResults: ", mixerResults );
 	
 		// apply to nodes
-		for ( var name in mixerResults ) {
-
-			console.log( '    track:' + name );
-
-			var mixerResult = mixerResults[ name ];
-			console.log( '    mixerResult:', mixerResult );
+		for ( var name in this.propertyBindings ) {
 
-			var propertyBinding = this.propertyBindings[ name ];
-			propertyBinding.set( mixerResult.cumulativeValue );
+			this.propertyBindings[ name ].apply();
 			
 		}
 	}

src/animation/KeyframeTrack.js

@@ -23,15 +23,15 @@ THREE.KeyframeTrack.prototype = {
 	constructor: THREE.KeyframeTrack,
 
 	getAt: function( time ) {
-		console.log( 'KeyframeTrack[' + this.name + '].getAt( ' + time + ' )' );
+		//console.log( 'KeyframeTrack[' + this.name + '].getAt( ' + time + ' )' );
 
 		if( this.keys.length == 0 ) throw new Error( "no keys in track named " + this.name );
 		
-		console.log( "keys", this.keys );
+		//console.log( "keys", this.keys );
 		// before the start of the track, return the first key value
 		if( this.keys[0].time >= time ) {
 
-			console.log( '   before: ' + this.keys[0].value );
+			//console.log( '   before: ' + this.keys[0].value );
 			return this.keys[0].value;
 
 		}
@@ -39,7 +39,7 @@ THREE.KeyframeTrack.prototype = {
 		// past the end of the track, return the last key value
 		if( this.keys[ this.keys.length - 1 ].time <= time ) {
 
-			console.log( '   after: ' + this.keys[ this.keys.length - 1 ].value );
+			//console.log( '   after: ' + this.keys[ this.keys.length - 1 ].value );
 			return this.keys[ this.keys.length - 1 ].value;
 
 		}
@@ -55,14 +55,14 @@ THREE.KeyframeTrack.prototype = {
 
 				var interpolatedValue = THREE.AnimationUtils.lerp( this.keys[ i - 1 ].value, this.keys[ i ].value, alpha );
 
-				console.log( '   interpolated: ', {
+				/*console.log( '   interpolated: ', {
 					value: interpolatedValue, 
 					alpha: alpha,
 					time0: this.keys[ i - 1 ].time,
 					time1: this.keys[ i ].time,
 					value0: this.keys[ i - 1 ].value,
 					value1: this.keys[ i ].value
-				} );
+				} );*/
 
 				return interpolatedValue;
 

src/animation/PropertyBinding.js

@@ -13,78 +13,133 @@ THREE.PropertyBinding = function ( rootNode, trackName ) {
 
 	var parseResults = THREE.PropertyBinding.parseTrackName( trackName );
 
-	this.directoryName = parseResults.directoryName || null;
+	console.log( parseResults );
+	this.directoryName = parseResults.directoryName;
 	this.nodeName = parseResults.nodeName;
 	this.material = parseResults.material;
 	this.materialIndex = parseResults.materialIndex;
-	this.propertyName = parseResults.propertyName || null;
-	this.propertyIndex = parseResults.propertyIndex || -1;
+	this.propertyName = parseResults.propertyName;
+	this.propertyIndex = parseResults.propertyIndex;
 
 	this.node = THREE.PropertyBinding.findNode( rootNode, this.nodeName );
 
+	this.cumulativeValue = null;
+	this.cumulativeWeight = 0;
 };
 
 THREE.PropertyBinding.prototype = {
 
 	constructor: THREE.PropertyBinding,
 
-	set: function( value ) {
+	reset: function() {
 
-		 console.log( "PropertyBinding.set( " + value + ")" );
+		this.cumulativeValue = null;
+		this.cumulativeWeight = 0;
 
-		 var targetObject = this.node;
+	},
+
+	accumulate: function( value, weight ) {
+		
+		if( this.cumulativeWeight === 0 ) {
+
+			this.cumulativeValue = value;
+			this.cumulativeWeight = weight;
+
+		}
+		else {
+
+			var lerpAlpha = weight / ( this.cumulativeWeight + weight );
+			this.cumulativeValue = THREE.AnimationUtils.lerp( this.cumulativeValue, value, lerpAlpha );
+			this.cumulativeWeight += weight;
 
- 		// ensure there is a value node
-		if( ! targetObject ) {
-			console.log( "  trying to update node for track: " + this.trackName + " but it wasn't found." );
-			return;
 		}
 
-		if( this.material ) {
-			targetObject = targetObject.material;
-			if( this.materialIndex !== undefined && this.materialIndex !== null && this.materialIndex >= 0 ) {
-				if( targetObject.materials ) {
-					targetObject = targetObject.materials[ this.materialIndex ];
+	},
+
+
+	apply: function() {
+
+		if( ! this.internalApply ) {
+
+			 //console.log( "PropertyBinding.set( " + value + ")" );
+
+			 var targetObject = this.node;
+
+	 		// ensure there is a value node
+			if( ! targetObject ) {
+				console.error( "  trying to update node for track: " + this.trackName + " but it wasn't found." );
+				return;
+			}
+
+			if( this.material ) {
+				targetObject = targetObject.material;
+				if( this.materialIndex !== undefined ) {
+					if( targetObject.materials ) {
+						targetObject = targetObject.materials[ this.materialIndex ];
+					}
+					else {
+						console.error( "  trying to submaterial via index, but no materials exist:", targetObject );				
+					}
 				}
-				else {
-					console.log( "  trying to submaterial via index, but no materials exist:", targetObject );				
+			}
+
+	 		// ensure there is a value property on the node
+			var nodeProperty = targetObject[ this.propertyName ];
+			if( ! nodeProperty ) {
+				console.error( "  trying to update property for track: " + this.nodeName + '.' + this.propertyName + " but it wasn't found.", targetObject );				
+				return;
+			}
+
+			// access a sub element of the property array (only primitives are supported right now)
+			if( this.propertyIndex !== undefined ) {
+				//console.log( '  update property array ' + this.propertyName + '[' + this.propertyIndex + '] via assignment.' );				
+				this.internalApply = function() {
+					nodeProperty[ this.propertyIndex ] = this.cumulativeValue;
+				};
+			}
+			// must use copy for Object3D.Euler/Quaternion		
+			else if( nodeProperty.copy ) {
+				//console.log( '  update property ' + this.name + '.' + this.propertyName + ' via a set() function.' );				
+				this.internalApply = function() {
+					nodeProperty.copy( this.cumulativeValue );
+				}
+			}
+			// otherwise just set the property directly on the node (do not use nodeProperty as it may not be a reference object)
+			else {
+				//console.log( '  update property ' + this.name + '.' + this.propertyName + ' via assignment.' );				
+				this.internalApply = function() {
+					targetObject[ this.propertyName ] = this.cumulativeValue;	
 				}
 			}
-		}
 
- 		// ensure there is a value property on the node
-		var nodeProperty = targetObject[ this.propertyName ];
-		if( ! nodeProperty ) {
-			console.log( "  trying to update property for track: " + this.nodeName + '.' + this.propertyName + " but it wasn't found.", targetObject );				
-			return;
-		}
+			// trigger node dirty			
+			if( targetObject.needsUpdate !== undefined ) { // material
+				//console.log( '  triggering material as dirty' );
+				this.triggerDirty = function() {
+					this.node.needsUpdate = true;
+				}
+			}			
+			else if( targetObject.matrixWorldNeedsUpdate !== undefined ) { // node transform
+				//console.log( '  triggering node as dirty' );
+				this.triggerDirty = function() {
+					targetObject.matrixWorldNeedsUpdate = true;
+				}
+			}
+			else {
+				this.triggerDirty = function() {};
+			}
 
-		// access a sub element of the property array (only primitives are supported right now)
-		if( ( this.propertyIndex.length && this.propertyIndex.length > 0 ) || this.propertyIndex >= 0 ) {
-			console.log( '  update property array ' + this.propertyName + '[' + this.propertyIndex + '] via assignment.' );				
-			nodeProperty[ this.propertyIndex ] = value;
-		}
-		// must use copy for Object3D.Euler/Quaternion		
-		else if( nodeProperty.copy ) {
-			console.log( '  update property ' + this.name + '.' + this.propertyName + ' via a set() function.' );				
-			nodeProperty.copy( value );
-		}
-		// otherwise just set the property directly on the node (do not use nodeProperty as it may not be a reference object)
-		else {
-			console.log( '  update property ' + this.name + '.' + this.propertyName + ' via assignment.' );				
-			targetObject[ this.propertyName ] = value;	
 		}
 
-		// trigger node dirty			
-		if( targetObject.needsUpdate !== undefined ) { // material
-			console.log( '  triggering material as dirty' );
-			this.node.needsUpdate = true;
-		}			
-		if( targetObject.matrixWorldNeedsUpdate !== undefined ) { // node transform
-			console.log( '  triggering node as dirty' );
-			targetObject.matrixWorldNeedsUpdate = true;
+		// early exit if there is nothing to apply.
+		if( this.cumulativeWeight <= 0 ) {
+			return;
 		}
 
+		this.internalApply();
+		this.triggerDirty();
+	
+
 	},
 
 	get: function() {
@@ -128,7 +183,7 @@ THREE.PropertyBinding.parseTrackName = function( trackName ) {
 		propertyIndex: matches[10]	// allowed to be null, specifies that the whole property is set.
 	};
 
-	console.log( "PropertyBinding.parseTrackName", trackName, results, matches );
+	//console.log( "PropertyBinding.parseTrackName", trackName, results, matches );
 
 	if( results.propertyName === null || results.propertyName.length === 0 ) {
 		throw new Error( "can not parse propertyName from trackName: " + trackName );
@@ -141,11 +196,11 @@ THREE.PropertyBinding.parseTrackName = function( trackName ) {
 // TODO: Cache this at some point
 THREE.PropertyBinding.findNode = function( root, nodeName ) {
 
-	console.log( 'AnimationUtils.findNode( ' + root.name + ', nodeName: ' + nodeName + ')');
+	//console.log( 'AnimationUtils.findNode( ' + root.name + ', nodeName: ' + nodeName + ')');
 	
 	if( ! nodeName || nodeName === "" || nodeName === "root" || nodeName === "." || nodeName === -1 || nodeName === root.name || nodeName === root.uuid ) {
 
-		console.log( '  root.' );
+		//console.log( '  root.' );
 		return root;
 
 	}
@@ -174,7 +229,7 @@ THREE.PropertyBinding.findNode = function( root, nodeName ) {
 
 		if( bone ) {
 
-			console.log( '  bone: ' + bone.name + '.' );
+			//console.log( '  bone: ' + bone.name + '.' );
 			return bone;
 
 		}
@@ -209,14 +264,14 @@ THREE.PropertyBinding.findNode = function( root, nodeName ) {
 
 		if( subTreeNode ) {
 
-			console.log( '  node: ' + subTreeNode.name + '.' );
+			//console.log( '  node: ' + subTreeNode.name + '.' );
 			return subTreeNode;
 
 		}
 
 	}
 
-	console.log( "   <null>.  No node found for name: " + nodeName );
+	//console.log( "   <null>.  No node found for name: " + nodeName );
 
 	return null;
 }