GLB Animation Implementation Walkthrough

Help & Support
,
1

https://playcanvas.com/editor/scene/1411665

I am switching from learning x3d, three.js, and webgl to playcanvas so please be patient!
I have 2 different types of animations in 2 different .glb’s.
1 is skeletal mocap made in blender
the other is a “stashed” animation (a simple rotation loop) also made in blender.

I have seen other help topics quite similar to this one but the responses are not comprehensive and since I don’t really understand the workflow of Playcanvas yet, I’d appreciate a walkthrough!

I understand that glb’s need some scripting to separate out the animations and you can’t just slap an Anim component on it and hope it works. But where do I code this? And how? I am very new and very bad at understanding JS…

Thanks!

1 Like
2

At the moment, the Editor doesn’t support GLB asset importing and therefore there are some not so great workarounds to to use GLBs within the Edtior.

We recommend using FBX and with that, the whole workflow makes more sense.

If you can’t use FBX and you must use GLBs, then I can put together an example with your project that you’ve posted up here.

2 Likes
3

I noticed that your GLBs have animations already in them. In which case you can do something like this:

https://playcanvas.com/project/924872/overview/f-2-glb-viewer

Where the animations are added to the anim component at runtime.

var LoadGlb = pc.createScript('loadGlb');
LoadGlb.attributes.add('glbAsset', { type: 'asset', assetType: 'binary' });

// initialize code called once per entity
LoadGlb.prototype.initialize = function () {
    var self = this;
    utils.loadGlbContainerFromAsset(this.glbAsset, null, this.glbAsset.name, function (err, asset) {
        var renderRootEntity = asset.resource.instantiateRenderEntity();
        self.entity.addChild(renderRootEntity);

        var animationAssets = asset.resource.animations;
        if (animationAssets.length > 0) {
            renderRootEntity.addComponent('anim');
            for (var i = 0; i < animationAssets.length; ++i) {
                var animationAsset = animationAssets[i];
                renderRootEntity.anim.assignAnimation('Animation' + i.toString(), animationAsset.resource);
            }

            renderRootEntity.anim.baseLayer.transition('Animation0');
        }
    });
};
3 Likes
4

Wow! Ok – thank you so much!
You just DID IT!

So for future referencers – anddd my edification – where did you put that script?
I see the animations working bbbuuuttt if you hadn’t done that and just sent the script I would have had NO IDEA where to put it hahahaa.

Thanks so much @yaustar … you are a real rockstar!

1 Like
5

In the project, there is a script named load-glb.js. You add the scriptType instance to an entity that you want the GLB to be added under. I also just realised I made a mistake in the code so correcting that now.

You will also need glb-utils.js in the project somewhere which declares functions to load GLBs binary assets in the global scope.

2 Likes
6

I also use the uranus editor plugin to execute scripts in the editor, with just a minor addition (as explained in the docs) you can execute the load-glb script and let you interact with the GLB mesh just like with an FBX:

image
image1910×1147 298 KB

3 Likes
7

Hi @TRT

With Uranus can you change material with the engine’s?
if not, would I have more customization if I re-exported to FBX?

Super cool plugin!

8

You will have much more customization in the Editor, yes if you use FBX and import that into the PlayCanvas Editor.

9

True, you can’t access materials in the editor when using the load-glb with uranus script, means its actually pretty limited and its best to work with FBX when there is more customization needed.

@yaustar is there more GLB editor customization on the roadmap? I mostly work with GLB and it seems to get more and more common in the future.

10

Yes, we really want to support GLB importing for Editor and trying to work out how best to go about it as there is a lot of customisability in GLBs that doesn’t quite work with our current Editor asset system