CCDIKSolver.js 9.9 KB

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