Hand bones animation

Hi, I’m new to BabylonJS. I’m trying to figure out the best way to animate hand finger bones. Please see example in the picture below. We have 4 finger skeleton bones. Initial bones position 1A, 2A, 3A, 4A are known. Also final bones positions are known: 1A, 2B, 3B, 4B.

My first approach was to animate bones positions (not rotations), however this is not a solution as skin mesh is deformed when changing bones position. So I think the only way is to calculate bones rotations.

As shown below I need to calculate:

  • Bone 1 rotation - angle 1α
  • Bone 2 rotation - angle 2α
  • Bone 3 rotation - angle 3α

Calculating angle 1α is simple using Vector3.GetAngleBetweenVectors() function (angle between vector 1A2A and vector 1A2B). However calculating angle 2α is not that simple as bones are in parent-child relationship. Rotating bone 1 (1α) changes other bones positions:

  • Bone 2 from point 2A to 2B
  • Bone 3 form point 3A to 3A’
  • Bone 4 from point 4A to 4A’

All angles calculations should be done before applying rotation to bones, because rotation animations should be played at the same time for each bone from initial position.

So my question is what’s the best way to calculate Bone 3 position 3A’ in step 1 below (after bone rotation). Final positions of bone 2 (point 2B) and bone3 (point 3B) are known. I would like to calculate position 3A’ in order to calculate rotation 2α (angle between vector 2B3A’ and vector 2B3B).

The same question refers to calculation of bone 4 position 4A’’

Any suggestions are welcome :).

It looks like you want to do IK?

Or maybe I’m missing something

Unfortunately Babylon only support IK for only 2 bones. I’ve already tried adding two IK’s for one finger. Animation is not so good with two IK’s in my solution.

Finally I think I found a proper solution :slight_smile:. I need to test it a bit more before I share it.