Issues with mesh animations

Hello :smiley: !

I have a glTF animated mesh with separated animations (weapon + arms) that play together. At this moment I’m using BABYLON.SceneLoader.ImportMesh to import the mesh to the scene, but I’m with some issues.

1 - Once the mesh is loaded, It automatically plays the arms animation, but the weapon does not follow the animation (Babylon.js Playground)

3 - I’ve solved the above problem partially (Babylon.js Playground) using scene.beginHierarchyAnimation(meshes[0]), but if I use scene.stopAllAnimations() before to prevent the animations initially playing, the issue returns (

3 - I tried scene.stopAnimation(mesh) and scene.stopAnimation(mesh[0]) too, but without any success (, so I used scene.stopAllAnimations.

4 - Another issue is that I cannot control the piece of animation passing the initial and final frame, It is not working for all animations (

5 - So I tried to control the animations manually with the code below, but the initial and final frame does not work for all the animation (

meshes[0].getDescendants().forEach(child => {
    this.scene.beginAnimation(child, 131, 160, false, 1.0)

Am I doing something wrong?

Very grateful for your help!

Best Regards!

Pinging our gltf overloard @bghgary

1 Like

@TiagoSilvaPereira Have you looked at AnimationGroups? These are the equivalent to glTF animations.

It looks like you are trying to play all of the animations of the glTF instead of just the first one (the default behavior of the glTF loader). You can do this in two ways.

  1. by manually starting all the animation groups.
  2. by changing the default behavior of the glTF loader.

Hope this helps!

1 Like

Hi @bghgary thank you very much for responding :smiley: Is there a method to limit the frames playing? I tried with animationGroup.start(true, 1.0, 131, 160); but without success.

EDIT: other problems I’m facing are:

1 - if I don’t want loop, It works only for one mesh: (trying to control manually with frame keys)

2 - After some time, the animations are playing out of sync. I think It is because not all the animations are descendents from the main object, but animationGroup is playing all animations.

I’m following this frame map for this model:

Thanks again!!

I think this is what you want?

The default behavior of the glTF loader is to start the first animation group as looping. You either have to stop it and restart as non-looping or do what I did above and change the default behavior to not start any animations.

1 Like

Hi @bghgary unfortunately It is not playing only the specified frames. Eg: I specified only the first 10 frames in this example, but It is playing all 207 animation frames, then pauses:

Am I doing something wrong? Thank you man

Ah, it’s a units issue. The image you showed above is probably in frames. glTF uses seconds. You need to specify the to and from in seconds.

BTW, the way animations should work in glTF is to separate all of the clips into separate animations instead of having to specify start and end times. The exporter should be handling this. See Spec very ambiguous about multiple animation support. · Issue #1052 · KhronosGroup/glTF · GitHub for more context.

1 Like

Thank you @bghgary I’ll give It a try… Is there another option to use this weapon combined animations without complexity? I tried exporting for .babylon but the Blender exporter is not exporting this model well.

My original file is FBX.

glTF seems like the right option for this. .babylon should work too, but I’m not too familiar with the exporting side of things.

Here is PG that has fire and reload hooked up to the keys space and R.

Note that I had to normalize the animation groups since they were different lengths.

1 Like

Ahh thank you very much!! I tried .normalize before but as I was using incorrect units, It was not working well!! I’m very grateful for the help!

1 Like

You’re welcome. Ideally, you shouldn’t have to do this if the glTF is well formed. You might consider bringing this up with the blender exporter folks.

1 Like

Hey @bghgary another question :smiley: I think It is related to gltf importing… do I need to make anything to import the object in the correct side? In the playground the object is loading at the correct side (right), but in my local scene it is loading mirrored.

I’m using the same file for both:

So when I attach the object to the camera, It shows wrong:


Are you doing anything to the root of the glTF in your local scene? It sounds like the handedness conversion in a node called __root__ got removed.

1 Like

No, the code is very similar to the playground: simple-3d-fps/Weapon.js at master · TiagoSilvaPereira/simple-3d-fps · GitHub

Actually, you are. :smirk: The first mesh returned is this __root__ node. What happened is that the scale was overridden.

1 Like

Ah ok, thanks man… So I can’t use the meshes[0] in this case?

You can, just make sure to keep the existing transform or append to it with the appropriate functions.

Thank you very much @bghgary … that was exactly the problem. I found the TransformNode that solved the problem :smiley:

let transformNode = new BABYLON.TransformNode('weaponTransformNode');
transformNode.parent = camera; 
transformNode.scaling = new BABYLON.Vector3(3.5, 3.5, 3.5);
transformNode.position = new BABYLON.Vector3(0.7,-0.45,1.1);
mesh.parent = transformNode;
1 Like

Hi @bghgary sorry for bothering again… I have another question about GLTF importing. Now I’m trying to make the same thing but using the assets manager to load the file (because I need to separate the files loading from the scene and load it before creating the scene).

But using the assets manager, I’m having similar issues. Can you check if I’m making something wrong?

I added a “T” key listener that plays all animations correctly, proving that the animationGroups are loading correctly.

Thank you very much!

Hi @Deltakosh, @bghgary :smiley: I think that it has a small bug with the start method on animationGroups, I need to call stop() before to make It working with the Assets Manager. I’ll investigate and try to send a PR.

This playground is working when calling .stop() bedore starting animations:

EDIT: I noticed that the play() method on AnimationGroup (that works correctly) is doing the same thing:

Maybe moving this.stop() to the opening top of the start() method solve this issue?

Best Regards!