Optimize web simulations loading time

[omichel]

trafficstars

The web interface of Webots needs to load 3D world files and textures to display the 3D scene. Depending on the complexity of the world, number and size of textures, network bandwidth, local machine horsepower, etc. this process takes a few seconds. We should study a number of different world files and find solutions to speed-up their loading time in the web interface. This may include:

• improving the javascript or webassembly code of the 3D viewer
• caching data (worlds, textures, etc.)
• pre-loading world files in Webots on the back-end, so that we can skip the Webots loading time.
• any other good idea to make the 3D view load faster in the browser and improve user experience. In addition, the user should be properly informed about the progress of the download:
• display the world file as soon as possible, even if some textures are yet loaded.
• display a progress bar on the loading process.
• display loading error if any.

[stefaniapedrazzi]

We should update this issue, part of it seems to be already addressed in R2021b, and add a milestone.

[BenjaminDeleze]

WebotsJS suffers from two known slowdowns when loading worlds:

• The textures are loaded in a synchronous way to be able to benefit from the cache of WREN. To address that, we would need to:
  • change the loading of images to an asynchronous way. It means remove the await instructions that force the JS code to wait and build the objects once the promises are solved.
  • Build a 'cache' directly in JS such that we do not need to rely on the WREN cache to load images.
• On Firefox on windows and mac, the first world is slower to load because of the initial compilation of shaders. It concerns the glLinkProgram function when called on phongShader, phongStencilAmbientEmissiveShader, phongStencilDiffuseSpecularShader, pbrShader and pbrStencilDiffuseSpecularShader

[BenjaminDeleze]

Some progess have been done:

• [x] load the textures/meshes in parallel and have a download list in WebotsJS #3849
• [x] fix the problem with the initial compilation of shaders #3943

Some other ideas of what could be done:

• What currently take time in streaming is: loading of the pixels of images in WebotsJS and the opening of the world in Webots, it is maybe possible to parallelized those tasks.