Parallel Texture Loading using Webworkers

I work on a project were we have very large textures and models by design in otherwise very simple scenes.
If we enable these HQ textures and models by default from the beginning, the load times are high and when using normal methods the main thread and UI are blocked during the download of these large files.

My idea was to load smaller assets using the traditional way first, allowing users to already familiarise themselves with the environment, while downloading the HQ textures and models in a separate webworker thread.

Would this work in theory, how well can BabylonJS assets be serialised and could there generally be a performance improvement if I downloaded the assets in separate threads from our cdn to then only shortly pause the application to replace the LQ assets with the new HQ ones in the main thread?

Downloading is already async being an IO operation. You do not need to do it on a separate worker, but it is still great to have lower Q first to prevent extra long load time.

What would be the correct way to load a HQ texture during runtime without freezing UI or animations then?

I tried a couple of things from the tutorial and all of them seemed to completely pause the execution of anything else.

Hello and welcome!

Some thoughts and remarks.

Could you be more specific in order to know what the ‘large’ is in this case?
Anyway, there are some limitations for the texture size which is possible to use for a current device.
You may check this value with engine.getCaps().maxTextureSize
Texture loading is async operation, so you may try a way mentioned by @sebavan.

  1. Load glb without textures and lower Q textures as separate files,.
  2. When done, you may start to load high Q textures.
  3. When done, replace low Q for high Q textures.

It seems that you may try KTX or Draco compression which may dramatically reduce texture size (and loading time) - Multi-Platform Compressed Textures | Babylon.js Documentation

Here is offscreen canvas worker example, but I am not sure that you’'ll need to implement workers in your case - https://www.babylonjs.com/demos/offscreen/

I checked back with my colleagues and as we want to display singular HQ models for CG and product showcases, they would like to use models of up 50mb in size with textures of around 8mb (they would be changeable using a button). They will go lower with their requirements but only if nothing else is possible.
Loading these in obviously takes some time, that’s why I thought about step by step loading in of higher quality assets over time.

In my current VSCode test setup on Firefox that amounts to “16384”. That seems rather small, is there any way to increase this? What happens if I go over budget?

Could you maybe point me to a playground example of some good practice code how to load in HQ (or any other textures) during runtime without interrupting the flow by pausing?

Thank you! I will take a good look at those!

Please be aware that for the real time rendering you may need some model optimization.

Do you have more info on your model (you can upload it into Sandbox and open the Inspector to see statistics) - how much it has meshes, facets, indices etc.
What is the proposed resolution of your texture?

many GPUs return 16384 as their max size. 16384*16384*4 floats (a floating point texture) would be 4Gig. Many GPUs don’t even have 4Gig of memory. - more about it.

For the year 2020 it looks like 99% of devices may support 4096 texture resolution but only 50% support > 4096.

So the biggest texture resolution which you should use is 4K, while 2K is far more reliable and easier to process.

Regarding all abovementioned I believe there is a huge space for the model improvement and optimization before it will go to Babylon render.

Thank you very much.

I will discuss this with our art department and see that we can get them optimised for realtime.

Have a look also at these topics:

Hi @Leolele99 ! We’ve recently merged a PR that should improve load times on 5.0 Added option to force sRGB Buffer support state by RaananW · Pull Request #11758 · BabylonJS/Babylon.js (github.com), can you update your project to see if it helps? :smiley:

2 Likes