Fading opacity of single object3d without changing the material

Questions
,
1

I am about to reduce the size and complexity of a scene to enhance performance. At the moment there are tons of objects that have unique materials applied but share same visual apperance. My plan is to break down the amount of materials and re-reference them back to all meshes that visually cohere - however I need the possibiliy of fading in and out.

does anyone know about the best practice of fading out an in individual meshes of a set of meshes with the same material applied/referenced?

As know, when I tween the material.opacity from 1.0 to 0.0 it also affects other meshes in an unintended way. the object.property mesh.visible is a boolean type and doesnt allow fading.

I have also tried to wrap all meshes dynamically into another object that has a new material, in which i could only change the opacity - without success.

Thanks in advance.

2

  1. Let me take you on the nostalgic trip called fog :relieved: (optionally, LOD.) Even modern games have pop-in (sometimes even too much), or fog - that’s not really something to be ashamed of

  2. Putting objects into a parent object does not influence how the children are rendered. Parent-children relations in three (and kinda in any other 3D rendering), only allows to inherit the world / local transformations. Material of the parent is bound to the geometry of that parent, material of the child is bound to the geometry of the child - they don’t know of one-another’s existence.

3

Assume you have 1000 objects all sharing the same material. You want to change the material of one of them, but keep the other 999 unchanged. If this is correct understanding of your problem, I have done something like this:

  1. Clone the material of the selected object, e.g. obj.material = obj.material.clone();
  2. Then modify it as you want, it will not affect the material of the rest 999 objects
  3. Once a material is cloned, there is no need to clone it again, if you change the material again, so you might put cloning into if( obj.material === globalMaterial) obj.material = obj.material.clone();

This would be useful if a relatively small number of objects differ from the rest. If all object are different, then you will end up with 1001 materials.

Another approach is to have N versions of the same material with various degrees of opacity. Then, instead of changing opacity, just pick the closest material. This relies on the fact that people might not distinguish small changes in opacity, especially if they happen fast.

4

This is a huge help. I’m trying to do a similar thing, and this is a game changer. I only have like 10 unique materials (all the same type of material, but different colors), so I just made a findOrCreateMaterial function to only create as many materials as necessary. So now I have like 2,000 meshes only making use of like 10 materials. Any time I need to animate one I make a temporary material with clone and then throw it away when I’m done by calling dispose() and setting it to null. I can’t use instancedMesh because my geometries are all different dimensions (and using scale on them makes them look weird), so this is exactly what I was looking for. Anyways, thanks!