CCDIKSolver.js 9.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417
  1. /**
  2. * @author takahiro / https://github.com/takahirox
  3. *
  4. * CCD Algorithm
  5. * https://sites.google.com/site/auraliusproject/ccd-algorithm
  6. *
  7. * mesh.geometry needs to have iks array.
  8. *
  9. * // ik parameter example
  10. * //
  11. * // target, effector, index in links are bone index in skeleton.
  12. * // the bones relation should be
  13. * // <-- parent child -->
  14. * // links[ n ], links[ n - 1 ], ..., links[ 0 ], effector
  15. * ik = {
  16. * target: 1,
  17. * effector: 2,
  18. * links: [ { index: 5, limitation: new THREE.Vector3( 1, 0, 0 ) }, { index: 4, enabled: false }, { index : 3 } ],
  19. * iteration: 10,
  20. * minAngle: 0.0,
  21. * maxAngle: 1.0,
  22. * };
  23. */
  24. THREE.CCDIKSolver = function ( mesh ) {
  25. this.mesh = mesh;
  26. this._valid();
  27. };
  28. THREE.CCDIKSolver.prototype = {
  29. constructor: THREE.CCDIKSolver,
  30. _valid: function () {
  31. var iks = this.mesh.geometry.iks;
  32. var bones = this.mesh.skeleton.bones;
  33. for ( var i = 0, il = iks.length; i < il; i ++ ) {
  34. var ik = iks[ i ];
  35. var effector = bones[ ik.effector ];
  36. var links = ik.links;
  37. var link0, link1;
  38. link0 = effector;
  39. for ( var j = 0, jl = links.length; j < jl; j ++ ) {
  40. link1 = bones[ links[ j ].index ];
  41. if ( link0.parent !== link1 ) {
  42. console.warn( 'THREE.CCDIKSolver: bone ' + link0.name + ' is not the child of bone ' + link1.name );
  43. }
  44. link0 = link1;
  45. }
  46. }
  47. },
  48. /*
  49. * save the bone matrices before solving IK.
  50. * they're used for generating VMD and VPD.
  51. */
  52. _saveOriginalBonesInfo: function () {
  53. var bones = this.mesh.skeleton.bones;
  54. for ( var i = 0, il = bones.length; i < il; i ++ ) {
  55. var bone = bones[ i ];
  56. if ( bone.userData.ik === undefined ) bone.userData.ik = {};
  57. bone.userData.ik.originalMatrix = bone.matrix.toArray();
  58. }
  59. },
  60. update: function ( saveOriginalBones ) {
  61. var q = new THREE.Quaternion();
  62. var targetPos = new THREE.Vector3();
  63. var targetVec = new THREE.Vector3();
  64. var effectorPos = new THREE.Vector3();
  65. var effectorVec = new THREE.Vector3();
  66. var linkPos = new THREE.Vector3();
  67. var invLinkQ = new THREE.Quaternion();
  68. var linkScale = new THREE.Vector3();
  69. var axis = new THREE.Vector3();
  70. var bones = this.mesh.skeleton.bones;
  71. var iks = this.mesh.geometry.iks;
  72. var boneParams = this.mesh.geometry.bones;
  73. // for reference overhead reduction in loop
  74. var math = Math;
  75. this.mesh.updateMatrixWorld( true );
  76. if ( saveOriginalBones === true ) this._saveOriginalBonesInfo();
  77. for ( var i = 0, il = iks.length; i < il; i++ ) {
  78. var ik = iks[ i ];
  79. var effector = bones[ ik.effector ];
  80. var target = bones[ ik.target ];
  81. // don't use getWorldPosition() here for the performance
  82. // because it calls updateMatrixWorld( true ) inside.
  83. targetPos.setFromMatrixPosition( target.matrixWorld );
  84. var links = ik.links;
  85. var iteration = ik.iteration !== undefined ? ik.iteration : 1;
  86. for ( var j = 0; j < iteration; j++ ) {
  87. var rotated = false;
  88. for ( var k = 0, kl = links.length; k < kl; k++ ) {
  89. var link = bones[ links[ k ].index ];
  90. // skip this link and following links.
  91. // this skip is used for MMD performance optimization.
  92. if ( links[ k ].enabled === false ) break;
  93. var limitation = links[ k ].limitation;
  94. // don't use getWorldPosition/Quaternion() here for the performance
  95. // because they call updateMatrixWorld( true ) inside.
  96. link.matrixWorld.decompose( linkPos, invLinkQ, linkScale );
  97. invLinkQ.inverse();
  98. effectorPos.setFromMatrixPosition( effector.matrixWorld );
  99. // work in link world
  100. effectorVec.subVectors( effectorPos, linkPos );
  101. effectorVec.applyQuaternion( invLinkQ );
  102. effectorVec.normalize();
  103. targetVec.subVectors( targetPos, linkPos );
  104. targetVec.applyQuaternion( invLinkQ );
  105. targetVec.normalize();
  106. var angle = targetVec.dot( effectorVec );
  107. if ( angle > 1.0 ) {
  108. angle = 1.0;
  109. } else if ( angle < -1.0 ) {
  110. angle = -1.0;
  111. }
  112. angle = math.acos( angle );
  113. // skip if changing angle is too small to prevent vibration of bone
  114. // Refer to http://www20.atpages.jp/katwat/three.js_r58/examples/mytest37/mmd.three.js
  115. if ( angle < 1e-5 ) continue;
  116. if ( ik.minAngle !== undefined && angle < ik.minAngle ) {
  117. angle = ik.minAngle;
  118. }
  119. if ( ik.maxAngle !== undefined && angle > ik.maxAngle ) {
  120. angle = ik.maxAngle;
  121. }
  122. axis.crossVectors( effectorVec, targetVec );
  123. axis.normalize();
  124. q.setFromAxisAngle( axis, angle );
  125. link.quaternion.multiply( q );
  126. // TODO: re-consider the limitation specification
  127. if ( limitation !== undefined ) {
  128. var c = link.quaternion.w;
  129. if ( c > 1.0 ) {
  130. c = 1.0;
  131. }
  132. var c2 = math.sqrt( 1 - c * c );
  133. link.quaternion.set( limitation.x * c2,
  134. limitation.y * c2,
  135. limitation.z * c2,
  136. c );
  137. }
  138. link.updateMatrixWorld( true );
  139. rotated = true;
  140. }
  141. if ( ! rotated ) break;
  142. }
  143. }
  144. // just in case
  145. this.mesh.updateMatrixWorld( true );
  146. }
  147. };
  148. THREE.CCDIKHelper = function ( mesh ) {
  149. if ( mesh.geometry.iks === undefined || mesh.skeleton === undefined ) {
  150. throw 'THREE.CCDIKHelper requires iks in mesh.geometry and skeleton in mesh.';
  151. }
  152. THREE.Object3D.call( this );
  153. this.root = mesh;
  154. this.matrix = mesh.matrixWorld;
  155. this.matrixAutoUpdate = false;
  156. this.sphereGeometry = new THREE.SphereBufferGeometry( 0.25, 16, 8 );
  157. this.targetSphereMaterial = new THREE.MeshBasicMaterial( {
  158. color: new THREE.Color( 0xff8888 ),
  159. depthTest: false,
  160. depthWrite: false,
  161. transparent: true
  162. } );
  163. this.effectorSphereMaterial = new THREE.MeshBasicMaterial( {
  164. color: new THREE.Color( 0x88ff88 ),
  165. depthTest: false,
  166. depthWrite: false,
  167. transparent: true
  168. } );
  169. this.linkSphereMaterial = new THREE.MeshBasicMaterial( {
  170. color: new THREE.Color( 0x8888ff ),
  171. depthTest: false,
  172. depthWrite: false,
  173. transparent: true
  174. } );
  175. this.lineMaterial = new THREE.LineBasicMaterial( {
  176. color: new THREE.Color( 0xff0000 ),
  177. depthTest: false,
  178. depthWrite: false,
  179. transparent: true
  180. } );
  181. this._init();
  182. this.update();
  183. };
  184. THREE.CCDIKHelper.prototype = Object.create( THREE.Object3D.prototype );
  185. THREE.CCDIKHelper.prototype.constructor = THREE.CCDIKHelper;
  186. THREE.CCDIKHelper.prototype._init = function () {
  187. var self = this;
  188. var mesh = this.root;
  189. var iks = mesh.geometry.iks;
  190. function createLineGeometry( ik ) {
  191. var geometry = new THREE.BufferGeometry();
  192. var vertices = new Float32Array( ( 2 + ik.links.length ) * 3 );
  193. geometry.addAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) );
  194. return geometry;
  195. }
  196. function createTargetMesh() {
  197. return new THREE.Mesh( self.sphereGeometry, self.targetSphereMaterial );
  198. }
  199. function createEffectorMesh() {
  200. return new THREE.Mesh( self.sphereGeometry, self.effectorSphereMaterial );
  201. }
  202. function createLinkMesh() {
  203. return new THREE.Mesh( self.sphereGeometry, self.linkSphereMaterial );
  204. }
  205. function createLine( ik ) {
  206. return new THREE.Line( createLineGeometry( ik ), self.lineMaterial );
  207. }
  208. for ( var i = 0, il = iks.length; i < il; i ++ ) {
  209. var ik = iks[ i ];
  210. this.add( createTargetMesh() );
  211. this.add( createEffectorMesh() );
  212. for ( var j = 0, jl = ik.links.length; j < jl; j ++ ) {
  213. this.add( createLinkMesh() );
  214. }
  215. this.add( createLine( ik ) );
  216. }
  217. };
  218. THREE.CCDIKHelper.prototype.update = function () {
  219. var offset = 0;
  220. var mesh = this.root;
  221. var iks = mesh.geometry.iks;
  222. var bones = mesh.skeleton.bones;
  223. var matrixWorldInv = new THREE.Matrix4().getInverse( mesh.matrixWorld );
  224. var vector = new THREE.Vector3();
  225. function getPosition( bone ) {
  226. vector.setFromMatrixPosition( bone.matrixWorld );
  227. vector.applyMatrix4( matrixWorldInv );
  228. return vector;
  229. }
  230. function setPositionOfBoneToAttributeArray( array, index, bone ) {
  231. var v = getPosition( bone );
  232. array[ index * 3 + 0 ] = v.x;
  233. array[ index * 3 + 1 ] = v.y;
  234. array[ index * 3 + 2 ] = v.z;
  235. }
  236. for ( var i = 0, il = iks.length; i < il; i ++ ) {
  237. var ik = iks[ i ];
  238. var targetBone = bones[ ik.target ];
  239. var effectorBone = bones[ ik.effector ];
  240. var targetMesh = this.children[ offset ++ ];
  241. var effectorMesh = this.children[ offset ++ ];
  242. targetMesh.position.copy( getPosition( targetBone ) );
  243. effectorMesh.position.copy( getPosition( effectorBone ) );
  244. for ( var j = 0, jl = ik.links.length; j < jl; j ++ ) {
  245. var link = ik.links[ j ];
  246. var linkBone = bones[ link.index ];
  247. var linkMesh = this.children[ offset ++ ];
  248. linkMesh.position.copy( getPosition( linkBone ) );
  249. }
  250. var line = this.children[ offset ++ ];
  251. var array = line.geometry.attributes.position.array;
  252. setPositionOfBoneToAttributeArray( array, 0, targetBone );
  253. setPositionOfBoneToAttributeArray( array, 1, effectorBone );
  254. for ( var j = 0, jl = ik.links.length; j < jl; j ++ ) {
  255. var link = ik.links[ j ];
  256. var linkBone = bones[ link.index ];
  257. setPositionOfBoneToAttributeArray( array, j + 2, linkBone );
  258. }
  259. line.geometry.attributes.position.needsUpdate = true;
  260. }
  261. };