Animation blending and Animation weights using AnimationGroup

hello wanted to know how to join or create transitions between animations using animationgroup…

https://www.babylonjs-playground.com/#BCU1XR#0

https://www.babylonjs-playground.com/#LL5BIQ#0

Hi NeoAngel,

I’m not sure I fully understand what you’re trying to achieve. Both of the Playgrounds you link to use blending to transition animations, but neither uses animation groups. Can you add a bit more information about your use case?

Alternatively, if you’re just looking for an example of animation groups in action, here are two interesting ones:

The second might be particularly apropos since it seems to contain multiple groups that you can switch between. I found these examples using the Playground Search, which is a slightly obscure but incredibly useful feature accessible from a link at the bottom-right of the Playground. Hopefully at least some of this is useful; otherwise, please add some more details and we’ll figure out where to go from there. Thanks!

Hello, thanks for answering

if it would be like the first example but with a transition between the animations

Something like:

var idleAnim = scene.beginWeightedAnimation (skeleton, 0, 89, 1.0, true);
var runAnim = scene.beginWeightedAnimation (skeleton, 125, 146, 0, true);

idleAnim.weight = 0.5;
runAnim.weight = 0.5

idleAnim.syncWith (runAnim);

I look for the equivalent to syncWith() but with animationgroup

You can call:

group.syncAllAnimationsWith(anim);
2 Likes

ok thanks but where do I get the animation from?
I want to combine these two groups o.O
It would be something like:

scene.animationPropertiesOverride = new BABYLON.AnimationPropertiesOverride();
        scene.animationPropertiesOverride.enableBlending = true;
        scene.animationPropertiesOverride.blendingSpeed = 0.02;
        scene.animationPropertiesOverride.loopMode = 1;

BABYLON.SceneLoader.ImportMesh(null, "../objetos/", "girl.gltf", scene, function (meshes, particleSystems, skeleton, animationGroups) {
        
var animationGroup = animationGroups[0]; 
var animationGroup1 = animationGroups[1];

animationGroup.setWeightForAllAnimatables = 0.5;
animationGroup1.setWeightForAllAnimatables = 1;

var animation = animationGroup1.syncAllAnimationsWith(*animationGroup2.???*);

});

///animation.start(true);

the animation should vary depending on the weights o.O

I’m still not 100% sure I’ve understood you correctly, so please let me know if I’m off-target here; but is what you’re trying to do to have multiple separate animation groups driving the same mesh (so that you can vary their weights as groups, presumably), but still have them all synchronized? If so, I think you’d probably just want to sync all of the second group to the same animation to which you synced the first group.

So, if all the animations in your animationGroup above are already in sync, I’m thinking it should be sufficient for you to just tell animationGroup1 to sync with any of those animations, a la animationGroup1.syncAllAnimationsWith(animationGroup.animatables[0]). So long as animationGroup's animations are all in synch with each other, being in sync with one will automatically synchronize with all the rest. If animationGroup isn’t in sync with itself, then you’ll have to decide what it means to be “in sync” with it; I don’t think it makes sense to be in sync with a group of things that are collectively out-of-sync, so you’ll probably have to pick one animation to be the “authoritative” animation that all others sync to.

Unless I’ve misunderstood? Again, hope this is helpful, but I’m really not sure. :upside_down_face: If I’ve misunderstood again, can you reproduce your issue in a Playground? That would allow me to look at the problem directly, make changes, and be sure I’m not answering the wrong question. Thanks!

thank you is what I need but I realized that my problem has not been good before as I have to export from blender the animation to gltf to include aimationgroup.animatables

in animatable I have an empty array - animatables: Array(0)

  1. 0: e {name: “TPose”, _targetedAnimations: Array(156), _animatables: Array(0), _from: 0, _to: 0.03333333507180214, …}
  2. 1: e {name: “Walk”, _targetedAnimations: Array(156), _animatables: Array(0), _from: 0, _to: 1.3666666746139526, …}
  3. 2: e {name: “Wave”, _targetedAnimations: Array(156), _animatables: Array(0), _from: 0, _to: 8.300000190734863, …}

