In Three.js, I have a cube (or mesh) and I’m deciding between two approaches:
- Use one material per mesh and assign different colors using vertex colors
- Use multiple materials, one for each face (via material groups)
How should I decide which approach is better in terms of performance and optimization?
From what I understand:
- Vertex colors = single material → fewer draw calls
- Multiple face materials = more draw calls but easier per-face control
What are the practical rules or guidelines to choose between these two in real applications (especially for performance-sensitive scenes like CAD or large scenes)?
When is it actually worth using separate materials per face instead of sticking to vertex colors?
Without knowing any more details, vertex colors should be faster, but this does not mean they will render faster. In some cases the difference in performance might be negligible.
Make a quick test of a scene with as many objects as you envision. In this way you will know whether any of the approaches is faster. As far as my experience goes, there are also other factors that may influence the result. For example, if you plan to apply different textures to different faces, vertex colors are of little use.
Generally, only try to optimize when you (plan to) hit a bottleneck, otherwise you might waste a lot of efforts in vain. And if you want to easily change the approach, it is better to isolate/capsulate/API-tize the code in such a way, that you can easily change from vertex colors to multimaterials and vice versa, without changing the rest of the code.
Apart from these two approaches, you may also consider custom shaders. For a large number of objects this might be the fastest way.