Fine tuning performance (draw calls)

Hi,

from what I see, the second scene (with more meshes) will work slightly more efficiently. But in fact, there will be no much difference as the number of draw calls is quite low in both cases.

What matters a lot, is the number of unique shaders in your scene. Shader compilation is low in WebGL. For that reason it is always better to have, e.g. 1 shader and make variations to it by modifying colors/ swapping textures with Puzzles.

Another thing is textures. Big textures will slow down both loading and rendering. Sometimes it is better to add more geometry rather than use normal maps, etc.

Finally, avoid too complex shaders. Procedural nodes such as Noise are slow. Also post-processing is slow.

Hi Brandon,
I do use the approach that Yuri described. I think that the best way is to pack the UVs from multiple objects onto one map. You can color code that map and use it in a shader to differentiate objects and feed values into shader parameters. The industrial robot demo uses a similar technique. In the case of the robot, multiple objects share the same shader and the color/roughness/metallic values are stored in shared maps.
As long as you are frugal with the size and quantity of your image maps, the shaders that use them should outperform a complex procedural shader. A tool like Substance can help with the production of these combined PBR maps.
As Yuri points out, you can always use puzzles to swap the maps on-the-fly if that makes sense for your scene.
FWIW, the shader compile times in your screenshot look reasonable to me. I certainly have seen much worse.

You can start with this recomendations.
Video
Documentation