CCDIKSolver.js 10 KB

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