# Low complexity shader to indicate the sides of a polyline

I have a bunch of polylines that I draw using GL_LINES. They can have thousands of points. They actually represent the separation of land and water on a map. I don't have complete polygons, just the ordered set of points.

I'm looking for a neat but efficient way to visually convey Side A and Side B as being different. For example I could offset the polyline in one direction a few times and fade it out (but every offset is doubling the number of points), or offset it once to make a "ribbon" and give one side a 'glow' like effect to mimic the outer glow or shadow of a polygon).

This is for a mobile application and I'm using OpenGL ES 2. I'd like to keep the effect as simple as possible from a complexity stand point. I'm looking for some additional ideas; maybe there's a clever shader technique out there or a visual effect I haven't considered.

-
How do you know which side is which? Are they always left side and right side? Are the polylines connected or disjoint? – ccxvii Nov 16 '12 at 8:33
The polylines are ordered such that 'left' is always SideA and 'right' is always SideB. The polylines aren't completely continuous, they're disjoint at places. – Pris Nov 16 '12 at 8:50

## 2 Answers

Given the lack of geometry shaders, you'll have to do something with your input data.

A simple approach would be to create a quad for each line segment, extending N pixels in the X axis. In old style GL immediate mode pseudo-code:

glBegin(GL_QUADS)
for each line {
glColor(0, 0, 0, 1)
glVertex(line.x0 - N, line.y0)
glColor(1, 0, 0, 1)
glVertex(line.x0, line.y0)
glColor(1, 0, 0, 1)
glVertex(line.x1, line.y1)
glColor(0, 0, 0, 1)
glVertex(line.x1 - N, line.y1)
}

If you want even prettier results: offset along a vector perpendicular to the line (instead of just in the X-axis) to get an even thickness, and fill in the gaps in the line joins. Look at 2d line art stroking algorithms (like in postscript) for inspiration.

-
Thanks for the reply. Your suggestion is pretty much what I meant when I said 'offsetting' in my original question. I'm looking for more 'outside-the-box' ideas (if I don't get any, I'll select your answer) – Pris Nov 16 '12 at 10:30

This is probably not better than offsetting the coordinates to produce a texturable triangle strip, and I haven't tested it, but since you're looking for ideas:

Use a thick line width, and a fragment shader which draws a glow on one side by comparing the interpolated projected vertex coordinate (passed from the vertex shader) to gl_FragCoord and deriving a gradient from the difference. I don't know exactly how varyings are interpolated on thick lines, so I don't know how well this will actually work.

Note that wide lines may be inefficient or even not supported by your hardware.

-
Unfortunately (as you predicted) I couldn't really get wide lines working correctly. I appreciate the reply though; it was a good idea. – Pris Nov 19 '12 at 23:19