Optimizing several textures with only different colors



I am developing a project where I have 1 shape that needs to be displayed in 10 different color variations, my designer already edited and exported the shape in all colors but we are running into performance issues on our THREE scene (which has thousands of instances of these shapes).

I am currently considering loading just 1 texture and changing its color on the code by setting MeshBasicMaterial.color to different values on each of the colors. This would result in having 1 texture and 10 materials, instead of 10 textures and 10 materials.

What is the performance of using material.color? Is this multiplication run on every single render call, even if there is no change to the color property? Would using a custom shader and setting the color as a uniform value be even better?

I hope all the information needed is here!




Did I get it correctly, that now you have 10 materials with the same texture and different colours?
Why not to have a single material and set its .color property dynamically, using .set() method?