Setting Color of Thin Instance

Hello! :slightly_smiling_face:

I want to use thin instances to draw a mesh N times.
For the sake of simplicity, let’s use N=3 in this example.

I want to use a texture for both opacity and emissive.
The texture contains multiple colors per default. You can see the default texture in the current version of my attached playground, as I use a comment in line 29 to prevent its execution.

My goal is to have a scene in which (1) the left mesh has the default texture, (2) the central mesh is fully colored yellow and (3) the right mesh is fully colored red.

However, while running the example with line 29, it has not the expected result.

Here is my playground: https://playground.babylonjs.com/#217750#92

Thank you very much! :slightly_smiling_face:

Hi @greg97 ,

In this case you are customizing texture, not the color. You cannot simply set the color attribute.

I use CustomMaterial instead. It has a new attribute myColor defined. And you can pass different colors to this myColor attribute for each instance. I set to display the original texture if alpha channel is 0. You can add an extra attribute to control the switch between color / texture.

If you want to replace certain color in your texture by the value in the ‘myColor’ buffer:

3 Likes

Thank you. This looks promising. I will do some testing and give you an update.

Hi @slin, I probably should have added that I don’t want to set the color for transparent areas.
I was able to achieve the expected result by changing the condition accordingly.
Thank you for your help. :slightly_smiling_face:

Here is my updated version: https://playground.babylonjs.com/#217750#118

However, the colorized textures tend to look not smooth anymore. This holds especially for the other added examples.

Do you have any suggestions on how to fix this?

You can smoothen it out using the alphas to lerp from one color to the other like this, instead of using an if statement. :slight_smile:

2 Likes

Works like a charm. Thanks to both of you! :slightly_smiling_face:

1 Like