[Solved] Gradient Along Extrusion Axis?

Hello everyone,

I am trying to create a “heat-map” effect along the axis of a custom extrusion in Babylon.js and was hoping to get some guidance on how to achieve this. Specifically, I am trying to create a gradient effect where one end of the extrusion is one color and the other end is a separate color with blending in-between.

I have tried controlling UV coordinates with a gradient texture and have played with the gradient material, but unfortunately, neither approach has worked. I believe a custom shader will be needed to achieve the desired effect, but I don’t have experience with shader language. I was hoping someone could suggest the best way to approach this.

Ideally, I would like to pass a concentration value for each point in the extruded shape to the shader, which would then handle the coloring based on this value. It would be even better if I could configure multiple color stops.

I have created a basic playground which should provide a more tangible example of what I am trying to achieve: https://playground.babylonjs.com/#1R3NGA#2.

If anyone has any suggestions or examples of how to achieve this, I would be very grateful.
Thank you in advance for your help!

You can try to set vertex colors:

Note: I’m not sure of the number of vertices to take into account when caps is used, but what I did seem to work in my testings…

2 Likes

Jedi Master indeed, thanks for the help @Evgeni_Popov , this will work nicely!

Using BABYLON.mesh.getTotalVertices, I think you can figure out where to start applying colors. As in the below for the 4 pt shape, 8 point path:

no cap, single sided, vertices = 40
cap, single sided , vertices = 60
no cap, double sided, vertices = 80
cap, double sided, vertices = 120

so it looks like caps adds 20 vertices/side, and double-sided simply doubles the vertices without caps. Would need more experimentation or a look at the code to figure out how it works for arbitrary number of shape points.

This pg calculates the number of cap vertices without guessing :slight_smile:

1 Like