How to color different adjacent faces in custom mesh sharing edges

[digEmAll]

Hi all,
I’m generatin a custom mesh made by several rectangular faces.
In order to be more efficient and create a manifold object, I need to share the vertices between adjacent faces inside the custom mesh.
Problem is, in this way if I use vertex colors, I cannot have 2 adjacent faces of different colors.

For example, see this oversimplified model with 2 rectangular faces:

Babylon.js Playground

My goal would be to have the left face colored in red and the right in yellow (see the image below), but of course in the Playground I could only set two vertices in red, while the other four are yellow because there are two shared vertices between the two faces.

Is it possible to achieve something like that? Maybe with some “custom shader magic tricks” ?

Thanks in advance for any suggestion

[Deltakosh]

Here we are: Vertex colors with shared-points | Babylon.js Playground

A simple NME shader: Babylon.js Node Material Editor

[digEmAll]

That is great!
Thanks for the very quick response, I’ll give it a try as soon as I can!

[digEmAll]

I managed to modify the NME in order to support 4 colors, but this is pretty “static”, in the sense that I have 4 constant colors and 4 greater-equal conditions hard-coded in the NME definition:

Babylon.js Node Material Editor

Is it possible to pass a vector of N colors and N “thresholds” on y-axis (i.e. where the color should change), possibly through a mesh attribute or something parametrized outside the NME ?

Sorry for the probably silly question but I’m a little confused about how NME works…

Thanks in advance

[sebavan]

This might be able to help Babylon.js docs and if not we might need to add some of the missing docs. @Deltakosh will be back on Monday with a better answer

[Deltakosh]

Unfortunately we have to deal with shader constraints here. But maybe you can do it differently.

If you encode in the vertex color for instance an index (say the first 10 vertices have color.r to 0, then the next 10 to 0.1, etc…)

Then you can use that to index the color you want from a texture that you can provide as well

Does it sound clear?

[digEmAll]

I think I grasped the basic concept of your suggestion but I’m not capable of implementing it in the NME (I’m really really bad with visual programming languages ).

If you could provide a really small example, that would be great, but no worries if you don’t have the time.
For my use case, every time the palette/model changes, I think that I can try to generate and build a new node-material with the N colors and N conditions

Thanks again, your first example has been very useful.

[Joe_Kerr]

Can you insert 2 extra vertices? Then you could shift the gradient color away.

[digEmAll]

Actually I prefer to avoid this because I want to reduce the number of vertices as much as possible.