Rendering Any Line Thickness Using Quads

As detailed here: Rendering 2D Datasets in the section 2D Visual Styles, the hardware can be used to render thick lines, but up to a maximal thickness. For many graphic cards using OpenGL, the maximal thickness is about 10 pixels. Therefore, it’s not possible to render a thick line of any thickness by using the native hardware capabilities. We have to think to another solution to do this.

This tutorial details a way to convert a RED::ILineShape list of segments into thick lines. This uses the creation of a mesh shape set with quadrilaterals that are rendered using texture mapped quads.

Converting a Line Segment into a Quad

The mapping between a line segment and a textured quad is quite straightforward:

The line segment turned into 3 textured quad shapes

We compute a local orientation basis to setup our quad vertices properly; The rounding shape of the quad ending ensures that the connectivity between two segments is properly handled.

UVs on the quad shapes are set so that we can have the body quad fully in the texture filled area:

UV setup of the thick line quad shapes

Finally, the material uses an alpha mask to discard the portion of the round end that should not be seen on screen. This way, discarded fragments don’t interfere with other graphic data that could be seen under them.