Flipping problem with keyframed Euler angles

Questions
1

Is there a way to apply a Euler filter or something else to prevent flipping when using keyframed animation?

See Playground below for example.

I have many animations and they play back fine with 1x playback rate. But when slowing it down the flipped angles are noticable. Check the following example. By setting the playback rate to something low as 0.1 or 0.01 (use the button) you can see that the box flips at one point (angle go from negative to positive). The keyframes are my input data, can I preprocess it somehow to fix it?

https://playground.babylonjs.com/#Q4DS2X#8

Thanks!

2

I think the solution will be to use quaternion instead of euler angles

3

Thanks, I was awaiting that response :slight_smile:.

However, it’s not clear to me how I would convert my input keyframes to quaternions in a way that would prevent unwanted flipping. Because I guess BJS already uses quaternions internally. So I would need to apply some magic on top of those quaternions, right?

My input data is in Euler angles and I cannot change that so I will need to process it somehow.

4

You can create quaternions from euler: Babylon.js/math.vector.ts at master · BabylonJS/Babylon.js · GitHub

5

Quaternions are the answer it all depends when and where you do the conversion.

https://playground.babylonjs.com/#Q4DS2X#9

Note

  1. Have slowed down animation frame rate from 300 to 30 for purposes of example (line 25)
  2. have used a dummy root so that in calculating the key values the actual root does not get rotated during these calculations but it doesn’t seem to matter after all https://playground.babylonjs.com/#Q4DS2X#10
1 Like
6

Awesome, I did not realize it was that simple!

Working example using Quaternion.FromEulerAngles:
https://playground.babylonjs.com/#Q4DS2X#11

2 Likes