Engine-agnostic guide on optimizing scenes for better WebGL performance

Although this guide was created for Verge3D users we believe it will be really useful for Three.js developers as well (since Verge3D is Three.js-based). Check it out:

https://www.soft8soft.com/docs/manual/en/introduction/Optimizing-WebGL-performance.html

5 Likes


:joy:

It should be mentioned this is about optimizing assets not scene-management. Packing of multiple PBR maps is something THREE really should handle by default, it can be patched easily too though.

2 Likes

That’s because their soft seem to be mainly aimed at product visualization, so when you have a scene with one asset inside, scene optimization is pretty mush asset optimization.
I saw your work on your planet-big scene, I would be quite interested if you wrote this kind of article for big scenes with lots of assets, about the type of optimizations you use for your project.

3 Likes

Thanks for sharing this, lots of good info here! :smiley:

A couple of thoughts as I’m reading this to better translate it to three.js world:

Smoothing Groups

Smoothing groups are mentioned quite a bit, but we don’t usually use that terminology in three.js since we generally either store or pre-calculate explicit normals for each vertex, while smoothing groups are designed as a way to avoid doing that. The equivalent concept in three.js, as far as I know, is discontinuous UVs or UV seams (not entirely sure of the correct terminology here) - that is, if you set a smoothing group in 3DS Max and then import the model to three.js, vertices will be duplicated along the boundary between smoothing groups to allow normals to point in multiple directions from a single point in space (as along the edges of a cube).

Combining multiple greyscale maps in a single texture

three.js doesn’t support arbitrarily combining these maps (unless you write a custom shader).

Given a RGBA texture, we use these channels for maps:

RGBA

  • Diffuse color map: RGB (+A if transparent material)

RGB

  • Light Map: RGB
  • Environment map: RGB
  • Emissive map: RGB
  • Normal map: RGB

Red

  • Ambient Occlusion map: Red channel
  • Specular map (Basic, Lambert, Phong): Red channel
  • Displacement map: Red Channel
  • Bump map: Red Channel
  • Alpha map: Green Channel

Green

  • Roughness Map (Standard, Physical)

Blue

  • Metalness map (Standard, Physical)
4 Likes