Merge pull request #7477 from tschw/Animation

Animation: Authoring & Aftermath

examples/js/AnimationClipCreator.js

@@ -1,7 +1,7 @@
 /**
  *
  * Creator of typical test AnimationClips / KeyframeTracks
- * 
+ *
  * @author Ben Houston / http://clara.io/
  * @author David Sarno / http://lighthaus.us/
  */
@@ -11,73 +11,64 @@ THREE.AnimationClipCreator = function() {
 
 THREE.AnimationClipCreator.CreateRotationAnimation = function( period, axis ) {
 
-	var keys = [];
-	keys.push( { time: 0, value: 0 } );
-	keys.push( { time: period, value: 360 } );
+	var times = [ 0, period ], values = [ 0, 360 ];
 
 	axis = axis || 'x';
 	var trackName = '.rotation[' + axis + ']';
 
-	var track = new THREE.NumberKeyframeTrack( trackName, keys );
+	var track = new THREE.NumberKeyframeTrack( trackName, times, values );
 
-	var clip = new THREE.AnimationClip( 'rotate.x', 10, [ track ] );
-	//console.log( 'rotateClip', clip );
+	return new THREE.AnimationClip( null, period, [ track ] );
 
-	return clip;
 };
 
 THREE.AnimationClipCreator.CreateScaleAxisAnimation = function( period, axis ) {
 
-	var keys = [];
-	keys.push( { time: 0, value: 0 } );
-	keys.push( { time: period, value: 360 } );
+	var times = [ 0, period ], values = [ 0, 1 ];
 
 	axis = axis || 'x';
 	var trackName = '.scale[' + axis + ']';
 
-	var track = new THREE.NumberKeyframeTrack( trackName, keys );
+	var track = new THREE.NumberKeyframeTrack( trackName, times, values );
 
-	var clip = new THREE.AnimationClip( 'scale.x', 10, [ track ] );
-	//console.log( 'scaleClip', clip );
+	return new THREE.AnimationClip( null, period, [ track ] );
 
-	return clip;
 };
 
 THREE.AnimationClipCreator.CreateShakeAnimation = function( duration, shakeScale ) {
 
-	var keys = [];
+	var times = [], values = [], tmp = new THREE.Vector3();
 
 	for( var i = 0; i < duration * 10; i ++ ) {
 
-		keys.push( { 
-			time: ( i / 10.0 ),
-			value: new THREE.Vector3( Math.random() * 2.0 - 1.0, Math.random() * 2.0 - 1.0, Math.random() * 2.0 - 1.0 ).multiply( shakeScale )
-		} );
+		times.push( i / 10 );
+
+		tmp.set( Math.random() * 2.0 - 1.0, Math.random() * 2.0 - 1.0, Math.random() * 2.0 - 1.0 ).
+			multiply( shakeScale ).
+			toArray( values, values.length );
 
 	}
 
 	var trackName = '.position';
 
-	var track = new THREE.VectorKeyframeTrack( trackName, keys );
+	var track = new THREE.VectorKeyframeTrack( trackName, times, values );
 
-	var clip = new THREE.AnimationClip( 'shake' + duration, duration, [ track ] );
-	//console.log( 'shakeClip', clip );
+	return new THREE.AnimationClip( null, duration, [ track ] );
 
-	return clip;
 };
 
 
 THREE.AnimationClipCreator.CreatePulsationAnimation = function( duration, pulseScale ) {
 
-	var keys = [];
+	var times = [], values = [], tmp = new THREE.Vector3();
 
 	for( var i = 0; i < duration * 10; i ++ ) {
 
+		times.push( i / 10 );
+
 		var scaleFactor = Math.random() * pulseScale;
-		keys.push( {
-			time: ( i / 10.0 ),
-			value: new THREE.Vector3( scaleFactor, scaleFactor, scaleFactor )
-		} );
+		tmp.set( scaleFactor, scaleFactor, scaleFactor ).
+			toArray( values, values.length );
 
 	}
 
@@ -85,55 +76,40 @@ THREE.AnimationClipCreator.CreatePulsationAnimation = function( duration, pulseS
 
 	var track = new THREE.VectorKeyframeTrack( trackName, keys );
 
-	var clip = new THREE.AnimationClip( 'scale' + duration, duration, [ track ] );
-	//console.log( 'scaleClip', clip );
+	return new THREE.AnimationClip( null, duration, [ track ] );
 
-	return clip;
 };
 
 
 THREE.AnimationClipCreator.CreateVisibilityAnimation = function( duration ) {
 
-	var keys = [];
-	keys.push( {
-		time: 0,
-		value: true
-	} );
-	keys.push( {
-		time: duration - 1,
-		value: false
-	} );
-	keys.push( {
-		time: duration,
-		value: true
-	} );
+	var times = [ 0, duration / 2, duration ], values = [ true, false, true ];
 
 	var trackName = '.visible';
 
-	var track = new THREE.BooleanKeyframeTrack( trackName, keys );
+	var track = new THREE.BooleanKeyframeTrack( trackName, times, values );
 
-	var clip = new THREE.AnimationClip( 'visible' + duration, duration, [ track ] );
-	//console.log( 'scaleClip', clip );
+	return new THREE.AnimationClip( null, duration, [ track ] );
 
-	return clip;
 };
 
 
 THREE.AnimationClipCreator.CreateMaterialColorAnimation = function( duration, colors, loop ) {
 
-	var timeStep = duration / colors.length;
-	var keys = [];
+	var times = [], values = [],
+		timeStep = duration / colors.length;
+
 	for( var i = 0; i <= colors.length; i ++ ) {
-		keys.push( { time: i * timeStep, value: colors[ i % colors.length ] } );
+
+		timees.push( i * timeStep );
+		values.push( colors[ i % colors.length ] );
+
 	}
 
 	var trackName = '.material[0].color';
 
-	var track = new THREE.ColorKeyframeTrack( trackName, keys );
+	var track = new THREE.ColorKeyframeTrack( trackName, times, values );
 
-	var clip = new THREE.AnimationClip( 'colorDiffuse', 10, [ track ] );
-	//console.log( 'diffuseClip', clip );
+	return new THREE.AnimationClip( null, duration, [ track ] );
 
-	return clip;
 };
-

examples/js/TimelinerController.js

@@ -0,0 +1,243 @@
+/**
+ * Controller class for the Timeliner GUI.
+ *
+ * Timeliner GUI library (required to use this class):
+ *
+ * 		./libs/timeliner_gui.min.js
+ *
+ * Source code:
+ *
+ * 		https://github.com/tschw/timeliner
+ * 		https://github.com/zz85/timeliner (fork's origin)
+ *
+ * @author tschw
+ *
+ */
+
+THREE.TimelinerController = function TimelinerController( scene, trackInfo, onUpdate ) {
+
+	this._scene = scene;
+	this._trackInfo = trackInfo;
+
+	this._onUpdate = onUpdate;
+
+	this._mixer = new THREE.AnimationMixer( scene );
+	this._clip = null;
+	this._action = null;
+
+	this._tracks = {};
+	this._propRefs = {};
+	this._channelNames = [];
+
+};
+
+THREE.TimelinerController.prototype = {
+
+	constructor: THREE.TimelinerController,
+
+	init: function( timeliner ) {
+
+		var tracks = [],
+			trackInfo = this._trackInfo;
+
+		for ( var i = 0, n = trackInfo.length; i !== n; ++ i ) {
+
+			var spec = trackInfo[ i ];
+
+			tracks.push( this._addTrack(
+					spec.type, spec.propertyPath,
+					spec.initialValue, spec.interpolation ) );
+		}
+
+		this._clip = new THREE.AnimationClip( 'editclip', 0, tracks );
+		this._action = this._mixer.clipAction( this._clip ).play();
+
+	},
+
+	setDisplayTime: function( time ) {
+
+		this._action.time = time;
+		this._mixer.update( 0 );
+
+		this._onUpdate();
+
+	},
+
+	getChannelNames: function() {
+
+		return this._channelNames;
+
+	},
+
+	getChannelKeyTimes: function( channelName ) {
+
+		return this._tracks[ channelName ].times;
+
+	},
+
+	setKeyframe: function( channelName, time ) {
+
+		var track = this._tracks[ channelName ],
+			times = track.times,
+			index = times.indexOf( time );
+
+		if ( index === -1 ) index = times.length;
+
+		var values = track.values,
+			offset = index * track.getValueSize();
+
+		// note: not calling track.getValueSize with
+		// inconsistent array sizes
+
+		times[ index ] = time;
+		this._propRefs[ channelName ].getValue( values, offset );
+
+		this._sort( track );
+		this._clip.resetDuration();
+
+	},
+
+	delKeyframe: function( channelName, time ) {
+
+		var track = this._tracks[ channelName ],
+			times = track.times,
+			index = times.indexOf( time );
+
+		if ( index === 0 ) {
+
+			// we disallow to remove the first keyframe
+			// since the animation system is designed to
+			// always produce a defined state - we allow
+			// the initial state to be changed however
+
+			this.setKeyframe( channelName, time );
+
+		} else if ( index !== -1 ) {
+
+			var values = track.values,
+				stride = track.getValueSize(),
+				offset = index * stride,
+
+				nValues = values.length;
+
+			// note: not calling track.getValueSize with
+			// inconsistent array sizes
+
+			times[ index ] = times[ times.length - 1 ];
+			times.pop();
+
+			for ( var i = nValues - stride; i !== nValues; ++ i ) {
+
+				values[ offset ++ ] = values[ i ];
+
+			}
+
+			values.length = nValues - stride;
+
+			this._sort( track );
+			this._clip.resetDuration();
+
+		}
+
+	},
+
+	hasKeyframe: function( channelName, time ) {
+
+		var track = this._tracks[ channelName ],
+			times = track.times,
+			index = times.indexOf( time );
+
+		return index !== -1;
+
+	},
+
+	serialize: function() {
+
+		var result = {},
+
+			names = this._channelNames,
+			tracks = this._tracks;
+
+		for ( var i = 0, n = names.length; i !== n; ++ i ) {
+
+			var name = names[ i ],
+				track = tracks[ name ];
+
+			result[ name ] = {
+
+				times: track.times,
+				values: track.values
+
+			};
+
+		}
+
+		return result;
+
+	},
+
+	deserialize: function( structs ) {
+
+		var names = this._channelNames,
+			tracks = this._tracks;
+
+		for ( var i = 0, n = names.length; i !== n; ++ i ) {
+
+			var name = names[ i ],
+				track = tracks[ name ];
+				data = structs[ name ];
+
+			this._setArray( track.times, data.times );
+			this._setArray( track.values, data.values );
+
+		}
+
+		// update display
+		this.setDisplayTime( this._mixer.time );
+
+	},
+
+	_sort: function( track ) {
+
+		var times = track.times,
+			order = THREE.AnimationUtils.getKeyframeOrder( times );
+
+		this._setArray( times,
+				THREE.AnimationUtils.sortedArray( times, 1, order ) );
+
+		var values = track.values,
+			stride = track.getValueSize();
+
+		this._setArray( values,
+				THREE.AnimationUtils.sortedArray( values, stride, order ) );
+
+	},
+
+	_setArray: function( dst, src ) {
+
+		dst.length = 0;
+		dst.push.apply( dst, src );
+
+	},
+
+	_addTrack: function( type, prop, initialValue, interpolation ) {
+
+		var track = new type(
+				prop, [ 0 ], initialValue, interpolation );
+
+		// data must be in JS arrays so it can be resized
+		track.times = Array.prototype.slice.call( track.times );
+		track.values = Array.prototype.slice.call( track.values );
+
+		this._channelNames.push( prop );
+		this._tracks[ prop ] = track;
+
+		// for recording the state:
+		this._propRefs[ prop ] =
+				new THREE.PropertyBinding( this._scene, prop );
+
+		return track;
+
+	}
+
+};

examples/webgl_animation_authoring.html

@@ -0,0 +1,182 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<title>three.js webgl - animation authoring</title>
+		<meta charset="utf-8">
+		<style>
+			body {
+				margin: 0px;
+				background-color: #000000;
+				color: #fff;
+				font-family:Monospace;
+				font-size: 15px;
+				line-height: 30px;
+				overflow: hidden;
+			}
+			#info {
+				text-align: center;
+				position: absolute;
+				top: 0px; width: 100%;
+				padding: 15px;
+				z-index:100;
+			}
+		</style>
+	</head>
+	<body>
+
+		<div id="info">
+		"W" translate | "E" rotate | "R" scale | "+" increase size | "-" decrease size<br />
+		Press "Q" to toggle world/local space, hold down "Ctrl" to snap to grid
+		</div>
+
+		<script src="../build/three.js"></script>
+		<script src="js/controls/TransformControls.js"></script>
+		<script src="js/libs/timeliner_gui.min.js"></script>
+		<script src="js/TimelinerController.js"></script>
+
+		<script>
+
+			var camera, scene, renderer, control;
+
+			init();
+			render();
+
+			function init() {
+
+				renderer = new THREE.WebGLRenderer();
+				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.sortObjects = false;
+				document.body.appendChild( renderer.domElement );
+
+				//
+
+				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 3000 );
+				camera.position.set( 1000, 500, 1000 );
+				camera.lookAt( new THREE.Vector3( 0, 200, 0 ) );
+
+				scene = new THREE.Scene();
+				scene.add( new THREE.GridHelper( 500, 100 ) );
+
+				var light = new THREE.DirectionalLight( 0xffffff, 2 );
+				light.position.set( 1, 1, 1 );
+				scene.add( light );
+
+
+				var texture = THREE.ImageUtils.loadTexture( 'textures/crate.gif', THREE.UVMapping, render );
+				texture.anisotropy = renderer.getMaxAnisotropy();
+
+				var geometry = new THREE.BoxGeometry( 200, 200, 200 );
+				var material = new THREE.MeshLambertMaterial( { map: texture } );
+
+				control = new THREE.TransformControls( camera, renderer.domElement );
+				control.addEventListener( 'change', render );
+
+				var mesh = new THREE.Mesh( geometry, material );
+				mesh.name = "MyBox";
+				scene.add( mesh );
+
+				control.attach( mesh );
+				scene.add( control );
+
+				window.addEventListener( 'resize', onWindowResize, false );
+
+				window.addEventListener( 'keydown', function ( event ) {
+
+					switch ( event.keyCode ) {
+
+						case 81: // Q
+							control.setSpace( control.space === "local" ? "world" : "local" );
+							break;
+
+						case 17: // Ctrl
+							control.setTranslationSnap( 100 );
+							control.setRotationSnap( THREE.Math.degToRad( 15 ) );
+							break;
+
+						case 87: // W
+							control.setMode( "translate" );
+							break;
+
+						case 69: // E
+							control.setMode( "rotate" );
+							break;
+
+						case 82: // R
+							control.setMode( "scale" );
+							break;
+
+						case 187:
+						case 107: // +, =, num+
+							control.setSize( control.size + 0.1 );
+							break;
+
+						case 189:
+						case 109: // -, _, num-
+							control.setSize( Math.max( control.size - 0.1, 0.1 ) );
+							break;
+
+					}
+
+				});
+
+				window.addEventListener( 'keyup', function ( event ) {
+
+					switch ( event.keyCode ) {
+
+						case 17: // Ctrl
+							control.setTranslationSnap( null );
+							control.setRotationSnap( null );
+							break;
+
+					}
+
+				});
+
+				var trackInfo = [
+
+					{
+						type: THREE.VectorKeyframeTrack,
+						propertyPath: 'MyBox.position',
+						initialValue: [ 0, 0, 0 ],
+						interpolation: THREE.InterpolateSmooth
+					},
+
+					{
+						type: THREE.QuaternionKeyframeTrack,
+						propertyPath: 'MyBox.quaternion',
+						initialValue: [ 0, 0, 0, 1 ],
+						interpolation: THREE.InterpolateLinear
+
+					}
+
+				];
+
+				new Timeliner(
+						new THREE.TimelinerController( scene, trackInfo, render ) );
+
+			}
+
+			function onWindowResize() {
+
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.updateProjectionMatrix();
+
+				renderer.setSize( window.innerWidth, window.innerHeight );
+
+				render();
+
+			}
+
+			function render() {
+
+				control.update();
+
+				renderer.render( scene, camera );
+
+			}
+
+		</script>
+
+	</body>
+</html>

