Game Development Stack Exchange is a question and answer site for professional and independent game developers. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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. enter image description here

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.

share|improve this question
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
up vote 0 down vote accepted

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:

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.

share|improve this answer
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.

share|improve this answer
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

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.