Rendering Polylines

In part 1 I learned how to identify polylines and came up with a simple visual representation by drawing the polylines using the OpenGL “GL_LINES” primitive. This led to a network of lines representing the centres of roads/rivers/railway lines etc.

Extracting the data

To allow us to render the roads with some proper “width” I had to first extract this data from the json returned by the Overpass API. All this entails is looking for the “width” tag and then parsing the number as appropriate. However, one of the issues I ran into is that sometimes the Width tag is missing or is implicit depending on the feature (road etc). In this case I went back to my usual “If in doubt… guesstimate!” strategy!

Drawing the Lines

Once you have the width of the triangles and the polyline – it is relatively simple to come up with a “decent” looking result. The algorithm I used to triangulate the roads was as follows:

• March along the polyline
• For each line-segment calculate the direction
• Use the cross product to find the right vector (then negate this to get the left vector)
• Use the direction vectors found above to extrude the left/right side of the roads
• Now you are left with the vertices and all you have to do is triangulate them as if each segment is an individual quad

Obvious this has some issues – but it was quick and easy to do. The main issue is that at the corners if the angle is sharp – the edge’s won’t look correct. However this was good enough for me for just now. In the future I can fix the corner edges. I stuck to using the “up vector” since eventually the roads may be given some altitude from a digital terrain model etc.

The images below show the results, including a before and after: