Asset loading strategy

Questions
1

Lets say I have up to 20 unique models to load for one scene. Would I wait till each one is completely loaded before loading the next one or load them all at once? Right now I’m loading everything together and its quite slow on some devices, I wondered if there was any way to improve this.

2

Personally I used AssetsManager.load() to load all assets. I haven’t tried one at a time but I can’t see how that would be faster as it’s the same number of server hits and same total volume of data. Maybe someone else can comment on that.

You could break asset loading down into phases with priority given to initially visible or needed assets, but then you might run the risk of the scene glitching a bit as subsequent assets are loaded and added to scene.

You could also have different assets loaded depending on device or available bandwidth or user choice. E.g. detect device and bandwidth, then load either high res desktop or low res mobile assets.

1 Like
3

Have you tried using Promises? They were designed for that

1 Like
4

Have you tried using Promises?

You are right promises are usually the way to do these things. Im using BabylonSceneLoader.ImportMesh, I suppose wrapping this in a promise and returning before taking on the next asset should do the trick.

Detecting device currently I thought you could only detect whether it was mobile or not, perhaps mixing this with resolution you could find out if they have a low-end device and load in a smaller file…

I should explain calling this function here many times in one column one after the other is not a good idea right? Would this cause a surge in memory / cpu usage? Within the callback in each one i would do further modifications to the scene like creating UI etc. :

BABYLON.SceneLoader.ImportMesh("", "./assets/models/OPT/", "Floor.glb", scene, (meshes, particleSystems, skeletons) =>{ });
BABYLON.SceneLoader.ImportMesh("", "./assets/models/OPT/", "Walls.glb", scene, (meshes, particleSystems, skeletons) =>{ });

BABYLON.SceneLoader.ImportMesh("", "./assets/models/OPT/", "Building.glb", scene, (meshes, particleSystems, skeletons) =>{ });

BABYLON.SceneLoader.ImportMesh("", "./assets/models/OPT/", "Ceiling.glb", scene, (meshes, particleSystems, skeletons) =>{ });

BABYLON.SceneLoader.ImportMesh("", "./assets/models/OPT/", "Sofa.glb", scene, (meshes, particleSystems, skeletons) =>{ });

BABYLON.SceneLoader.ImportMesh("", "./assets/models/OPT/", "Devices.glb", scene, (meshes, particleSystems, skeletons) =>{ });

BABYLON.SceneLoader.ImportMesh("", "./assets/models/OPT/", "Props.glb", scene, (meshes, particleSystems, skeletons) =>{ });

and SO ON

5

You have the incremental loading. “’.incremental.babylon”

This allows not to block the page and to load the assets one by one on the fly. Assets are only loaded when the camera can see them.