Render Thick Lines in OpenGL

Standard

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

2 thoughts on “Render Thick Lines in OpenGL

  1. Dragan

    No 4 is really simple and elegant solution to broken thick line strip. And also computationally less intensive as you can reuse 3 out of 6 points for every segment. How come I didn’t think of this? Thanks for sharing!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">