I want to do something like this https://www.babylonjs-playground.com/#PSR2ZX#60

Okay, I think I might be out of my depth with the animations on this one and confusing the matter further by not understanding. Might be time for be to watch and learn from the master: Paging Dr. @PatrickRyan . :smile:

Hi @NeoAngel , @syntheticmagus and @Deltakosh

I find a way to control the animations of a .glb file, I mounted in Blender like yours!

You can see in this PG

https://www.babylonjs-playground.com/#QENFPC#2

but I still can not change between the animations, when they reach the last frame.

Any help?

I think it’s because you have a true loop on line 31

try change:
anims[stp].start(true, vel, anims[stp]._from, anims[stp]._to);

to

anims[stp].start(false, vel, anims[stp]._from, anims[stp]._to);

I hope it serves you :slight_smile: and I would like to ask you a favor …- if you could provide me the blender file or some screenshot of the animation configuration because I still do not know why in animationgroup.animatables I have an empty array = _ =

@NeoAngel, is there any way you can share your Blender file so I can take a look at the file? It’s much easier to debug if I am looking at the file you are having issues with.

@NeoAngel

Sure, pick up the Blender file in the link

linkhttps://drive.google.com/file/d/1nqSGl_yjdz7Zt2mOie2kk1UuAYAWhr89/view?usp=sharing

I included and snapshot of the exporting configuration too, maybe do not matter but I am exporting to .glb and not to .gltf

@PatrickRyan

here is the file: S

@NeoAngel, quick question. I was about to dig into your question and it occurred to me that I am not sure which version you are using. I want to make sure my environment matches yours when digging into the problem so are you using Blender 2.79 with the Khronos Blender Exporter or are you using Blender 2.8 Beta with the built-in glTF-blender-IO exporter?

I use Khronos Blender Exporter 2.79 but apparently I should start using only 2.8 blender?

I got it using blender 2.8 anyway thanks: P

1 Like

I too am having a difficult time grokking how to have a character smoothly transition from one animation to another without visually “popping”.

In particular I’ve been following this guide: Create an Animated Character and Control it via Keyboard (Blender -> Mixamo -> GLB -> Babylon.js) - Babylon.js Documentation because it explains how to import animations from mixamo and how to trigger the different animation groups like walking forward and backwards using w-a-s-d keys. I like this pipeline and starting and stopping animations with animation groups seems very clear and easy. Awesome!

However there is a very jarring transition between walking and stopping and turning where the character unnaturally snaps into position without a smooth blending. The author leaves it as an exercise to figure out smoothing out the animation and links to this section on animation-blending Animations - Babylon.js Documentation but it uses what looks like a very different API:

Docs say use: scene.beginWeightedAnimation … which takes a skeleton. Hmm… the example I’m following didn’t say anything about a skeleton.

There seem to be two competing styles of playground examples that I have found. One style imports a .babylon file and uses skeletons and the other style uses a gltf/glb file and uses animationGroups. And these approaches seem to be mutually exclusive in that .babylon files never appear to have animationGroups in the file while .gltf/.glb always export their animations into animationGroups in the file and while they may have skeletons, the gltf files don’t have skeleton ranges or animatables.

Examples using skeletons seems to have very good control of blending different animations, as mentioned by OP, this is a brilliant example: https://www.babylonjs-playground.com/#LL5BIQ#0

But again this API uses skeletons and so I don’t know where to begin if the file I’m starting out with is a glb. Do I need to wrangle an animation group into a skeleton? Where do I get the begin and ending frames for each animation? I’m missing the fluency to bridge the gap between these two different types of examples because they seem very different to a newb. Please educate me :slight_smile:

How to solve this problem?

UPD
Solution: https://playground.babylonjs.com/#6I67BL#83