Screen stuck for a while when adding a runtime model dynamically

I’m seeing the playcanvas screen getting stuck, in a way that I can’t interact with the scene whenever I try to load the model dynamically.
And I notice that it’s spending quite a lot of time in “homeEntity.addChild(entity);” call.
It’s ok if it took a while to load the model but the screen freezing during that time seems unacceptable. I did some profiling and found this callstack with the method addChild taking time.

Any ideas how to go about solving this performance issue?

FurnitureService.prototype.addToScene = function(){
    var modelUrl = 'https://d2dt6s2a3h81n8.cloudfront.net/furniture/blue-sofa/Sofa_Madelyn_Blue_SM_8819_V_1.3.json';
    var app = this.app;
    var entity = new pc.Entity();
    var homeEntity = this.app.root.findByName('floorPlan2');

    entity.setPosition(0,2,0);
    // entity.addComponent("model", {
    //     type: 'box',
    // });
    homeEntity.addChild(entity);
// Add it to the Entity hierarchy
    
    var assetFromUrl = this.app.assets.getByUrl(modelUrl);
    if(assetFromUrl !== undefined) {
        entity.addComponent("model");
        entity.addComponent("rigidbody", {
            type: "dynamic",
            mass: 1,
            restitution: 0.5,
        });
        entity.addComponent("collision", {
            type: "mesh",
            asset: assetFromUrl,
            model: assetFromUrl
        });
        entity.model.asset = assetFromUrl;
        homeEntity.addChild(entity);
    }
    else{
        app.assets.loadFromUrl(modelUrl, "model", function (err, asset) {
            entity.addComponent("model");
            entity.addComponent("rigidbody", {
                type: "dynamic",
                mass: 1,
                restitution: 0.5,
            });
            entity.addComponent("collision", {
                type: "mesh",
                asset: asset,
                model: asset
            });
            entity.model.asset = asset;
            homeEntity.addChild(entity);
        });
    }    
};

How complicated is the model? As you are adding the collision as a mesh, that’s probably what is causing the freeze as it’s on a single thread as part of the Ammo.js.

I would look at creating a super simplified mesh rather than the model for the collision only or use a primitive if you can.

Thanks @yaustar. You were right. removing the collision mesh component makes this load instantaneously :smiley:
I guess I need to try a combination of primitives as the mesh collision to make this fast.

You can have a simple mesh to represent the rough shape which should be fine as long as there’s only one/few mesh/es and low poly. Games do this a lot to represent worlds.

1 Like

hi~I have a similar problem~Could you give me any ideas?
The screen stuck for a while when adding some runtime model dynamically. The model don’t add collision, But the stuck is very obvious on the mobile phone

Do you have a project that shows this problem?