Many meshes with the same geometry and material, can I change their colors?

20
votes

I have a large number (~1000) of THREE.Mesh objects that have been constructed from the same THREE.Geometry and THREE.MeshPhongMaterial (which has a map).

I would like to tint (color) these objects individually.

Naïvely, I tried changing the mesh.material.color property, but changing this property on any of the objects changes the color of all the objects at once. This makes sense, since there is only one material that is shared among all the objects.

My next idea was to create a separate THREE.MeshPhongMaterial for each object. So, now I have a large number of THREE.Mesh objects that been constructed from the same THREE.Geometry, but have individual THREE.MeshPhongMaterials (that share the same texture). This allows me to change the colors individually, but the performance is worse. The chrome profilier shows that the app is spending significant time doing material-things like switching textures.

The material color is just a uniform in the shader. So, updating that uniform should be quite quick.

question: Is there a way to override a material color from the mesh level?

If there was, I believe I could share the material among all my objects and get my performance back, while still changing the colors individually.

[I have tested on v49 and v54, they have identical performance and degredation]

update: I have built a test case, and the performance drop due to this is smaller than I thought it was, but is still measurable.

Here are two links:

In the first case, there are only two materials, in the second case each cube has it's own material. I measure the framerate of the first case to be 53fps on this machine, and the framerate of the second is 46fps. This is about a 15% drop.

In both cases, the color of the material of every cube is changed every frame. In the case with many materials, we actually see each cube getting it's own color, in the case with only two materials, we see them all having the same color (as expected).

2
performancecolorsthree.jsshare
Uhm, that sounds like a "bug". If you can reproduce the issue with r54 would be great if you could report it in the issues section on github. – mrdoob
Thanks @mrdoob. I've added an issue: github.com/mrdoob/three.js/issues/2916 – Harold

2 Answers

6
votes

Yes. Per object, clone your material using material.clone(), modify its emissive and color, and set the object's material to this clone. Shaders and attributes are copied by reference, so do not worry that you are cloning the entire material each time; in fact the only things that are copied by value are the uniforms (such as emissive and color). So you can change these per individual object.

Personally I store the original material on a separate, custom property of the object so that I can easily switch back to it later; depends what your needs are.

0
votes

If you're writing your own shaders, you could use a uniform variable for a general tint (not vertex specific) and pass that in to the shader for factoring into the overall color. vec4f_t and vec4f() are not standard in the C portion, but your code probably already has equivalents.

C:

vec4f_t hue = vec4f(....);  // fill in as desired
// load the shader so that GLuint shader_id is available.
// "hue" is a uniform var in the vertexshader
GLUint hue_id = glGetUniformLocation(shader_id, "hue"); 
// later, before rendering the object:
glUniform4fv(hue_id, 1, &hue);

the.vertexshader:

uniform vec4 hue;  // add this and use it in the texture's color computation