Render Thick Lines in OpenGL


I started to implement thick line rendering in OpenGL for my OpenStreetMap rendering application.

There are different ways to render thick lines:

(1) Render 1 quad for each line and a start and end cap which consist of several triangles. This approach can be called “Rounded Caps”. The drawback is that this uses a lot of memory and a lot of vertex data. But the ending and connection of lines look pretty good – they look “round”, without much work to do.

(2) Use the Geometry Shader to add vertices and render thick lines. OpenGL ES 3.x did not support it when I started implementation. OpenGL ES 3.2 now supports Geometry Shaders (released Aug, 6th, 2015).

(3) Use the Fragment Shader to render the caps of the lines / quads. See: High-Quality Cartographic Roads on High-Resolution DEMs (Mikael Vaaraniemi, BMW Group)

(4) Render 2 triangles and move the vertices at the connection point (“connecting vertices”) so that these”connecting vertices” of two (or more) lines share the same position (“Moving Corners”).

First I tried approach (1), but this ended in high memory usage for the number of lines I wanted to display. Therefore I will now concentrate on (4).

The following images depict my idea for rendering thick lines in OpenGL with moving the “connecting vertices”. Source code will follow as soon as it starts to work in my application.

Rendering thick lines - convert lines to triangles

Rendering thick lines - convert lines to triangles