This is a small app demonstrating how to produce an SDF in WebGL by rendering very wide lines and writing distance to the depth buffer.

There are three visualization modes:
  • Distance represents signed distance with a color indicating the sign and an opacity indicating the distance.
  • Isolines shows lines of equal distance, where color indicates the sign.
  • Triangles illustrates the way the geometry is triangulated for rendering. To see what's going on a little better, it may help to turn off depth testing and reduce line width below.

Here you can see what happens when the depth test is turned off...

...and try changing the line width.

Finally, this control toggles a triangle-by-triangle animation showing each line segment's contribution to the result. Note that the animation is for illustration purposes only -- the lines can all be rendered together in a single draw call.