Best way to achieve sharp color transitions along a line?

Avatar
  • updated

Looking to achieve an effect like the image below with a line or polyline. Rather than a smooth gradient of color transitions I want a hard cutoff at certain points.

I tried doubling up on the points in a polyline with different colors, e.g:

points.Add(new (A, colors[0]));
points.Add(new (B, colors[0]);
points.Add(new (B, colors[1]));
points.Add(new (C, colors[1]));
points.Add(new (C, colors[2]));
points.Add(new (D, colors[2])); // etc...

But doing this just resulted in the polyline not rendering at all. The best idea I can come up with is drawing multiple independent lines or polylines, but that would mean for practical reasons switching from the component-based workflow to immediate mode or managing a mess of components, which I'd like to avoid. Is there a better approach?

Image 904

Reporting a bug? please specify Unity version:
Reporting a bug? please specify Shapes version:
Reporting a bug? please specify Render Pipeline:
URP
Avatar
Freya Holmér creator

a workaround is to offset them *ever so slightly* so that the color transition is shorter than a pixel, but longer than 0

the technical reason for this is that Shapes can't calculate the direction of lines when there's consecutive collocational points, so the math kinda collapses

Avatar
Jeremy

Ok this is kind of the approach I was leaning towards after I made this post as well. Thanks for confirming I'm on the right path.