MMDLoader: Improve Animation system for PMX

Author: takahirox

examples/js/animation/MMDAnimationHelper.js

@@ -505,6 +505,10 @@ THREE.MMDAnimationHelper = ( function () {
 
 		},
 
+		// Animation system of PMX is a bit too complex and doesn't great match to
+		// Three.js Animation system. This method attempts to simulate it as much as
+		// possible based on Three.js Animation system so doesn't perfectly simulate.
+		// If you need better one you would be required to write your own.
 		_animateMesh: function ( mesh, delta ) {
 
 			var objects = this.objects.get( mesh );
@@ -538,6 +542,20 @@ THREE.MMDAnimationHelper = ( function () {
 
 					grantSolver.update();
 
+					// In PMX it seems IK should be re-calculated
+					// after applying grant. Ideally IK should be re-calculated
+					// every time IK related bone transforms are updated.
+					// But we re-calculate once here for the performance
+					// and simplicity. We may revisit if we have quality
+					// improvement request.
+
+					if ( ikSolver && this.enabled.ik ) {
+
+						mesh.updateMatrixWorld( true );
+						ikSolver.update();
+
+					}
+
 				}
 
 			}
@@ -961,6 +979,10 @@ THREE.MMDAnimationHelper = ( function () {
 	};
 
 	/**
+	 * Solver for Grant (Fuyo in Japanese. I just google translated because
+	 * Fuyo may be MMD specific term and may not be common word in 3D CG terms.)
+	 * Grant propagates a bone's transform to other bones transforms even if
+	 * they are not children.
 	 * @param {THREE.SkinnedMesh} mesh
 	 * @param {Array<Object>} grants
 	 */

examples/js/loaders/MMDLoader.js

@@ -699,6 +699,9 @@ THREE.MMDLoader = ( function () {
 
 			if ( data.metadata.format === 'pmx' ) {
 
+				// bone index -> grant entry map
+				var grantEntryMap = {};
+
 				for ( var i = 0; i < data.metadata.boneCount; i ++ ) {
 
 					var boneData = data.bones[ i ];
@@ -716,15 +719,46 @@ THREE.MMDLoader = ( function () {
 						transformationClass: boneData.transformationClass
 					};
 
-					grants.push( param );
+					grantEntryMap[ i ] = { parent: null, children: [], param: param, visited: false };
 
 				}
 
-				grants.sort( function ( a, b ) {
+				var rootEntry = { parent: null, children: [], param: null, visited: false };
 
-					return a.transformationClass - b.transformationClass;
+				// Build a tree representing grant hierarchy
 
-				} );
+				for ( var boneIndex in grantEntryMap ) {
+
+					var grantEntry = grantEntryMap[ boneIndex ];
+					var parentGrantEntry = grantEntryMap[ grantEntry.parentIndex ] || rootEntry;
+
+					grantEntry.parent = parentGrantEntry;
+					parentGrantEntry.children.push( grantEntry );
+
+				}
+
+				// Sort grant parameters from parents to children because
+				// grant uses parent's transform that parent's grant is already applied
+				// so grant should be applied in order from parents to children
+
+				function traverse( entry ) {
+
+					if ( entry.param ) grants.push( entry.param );
+
+					entry.visited = true;
+
+					for ( var i = 0, il = entry.children.length; i < il; i ++ ) {
+
+						var child = entry.children[ i ];
+
+						// Cut off a loop if exists. (Is a grant loop invalid?)
+						if ( ! child.visited ) traverse( child );
+
+					}
+
+				}
+
+				traverse( rootEntry );
 
 			}
 

examples/jsm/animation/MMDAnimationHelper.js

@@ -514,6 +514,10 @@ var MMDAnimationHelper = ( function () {
 
 		},
 
+		// Animation system of PMX is a bit too complex and doesn't great match to
+		// Three.js Animation system. This method attempts to simulate it as much as
+		// possible based on Three.js Animation system so doesn't perfectly simulate.
+		// If you need better one you would be required to write your own.
 		_animateMesh: function ( mesh, delta ) {
 
 			var objects = this.objects.get( mesh );
@@ -547,6 +551,20 @@ var MMDAnimationHelper = ( function () {
 
 					grantSolver.update();
 
+					// In PMX it seems IK should be re-calculated
+					// after applying grant. Ideally IK should be re-calculated
+					// every time IK related bone transforms are updated.
+					// But we re-calculate once here for the performance
+					// and simplicity. We may revisit if we have quality
+					// improvement request.
+
+					if ( ikSolver && this.enabled.ik ) {
+
+						mesh.updateMatrixWorld( true );
+						ikSolver.update();
+
+					}
+
 				}
 
 			}
@@ -970,6 +988,10 @@ var MMDAnimationHelper = ( function () {
 	};
 
 	/**
+	 * Solver for Grant (Fuyo in Japanese. I just google translated because
+	 * Fuyo may be MMD specific term and may not be common word in 3D CG terms.)
+	 * Grant propagates a bone's transform to other bones transforms even if
+	 * they are not children.
 	 * @param {THREE.SkinnedMesh} mesh
 	 * @param {Array<Object>} grants
 	 */

examples/jsm/loaders/MMDLoader.js

@@ -734,6 +734,9 @@ var MMDLoader = ( function () {
 
 			if ( data.metadata.format === 'pmx' ) {
 
+				// bone index -> grant entry map
+				var grantEntryMap = {};
+
 				for ( var i = 0; i < data.metadata.boneCount; i ++ ) {
 
 					var boneData = data.bones[ i ];
@@ -751,15 +754,46 @@ var MMDLoader = ( function () {
 						transformationClass: boneData.transformationClass
 					};
 
-					grants.push( param );
+					grantEntryMap[ i ] = { parent: null, children: [], param: param, visited: false };
 
 				}
 
-				grants.sort( function ( a, b ) {
+				var rootEntry = { parent: null, children: [], param: null, visited: false };
 
-					return a.transformationClass - b.transformationClass;
+				// Build a tree representing grant hierarchy
 
-				} );
+				for ( var boneIndex in grantEntryMap ) {
+
+					var grantEntry = grantEntryMap[ boneIndex ];
+					var parentGrantEntry = grantEntryMap[ grantEntry.parentIndex ] || rootEntry;
+
+					grantEntry.parent = parentGrantEntry;
+					parentGrantEntry.children.push( grantEntry );
+
+				}
+
+				// Sort grant parameters from parents to children because
+				// grant uses parent's transform that parent's grant is already applied
+				// so grant should be applied in order from parents to children
+
+				function traverse( entry ) {
+
+					if ( entry.param ) grants.push( entry.param );
+
+					entry.visited = true;
+
+					for ( var i = 0, il = entry.children.length; i < il; i ++ ) {
+
+						var child = entry.children[ i ];
+
+						// Cut off a loop if exists. (Is a grant loop invalid?)
+						if ( ! child.visited ) traverse( child );
+
+					}
+
+				}
+
+				traverse( rootEntry );
 
 			}