Callback/Event when model is loaded and visible

I’m loading and displaying a glb model at runtime. As described in this tutorial:
https://developer.playcanvas.com/en/tutorials/loading-gltf-glbs/

I would like to have a callback or event, when the model is fully loaded as well as rendered.

For testing i have added a console log after assigning the model to the model component. The log however gets called about 1-2 seconds before the model is rendered.

LoadGlb.prototype.initialize = function() {
    var self = this;
    utils.loadGlbContainerFromAsset(this.glbAsset, null, this.glbAsset.name, function (err, asset) {
        self.entity.model.asset = asset.resource.model;
        console.log("MODEL LOADED!");
    });
};

Actually the 1-2 seconds is a freeze frame. I guess there has to be done some setup, for the model to be rendered. Is there any way i can minimize that freeze time?

So the model may be ready but any materials that are rendered for the first time need to compile their shaders. And that can take a while.

One way to force the materials to render when the app starts is to have them used on a model that is rendered (can be a simple plane), and after the first frame ends disable those entities.

I cant do that because the materials are embedded in the glb file which gets loaded at runtime.
However because this happens right at the start, i can show the loading screen for the duration of the freezing which works quite nicely.

Got it, can you try this:

    utils.loadGlbContainerFromAsset(this.glbAsset, null, this.glbAsset.name, function (err, asset) {
        self.entity.model.asset = asset.resource.model;
        this.app.once('frameend', function() {
           console.log("MODEL LOADED!");
        });
    });
2 Likes

Ooh that’s quite an elegant solution!

1 Like