CCDIKSolver.js 9.9 KB

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