src/animation/AnimationClip.js

@@ -15,12 +15,7 @@ THREE.AnimationClip = function ( name, duration, tracks ) {
 	// this means it should figure out its duration by scanning the tracks
 	if ( this.duration < 0 ) {
 
-		for ( var i = 0; i < this.tracks.length; i ++ ) {
-
-			var track = this.tracks[i];
-			this.duration = Math.max( track.times[ track.times.length - 1 ] );
-
-		}
+		this.resetDuration();
 
 	}
 
@@ -35,6 +30,24 @@ THREE.AnimationClip.prototype = {
 
 	constructor: THREE.AnimationClip,
 
+	resetDuration: function() {
+
+		var tracks = this.tracks,
+			duration = 0;
+
+		for ( var i = 0, n = tracks.length; i !== n; ++ i ) {
+
+			var track = this.tracks[ i ];
+
+			duration = Math.max(
+					duration, track.times[ track.times.length - 1 ] );
+
+		}
+
+		this.duration = duration;
+
+	},
+
 	trim: function() {
 
 		for ( var i = 0; i < this.tracks.length; i ++ ) {

src/animation/PropertyBinding.js

@@ -237,6 +237,12 @@ THREE.PropertyBinding.prototype = {
 
 			this.resolvedProperty = nodeProperty;
 
+		} else if ( Array.isArray( nodeProperty ) ) {
+
+			bindingType = this.BindingType.EntireArray;
+
+			this.resolvedProperty = nodeProperty;
+
 		} else {
 
 			this.propertyName = propertyName;
@@ -274,8 +280,9 @@ Object.assign( THREE.PropertyBinding.prototype, { // prototype, continued
 
 	BindingType: {
 		Direct: 0,
-		ArrayElement: 1,
-		HasFromToArray: 2
+		EntireArray: 1,
+		ArrayElement: 2,
+		HasFromToArray: 3
 	},
 
 	Versioning: {
@@ -292,6 +299,18 @@ Object.assign( THREE.PropertyBinding.prototype, { // prototype, continued
 
 		},
 
+		function getValue_array( buffer, offset ) {
+
+			var source = this.node[ this.propertyName ];
+
+			for ( var i = 0, n = source.length; i !== n; ++ i ) {
+
+				buffer[ offset ++ ] = source[ i ];
+
+			}
+
+		},
+
 		function getValue_arrayElement( buffer, offset ) {
 
 			buffer[ offset ] = this.resolvedProperty[ this.propertyIndex ];
@@ -331,6 +350,50 @@ Object.assign( THREE.PropertyBinding.prototype, { // prototype, continued
 
 			}
 
+		], [
+
+			// EntireArray
+
+			function setValue_array( buffer, offset ) {
+
+				var dest = this.resolvedProperty;
+
+				for ( var i = 0, n = dest.length; i !== n; ++ i ) {
+
+					dest[ i ] = buffer[ offset ++ ];
+
+				}
+
+			},
+
+			function setValue_array_setNeedsUpdate( buffer, offset ) {
+
+				var dest = this.resolvedProperty;
+
+				for ( var i = 0, n = dest.length; i !== n; ++ i ) {
+
+					dest[ i ] = buffer[ offset ++ ];
+
+				}
+
+				this.targetObject.needsUpdate = true;
+
+			},
+
+			function setValue_array_setMatrixWorldNeedsUpdate( buffer, offset ) {
+
+				var dest = this.resolvedProperty;
+
+				for ( var i = 0, n = dest.length; i !== n; ++ i ) {
+
+					dest[ i ] = buffer[ offset ++ ];
+
+				}
+
+				this.targetObject.matrixWorldNeedsUpdate = true;
+
+			}
+
 		], [
 
 			// ArrayElement