2D Shape Rendering by
Distance Fields
Stefan Gustavson
12.1 Introduction
Every now and then, an idea comes along that seems destined to change the way
certain things are done in computer graphics, but for some reason it’s ver y slow to
catch on with would-be users. This is the case with an idea presented in 2007 by
Chris Green of Valve Software in a SIGGRAPH course chapter entitled “Improved
Alpha-Tested Magnification for Vector Textures and Special Effects [Green 07].
Whether the slow and sparse adoption is due to an obscure title, the choice of pub-
lication venue, a lack of understanding from readers, lack of source code, or the
shortcomings of Greens original implementation, this chapter is an attempt to fix
The term vector textures refers to 2D surface patterns built from distinct shapes
with crisp, generally curved boundaries between two regions: foreground and back-
ground. Many surface patterns in the real world look like this, for example printed
and painted text, logos, and decals. Alpha masks for blending between two more
complex surface appearances may also have crisp boundaries: bricks and mortar, wa-
ter puddles on asphalt, cracks in paint or plaster, mud splatter on a car. For decades,
real-time computer graphics has been long plagued by an inability to accurately ren-
der sharp surface features up close, a s demonstrated in Figure 12.1. Magnification
without interpolation creates jaggy, pixelated edges, and bilinear interpolation gives
a blurry appearance. A common method for alpha masks is to perform thresholding
after interpolation. This maintains a crisp edge, but it is wobbly and distorted, and
the pixelated nature of the underlying data is apparent.
174 II Rendering Techniques
Figure 12.1. Up close, high-contrast edges in texture images become jaggy, blurry, or wobbly.
Shape rendering by the method described here solves the problem in an elegant
and GPU-friendly way, and it does not require rethinking the production pipeline
for texture creation. All it takes is some insight into what can be done. First, I
present the principles of the method and explain what it is good for. Following that,
I provide a summary of recent research on how to make better distance fields from
regular artwork, removing G reens original requirement for special high-resolution 1-
bit alpha images. Last, I present concrete shader code in GLSL to perform this kind
of rendering, comment on its performance and shortcomings, and point to trade-offs
between speed and quality.
12.2 Method Overview
Generally speaking, a crisp boundary cannot be sampled and reconstructed properly
using standard texture images. Texel sampling inherently assumes that the pattern
is band limited, i.e., that it does not var y too rapidly and does not have too-small
details, because the pattern is going to be rendered by a smooth interpolation of the
texel samples. If we keep one of these constraints, that the pattern must not contain
too-small details, but want the transitions between background and foreground to be
crisp, formally representing an infinite gradient, we can let a shader program perform
thresholding by a step function and let the texels represent a smoothly varying function
on which to apply the step. A suitable smooth function for this purpose is a distance
A typical distance field is shown in Figure 12.2. Here, texels do not represent a
color, but the distance to the nearest contour, with positive values on one side of the
contour and negative values on the other. An unsigned distance field, having distance
values only outside the contour, is useful, but for flexibility a nd proper antialiasing, it
is highly preferable to have a signed distance field with distance values both inside and
outside the contour. The contour is then a level set of the distance field: all points
with distance value equal to zero. Thresholding the distance function at zero will
generate the crisp 2D shape. Details smaller than a single texel cannot be represented,
but the b oundary between background and foreground can be made infinitely sharp,
and because the texture data is smoothly varying and can be closely approximated
as a linear ramp at most points, it will behave nicely under b oth magnification and
minification using ordinary bilinear interpolation.

Get OpenGL Insights now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.