CCDIKSolver.js 9.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465
  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. const _q = new Quaternion();
  16. const _targetPos = new Vector3();
  17. const _targetVec = new Vector3();
  18. const _effectorPos = new Vector3();
  19. const _effectorVec = new Vector3();
  20. const _linkPos = new Vector3();
  21. const _invLinkQ = new Quaternion();
  22. const _linkScale = new Vector3();
  23. const _axis = new Vector3();
  24. const _vector = new Vector3();
  25. const _matrix = new Matrix4();
  26. /**
  27. * CCD Algorithm
  28. * - https://sites.google.com/site/auraliusproject/ccd-algorithm
  29. *
  30. * // ik parameter example
  31. * //
  32. * // target, effector, index in links are bone index in skeleton.bones.
  33. * // the bones relation should be
  34. * // <-- parent child -->
  35. * // links[ n ], links[ n - 1 ], ..., links[ 0 ], effector
  36. * iks = [ {
  37. * target: 1,
  38. * effector: 2,
  39. * links: [ { index: 5, limitation: new Vector3( 1, 0, 0 ) }, { index: 4, enabled: false }, { index : 3 } ],
  40. * iteration: 10,
  41. * minAngle: 0.0,
  42. * maxAngle: 1.0,
  43. * } ];
  44. */
  45. class CCDIKSolver {
  46. /**
  47. * @param {THREE.SkinnedMesh} mesh
  48. * @param {Array<Object>} iks
  49. */
  50. constructor( mesh, iks = [] ) {
  51. this.mesh = mesh;
  52. this.iks = iks;
  53. this._valid();
  54. }
  55. /**
  56. * Update all IK bones.
  57. *
  58. * @return {CCDIKSolver}
  59. */
  60. update() {
  61. const iks = this.iks;
  62. for ( let i = 0, il = iks.length; i < il; i ++ ) {
  63. this.updateOne( iks[ i ] );
  64. }
  65. return this;
  66. }
  67. /**
  68. * Update one IK bone
  69. *
  70. * @param {Object} ik parameter
  71. * @return {CCDIKSolver}
  72. */
  73. updateOne( ik ) {
  74. const bones = this.mesh.skeleton.bones;
  75. // for reference overhead reduction in loop
  76. const math = Math;
  77. const effector = bones[ ik.effector ];
  78. const target = bones[ ik.target ];
  79. // don't use getWorldPosition() here for the performance
  80. // because it calls updateMatrixWorld( true ) inside.
  81. _targetPos.setFromMatrixPosition( target.matrixWorld );
  82. const links = ik.links;
  83. const iteration = ik.iteration !== undefined ? ik.iteration : 1;
  84. for ( let i = 0; i < iteration; i ++ ) {
  85. let rotated = false;
  86. for ( let j = 0, jl = links.length; j < jl; j ++ ) {
  87. const link = bones[ links[ j ].index ];
  88. // skip this link and following links.
  89. // this skip is used for MMD performance optimization.
  90. if ( links[ j ].enabled === false ) break;
  91. const limitation = links[ j ].limitation;
  92. const rotationMin = links[ j ].rotationMin;
  93. const rotationMax = links[ j ].rotationMax;
  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.invert();
  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. let 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. let c = link.quaternion.w;
  129. if ( c > 1.0 ) c = 1.0;
  130. const c2 = math.sqrt( 1 - c * c );
  131. link.quaternion.set( limitation.x * c2,
  132. limitation.y * c2,
  133. limitation.z * c2,
  134. c );
  135. }
  136. if ( rotationMin !== undefined ) {
  137. link.rotation.setFromVector3(
  138. link.rotation
  139. .toVector3( _vector )
  140. .max( rotationMin ) );
  141. }
  142. if ( rotationMax !== undefined ) {
  143. link.rotation.setFromVector3(
  144. link.rotation
  145. .toVector3( _vector )
  146. .min( rotationMax ) );
  147. }
  148. link.updateMatrixWorld( true );
  149. rotated = true;
  150. }
  151. if ( ! rotated ) break;
  152. }
  153. return this;
  154. }
  155. /**
  156. * Creates Helper
  157. *
  158. * @return {CCDIKHelper}
  159. */
  160. createHelper() {
  161. return new CCDIKHelper( this.mesh, this.mesh.geometry.userData.MMD.iks );
  162. }
  163. // private methods
  164. _valid() {
  165. const iks = this.iks;
  166. const bones = this.mesh.skeleton.bones;
  167. for ( let i = 0, il = iks.length; i < il; i ++ ) {
  168. const ik = iks[ i ];
  169. const effector = bones[ ik.effector ];
  170. const links = ik.links;
  171. let link0, link1;
  172. link0 = effector;
  173. for ( let j = 0, jl = links.length; j < jl; j ++ ) {
  174. link1 = bones[ links[ j ].index ];
  175. if ( link0.parent !== link1 ) {
  176. console.warn( 'THREE.CCDIKSolver: bone ' + link0.name + ' is not the child of bone ' + link1.name );
  177. }
  178. link0 = link1;
  179. }
  180. }
  181. }
  182. }
  183. function getPosition( bone, matrixWorldInv ) {
  184. return _vector
  185. .setFromMatrixPosition( bone.matrixWorld )
  186. .applyMatrix4( matrixWorldInv );
  187. }
  188. function setPositionOfBoneToAttributeArray( array, index, bone, matrixWorldInv ) {
  189. const v = getPosition( bone, matrixWorldInv );
  190. array[ index * 3 + 0 ] = v.x;
  191. array[ index * 3 + 1 ] = v.y;
  192. array[ index * 3 + 2 ] = v.z;
  193. }
  194. /**
  195. * Visualize IK bones
  196. *
  197. * @param {SkinnedMesh} mesh
  198. * @param {Array<Object>} iks
  199. */
  200. class CCDIKHelper extends Object3D {
  201. constructor( mesh, iks = [] ) {
  202. super();
  203. this.root = mesh;
  204. this.iks = iks;
  205. this.matrix.copy( mesh.matrixWorld );
  206. this.matrixAutoUpdate = false;
  207. this.sphereGeometry = new SphereGeometry( 0.25, 16, 8 );
  208. this.targetSphereMaterial = new MeshBasicMaterial( {
  209. color: new Color( 0xff8888 ),
  210. depthTest: false,
  211. depthWrite: false,
  212. transparent: true
  213. } );
  214. this.effectorSphereMaterial = new MeshBasicMaterial( {
  215. color: new Color( 0x88ff88 ),
  216. depthTest: false,
  217. depthWrite: false,
  218. transparent: true
  219. } );
  220. this.linkSphereMaterial = new MeshBasicMaterial( {
  221. color: new Color( 0x8888ff ),
  222. depthTest: false,
  223. depthWrite: false,
  224. transparent: true
  225. } );
  226. this.lineMaterial = new LineBasicMaterial( {
  227. color: new Color( 0xff0000 ),
  228. depthTest: false,
  229. depthWrite: false,
  230. transparent: true
  231. } );
  232. this._init();
  233. }
  234. /**
  235. * Updates IK bones visualization.
  236. */
  237. updateMatrixWorld( force ) {
  238. const mesh = this.root;
  239. if ( this.visible ) {
  240. let offset = 0;
  241. const iks = this.iks;
  242. const bones = mesh.skeleton.bones;
  243. _matrix.copy( mesh.matrixWorld ).invert();
  244. for ( let i = 0, il = iks.length; i < il; i ++ ) {
  245. const ik = iks[ i ];
  246. const targetBone = bones[ ik.target ];
  247. const effectorBone = bones[ ik.effector ];
  248. const targetMesh = this.children[ offset ++ ];
  249. const effectorMesh = this.children[ offset ++ ];
  250. targetMesh.position.copy( getPosition( targetBone, _matrix ) );
  251. effectorMesh.position.copy( getPosition( effectorBone, _matrix ) );
  252. for ( let j = 0, jl = ik.links.length; j < jl; j ++ ) {
  253. const link = ik.links[ j ];
  254. const linkBone = bones[ link.index ];
  255. const linkMesh = this.children[ offset ++ ];
  256. linkMesh.position.copy( getPosition( linkBone, _matrix ) );
  257. }
  258. const line = this.children[ offset ++ ];
  259. const array = line.geometry.attributes.position.array;
  260. setPositionOfBoneToAttributeArray( array, 0, targetBone, _matrix );
  261. setPositionOfBoneToAttributeArray( array, 1, effectorBone, _matrix );
  262. for ( let j = 0, jl = ik.links.length; j < jl; j ++ ) {
  263. const link = ik.links[ j ];
  264. const 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. super.updateMatrixWorld( force );
  272. }
  273. // private method
  274. _init() {
  275. const scope = this;
  276. const iks = this.iks;
  277. function createLineGeometry( ik ) {
  278. const geometry = new BufferGeometry();
  279. const vertices = new Float32Array( ( 2 + ik.links.length ) * 3 );
  280. geometry.setAttribute( 'position', new BufferAttribute( vertices, 3 ) );
  281. return geometry;
  282. }
  283. function createTargetMesh() {
  284. return new Mesh( scope.sphereGeometry, scope.targetSphereMaterial );
  285. }
  286. function createEffectorMesh() {
  287. return new Mesh( scope.sphereGeometry, scope.effectorSphereMaterial );
  288. }
  289. function createLinkMesh() {
  290. return new Mesh( scope.sphereGeometry, scope.linkSphereMaterial );
  291. }
  292. function createLine( ik ) {
  293. return new Line( createLineGeometry( ik ), scope.lineMaterial );
  294. }
  295. for ( let i = 0, il = iks.length; i < il; i ++ ) {
  296. const ik = iks[ i ];
  297. this.add( createTargetMesh() );
  298. this.add( createEffectorMesh() );
  299. for ( let j = 0, jl = ik.links.length; j < jl; j ++ ) {
  300. this.add( createLinkMesh() );
  301. }
  302. this.add( createLine( ik ) );
  303. }
  304. }
  305. }
  306. export { CCDIKSolver };