CCDIKSolver.js 9.9 KB

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