Issues with basic root motion animation


I’m trying to implement root motion based animations and I can’t seem to figure out the proper way of doing it.
Demo here:

I’m trying to make this mesh turn using the Turn animation, which rotates the mesh of approximately 90 degrees. To start rotating you just need to keep pressed R.

Every time the animation loops I’m getting the rotation quaternion on the last frame of the animation to establish how much the mesh should turn and then I’m rotating the model.

I’m using this formula from the starting quaternion: Math.atan2(2.0*(q.yq.z + q.wq.x), q.wq.w - q.xq.x - q.yq.y + q.zq.z);

While this seems to work well for looping, I would also like to be able to turn the model to the correct orientation when I stop the animation (by releasing R).
Similarly, I’m interpolating the rotation quaternion at the time the animation ends and I’m using the above formula to get how much the rotation angle should be. This gives me completely wrong numbers, I’m not really sure why.

Similarly I’m trying to move the mesh at the end of a jump animation (triggerable by pressing J) but the numbers don’t match at all, the animation seems to have a ending position of 421, while I need to advance the mesh of roughly 10 in order to match the animation.

Any pointers would be really appreciated!

Not sure what went wrong in the calculations, but I believe there is an easier way to calculate that. You know how much the element rotates in a full cycle (-94.11853921269189 degrees, can be calculated using the rotation at the highest frame). You have the ratio - current frame / highest frame. Multiply this times the radians value of -94.11853921269189, and the model will rotate correctly. Roughly this -

babylonjs-root-motion | Babylon.js Playground (

Thanks a lot RaananW! I tried that approach (rotation3 in the demo) but it’s not very precise (you can still see it flicker) and it tends to be even worse with other animations that move in a non linear fashion

EDIT: I digged a bit deeper and the flickering is happening because it looks like onAnimationEnd is being called at a different stage compared to onAnimationLoop.
If I’m rotating the mesh in onAnimationEnd the mesh goes back to position 0 and then rotate, if I’m rotating the mesh on onAnimationLoop the mesh stays at the last frame, rotates and then resume animating.

Hello @framp just checking in, was your question answered?

No, I still don’t know what would be the best way to translate and rotate the mesh so that its position would match a certain frame of an animation or how to deal with onAnimationEnd being called when the mesh is still at the last frame position.

cc @RaananW

I think the architecture and the way you are dealing with the animations play a role in the flickering you are experiencing. Also the concepts of animation loop and how to use it might have been better explained by us :slight_smile:

Here is a simple reproduction - babylonjs-root-motion | Babylon.js Playground (

Notice the changed architecture and the simplified process. When you rotate you also need to understand that every animation presents a new basic rotation value on the mesh itself (which is applied using the skeleton). Some animations don’t start at rotation.y = 0. It’s a mixture of a lot of factors. Using the animation loop observable will provide you with a better way to interact with constant rotation.

I hope this helps you further.

Hello @framp just checking in, have you had time to check Raanan’s answer? :smile: