Coloring a instanced cylinders vertex wise

Questions
1

I have following scene with instaced cylinder with edge rendering:

Now I want to color the cylinders “vertex-wise” for example the top and bottom of the cylinder should be black and lateral surface green.

Is there a performant way to do this?
Side question: Is it possible to do the same with thin instanced? I would also like to implement picking in the next step.

2

As long as all instances have the same top, down and side you could either use a texture or vertex colors.

If not, you might need custom attributes for the three values and a custom shader.

And if it needs more per vertex specific infos, instances won t be a good fit

1 Like
3

The cylinders have all the same “color distribution” and only when selected I want to change the vertex colors of one specific cylinder. In other engines I can do this with bufferattributes likes “colors” instead of “color” but it seems like it works differenttly

4

vertex colors is simple and supported in babylon, but you can not change it per instance, like you can not change the position buffer per instance. in this case you could probably use a custom shader like from NME where you mix the colors based on an attib value so the selected one could have a different color set than the others and only the gradient info is stored in the attributes.

5

In my example I change the position per instance or not?

  ` instance.position.x = 20 - Math.random() * 40;
    instance.position.y = 20 - Math.random() * 40;
    instance.position.z = 20 - Math.random() * 40;`

To the vertex colors: If I understand correctly I can’t give a vertex of an instance a specific color without using a shader directly?

6

@sebavan was speaking about the position buffer, meaning the position of each of the vertex individually: you can change the global position for each instance but not their vertex coordinates. Same thing for the vertex color buffer: you can have a different global color for each different instance but not a different color for each vertex for each instance.

That’s it.

1 Like