Blending animations

Questions
#1

Hello,

I am trying to blend two animations in an imported GLB.

Here is an example where if you click on the monkey it will transition to another animation:

How do I get rid of the “stutter”? Does it have to do with different animation lengths?

I tried looking up everything I could about this but couldn’t figure it out. Would someone be able to point me in the right direction?

Thanks

#2

IIRC I think they need to be the same length yes, @Deltakosh would know a lot more than me about it

#3

Hey! did you look at this example: prova | Babylon.js Playground (babylonjs-playground.com)

This seems to be what you need (mostly the animation override part)

#4

@Deltakosh Thanks for the help!

Yes I have looked at that example. That uses animation ranges and as I understand it that cannot be used with GLTF/GLB’s. With GLB skeletons and animation ranges it works well straight out of the box with the skeleton.animationPropertiesOverride.enableBlending = true; skeleton.animationPropertiesOverride.blendingSpeed = 0.05;

With GLB animations, it seems more complex. I need to loop and manually increment/decrement the animation weights. Once I try to blend them, it stutters and seems like part of one animation gets cut off. It seems like this happens even when the animations are the same length.

Someone else did this, and it seems pretty close but I’m having trouble figuring out what Blends it properly:

#5

This example is about additive. In your case you simply want a blending right?

The missing piece (I guess) is to enable blending and blending speed on all your animations (you can do it by browsing all animations in your animation group)

Another example you may want to check as well: glTF Loader Demo | Babylon.js Playground (babylonjs.com)

2 Likes