Jump to content

Transitioning between animations


Recommended Posts

Hey All,


For a while and without success, I was looking for a way to transition between animations in babylon 2.0. By transition, I mean transform the bones over time to be exactly where they would be in the first frame of the animation that is about to play before the animation itself plays. This way it won't look weird when moving, say, from a walking animation to an idle animation or vice versa. I am trying to avoid having to create transition animation in blender for every possible combination. Since I could not find a way to do it, I was going to attempt to create a way myself. However, when iterating through the bones I realized that the only when to modify their transforms is to update their matrices. This is where the problem comes in. I am not very familiar with matrix math and would like to see if anyone could point me in the right direction as far as what calculations I need to perform on a bone to move it to the first frame of an animation that is about to play. Thanks in advance for the help!

Link to comment
Share on other sites


If you want to transition from current position to a new position, you can go through all bones and set key 0 matrix to the current value (Am I clear?)



Thanks for the quick response Deltakosh!


I may not be understanding correctly. I tried something like the following:

for (var indx = 0; indx < skeleton.bones.length; indx++) {                    skeleton.bones[indx].updateMatrix(skeleton.bones[indx].animations[0].getKeys()[106].value); //106 is where the animation to transition to starts                }

But it animates the bone backwards. For example, if the avatar's face is supposed to be looking to the right, it looks to the left instead. There is also deformation in some places, primarily in the fingers. Is the above sample what you had in mind?

Link to comment
Share on other sites

And using .negate () for reverse movement.




It's just an idea.


Thanks for the idea, but it didn't seem to do anything different than what it was already doing. However, looking through how babylon animates things I was able to update the code to:

for (var indx = 0; indx < skeleton.bones.length; indx++) {            var bone = skeleton.bones[indx];            var currentAnimation = bone.animations[0];            bone[currentAnimation.targetPropertyPath[0]] = currentAnimation.getKeys()[107].value;        }

This seems to correctly move the bones to where they should be on frame 107. Now the question is how do I move from the current value to frame 107's value over time? I currently use tweenJS to animate properties of an object, but I imagine than simply changing m array inside bone[currentAnimation.targetPropertyPath[0]] instance is a bad idea. Any ideas of how I should go about that?


I attached a sample of my current progress. Figured it would make it easier. Demo.js has all the logic. The part for the animation starts on line 37.


Thanks in advance for the help!



Link to comment
Share on other sites

  • 7 months later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...