webots.min.js: improve performance

[stefaniapedrazzi]

The new robotbenchmark version based on PBR appearances and three.js takes longer to load a scene. Additionally on obstacle_avoidance benchmark, rotating the viewpoint doesn't work smoothly when the simulation is just loaded (it works fine once all the objects in the scene has been completely rendered at least once).

[stefaniapedrazzi]

I did some tests on the obstacle_avoidance benchmark and both issues are strictly related to textures:

• PBRAppearances have high resolution (2048x2048)
• Some of the PBRAppearances nodes are used many times (for example 30 times the VarnishedPine one)

I tried two different changes separately (just to measure the performance):

• reduce the resolution of big textures from 2048x2048 to 1024x1024
• reuse the same THREE.Texture object in webots.min.js for all the ImageTexture instances having the same texture filename (not taking care of other parameters that could change like the texture transform or the wrap)

With any of these two changes I could achieve a loading time of the scene comparable to the current robotbenchmark.net one.
The viewpoint rotation issue was not completely solved (still not always smooth) but it was much better than before and the viewpoint rotation didn't blocked completely.

[omichel]

It seems we should really avoid the duplication of identical textures and reuse them as much as possible.

[stefaniapedrazzi]

Yes, reusing images it is not enough and we also have to add a mechanism to reuse textures.

But I would also inspect if it is really necessary to use so big texture resolutions or if we could achieve the same with smaller images.

[stefaniapedrazzi]

The difference you get in the scene appearance when reducing the textures size is exactly the same as reducing the texture quality from "High" to "Medium".
There is clearly a difference in the appearance when looking closer to the object, but depending on the object if you are far enough there is no difference.

In Webots:

In Firefox:

In Webots we have an option in the preferences to reduce the quality/resolution of the textures.
But at the moment we don't have any similar option for webots.min.js and even setting
In this case the quality should depend on the client preferences.

Probably it is not worth to define the texture quality per object or per world but we should evaluate to add a way to reduce the texture quality based on the client system resources or client preferences.

[stefaniapedrazzi]

Also note that the texture quality preferences in Webots doesn't affect the resolution of the exported textures used by webots.min.js.

[stefaniapedrazzi]

Fixed in #751.