Streaming Asset Loading Outside of Babylon to Prevent scene Lag

[earthendev]

I’m not aware of anything inside Babylon supporting this, but you can use Web workers with XHR or fetch requests and then load them using the data: syntax:

@earthendev

I think [if the files do not have textures] you can send the JSON via webSocket and then add them like this:

BABYLON.SceneLoader.ImportMesh("", ASSETS_URL, "data:" + jsonContent, scene, (    meshList, particleSystems, skeletons) => {
...
}

This is a special syntax that is not very well documented (it’s not really a data URL), but it works! We use a similar approach with very good results. I think the size of typical babylon (JSON) files won’t be a problem at all for the websocket server. This approach is good if you reuse the same textures anyways, but not so good if you need to send new textures, for the reason @gbz gave.

Please ignore the comment about the textures, for your use case you could just embed them. They will even work IIRC if you give the call the correct directory and don’t change mesh names.

This is the system we use (except we’re not using web workers yet, but that’s easy to add). There’s a bit of a setup cost, but it shouldn’t amount to much more than 200 lines of Javascript. Our whole loading code is about 100 lines at the moment.

edit: If the Babylon loading code is the cause of the lag, then you can also try spreading it out using requestAnimationFrame (only load 1 asset or mesh (using 1st parameter to select the mesh) per frame) in combination with a queue where all the json/gltf files that were downloaded are placed. Probably best implemented with promises. Also don’t do everything in the callback, I have found that complex callbacks like this are also often a source of lag.

Another idea (that we might implement too) would be to run a second NullEngine in a web worker and load everything through that one. I’m not sure if Babylon supports this though.