Introduction to Gradient Line Anti-Aliasing Technique

Our SDK team came up with this GRLAA technique to improve the look of the roads of our navigation demo.

GRLAA greatly improves the visual quality of the edges of the road geometry at a low computational cost. In addition, it makes it trivial to add the outlines of the road. Outlines improve the look of road edges and act as a visual aid for users, enabling them to more clearly distinguish the road boundaries.

Crossroads with GRLAA applied.

The general idea behind this approach is to render the centre of the road opaque, and then gradually introduce transparency for a percentage of the pixels that are near or on the edge of the road’s geometry.

The alpha of any particular fragment is based on two values. The first value is the distance between the fragment and the edge of the road. The second is the rate of change of this distance; this is also known as its gradient or, more formally, its partial derivatives.

The RGB colour of the fragment is determined by performing an interpolation between the value 0, 0, 0 to produce a solid black outline (or another outline colour) and the road’s flat colour, which is passed to the fragment shader as a uniform. All that is based on the interpolant t, which is derived from the relative distance and rate of change calculations. In the next section, there will be more detail on how to derive these values and why they are significant to the GRLAA technique.

It might be worth noting that the algorithm, in its current form, can only work for geometry that represents an object with a known width, such as a road or line.