How to play animation imported with a GLB model?

I’m loading and showing at run-time GLB model based on this tutorial. My problem is that I cannont play the animation on them (in fact, play() don’t return any error or warning if the given name or ID is wrong).

In this code from the demo, we can see that animations are renamed, because by default, they may have strange name like “model_name/animation/1”.

var asset = new pc.Asset(filename, 'container', file, null, options);
        asset.once('load', function (containerAsset) {
            if (callback) {
                // As we play animations by name, if we have only one animation, keep it the same name as
                // the original container otherwise, postfix it with a number
                var animations = containerAsset.resource.animations;
                if (animations.length == 1) {
                    animations[0].name = assetName;
                } else if (animations.length > 1) {
                    for (var i = 0; i < animations.length; ++i) {
                        animations[i].name = assetName + ' ' + i.toString();
                    }
                }

                callback(null, containerAsset);
            }
        });

But…Do we need to add an AnimationComponent to the entity created or is it already include?

I’m not sure because in this demo, we only rename the animations but don’t really associate them with this entity when doing this:

self.entity.model.asset = asset.resource.model;

To me, it’s just taking the model part.

I’m not sure if the demo really take care of the animations part of a GLB.

GLBs are loaded as a container asset (https://developer.playcanvas.com/en/api/pc.ContainerResource.html) and within it will be the following properties:

  • animations (array of animations assets)
  • materials (array of materials assets)
  • model (model asset)
  • textures (array of texture assets)

In this case, you can either add the animation component at runtime or in the Editor and then when the GLB is loaded, add the animation assets to the component.

It is not done automatically.

1 Like

Sorry to resurrect this conversation; I’m attempting this at the moment, and after adding the animations to the animation component I’m getting a ‘nodes is undefined’ error. Any idea what might be causing this?

Verify if your animation is loaded correctly in the glTF Viewer of Playcanvas: PlayCanvas glTF Viewer

If not, you may have a problem with the export of your GLB.

Yeah, it’s definitely playing in the viewer! Not sure what that means :thinking:

Can you supply some code or a reproducible project please?

Hey @yaustar, here you can see a minimal reproducable codebase for the error:
https://playcanvas.com/project/791931/overview/glb-import

It could well be the GLB export settings; I’m very new to the idea of morphtargets and baked animation. However I’ve tried my best to follow tutorials I’ve found online to export correctly, and it seems odd that the animation tracks are viewable in the editors viewer, but gives this error when adding the animation to the imported assed manually. I guess I might be assigning it wrong?

Fixed: https://playcanvas.com/editor/scene/1200100

entity.animation.animations takes an array of animation resources (AnimationComponent | PlayCanvas API Reference) whereas asset.resource.animations is an array of animation assets hence the runtime error.

Changing it to:

        self.entity.animation.assets = asset.resource.animations;

Fixes this issue :slight_smile:

1 Like

Ahhh, ok. Thanks for clearing that up for me!

For future readers: I also found that I had to add a delay using setTimeout() to get the animation to play properly (playing the animation immediately seems to cause the mesh to disappear)

Oh really? It seemed fine in the test case example project you sent?

Interesting, in my browser it doesn’t work - I’m on macos firefox. I’ve checked in chrome and I also simply see this on load:

Ah, I was breakpointing, maybe that caused it to work the one time I tried it :thinking:

1 Like

Sorry to bring this up again but I’m also struggling with loading a GLB (incl embedded animation) and playing it.

I tried to do it exactly like you two (@yaustar @hearsepileup ) but had no success. I always get a Trying to play animation 'flamingo_flyA_' which doesn't exist error but its exactly the name of the animation. Do you have any idea?

Thanks a lot!

This is the project: https://playcanvas.com/editor/project/847182

The GLB works both on the PlayCanvas glTF Viewer and this one

Ah, the animation component doesn’t work with the the render component hierarchy. You would have to use the anim component or use https://developer.playcanvas.com/api/pc.ContainerResource.html#instantiateModelEntity instead so that you are using the model component with the animation component

1 Like

Example project with a fork of yours using the render and anim component combo: https://playcanvas.com/editor/scene/1265181

See this tutorial project for examples on setting the animations without a state graph: Animation without State Graph | Learn PlayCanvas

2 Likes

Thanks as always, perfect!

I think I’ll switch to the state graph sooner or later.