Adding mesh collision to gltf loaded model freezes the app for seconds

Help & Support
1

Hi,
I am building on top of the Loading glTF GLBs | Learn PlayCanvas and I want to add a collision to gltf model loaded with URL. I found a working solution but it’s very very slow. glb file with size ~10MB freezes the app for few seconds. Is there anything I can do better here to improve perf? Any async options I can consider?

It doesn’t happen in editor when I add the collision to render.

var LoadGlbUrl = pc.createScript('loadGlbUrl');
LoadGlbUrl.attributes.add('glbUrl', { type: 'string' });

// initialize code called once per entity
LoadGlbUrl.prototype.initialize = async function () {
    var filename = this.glbUrl.substring(this.glbUrl.lastIndexOf('/') + 1);
    utils.loadGlbContainerFromUrl(this.glbUrl, null, filename, function (err, asset) {
        if (err) {
            console.error(err);
            return;
        }

        var renderRootEntity = asset.resource.instantiateRenderEntity();

        var mesh = renderRootEntity.findByName("mesh");
        mesh.addComponent("collision", {
            type: 'mesh',
            asset: asset.resource.model
        });

        this.entity.addChild(renderRootEntity);

        // console.log("added col", collider);

    }.bind(this));
};

Thanks

3

A solution would be not to use a high-poly model for collision mesh, but use primitive shapes like boxes and spheres to approximate the model shape.

If the freeze is only at collider generation time, then there is this method (not yet implemented) that allows to speed it up: