Specify point color on a GreasedLine?

Questions
1

I want to draw a 3D polyline with adjustable width where I specify a color for each point and each segment is a gradient between two colors.
The example on color sampling in the documentation for GreasedLine looks like what I need, except that the specified colors appear on the center of each segment, not on each point.

In the example on color distribution types, there’s a comment saying “1 color per point”. I thought it means the center of each segment would be a color boundary, but that’s not what the result shows.

Maybe a GreasedLineMeshColorDistributionType.COLOR_DISTRIBUTION_TYPE_POINT could be added? Or there’s some other way to get what I want?

3

Hello @Sentret_C and welcome aboard!

This means that the given color starts at the given point.

Could you please give us an image of the line coloring you’re after?

4

Here, sorry for the delay.
Gradient between points | Babylon.js Playground

Gradient_between_points
Gradient_between_points438×147 1.65 KB

The proposed COLOR_DISTRIBUTION_TYPE_POINT may not be very useful without color sampling though.

5

You can set the uvs manually to emulate COLOR_DISTRIBUTION_TYPE_POINT like this:

The result is slightly different. It relies on the GPU color interpolation.

6

Thank you, but I commented out line2.uvs = uvs and didn’t see a difference.
Also the points and colors no longer match if I change the last point from (1, 8, 0) to (-5, 8, 0) (with the aforementioned line uncommented)

7

OMG

OMG OMG! My bad! :smiley: Sorry! I didn’t realize that I use colors3 for testing the uvs. I was playing around with the colors, added some values and forgot to swtich back to the original ones. Let me correct this mistake :wink:

Obviously we need to create our texture when using custom uvs:

This is getting close to your example but the GPU interpolation butchers it a bit. Let me think more… I’ll try to match your line color distribution.

8

Wow, many thanks!
I further tweaked a little bit. Now it looks good enough to me.

1 Like
9

Here is a more elegant solution using colorPointers and w/o the need to create a texture manually:

colorPointer is something like uvs. Each value points to a color in the colors array. You don’t have to divide it by the colors texture width. Imagine the colorPointer values as a float indexes of the color in the colors array.