Distance Fields

tap/click the right side of the screen to go forward →

So it’s been a while since my last visual article. I've done several explorations since, but only as quick sketches.

Note: Feel free to check my previous sketches on the homepage!

← tap/click the left side to go back

But my latest exploration turned out so interesting that I just had to write another article.

← or use arrow keys to navigate →

It’s about distance fields, which has a lot of use cases in graphics programming. For this exploration, I used them to create a few simple effects:

outlines,

glowing objects,

and contour lines.

In this article, I'll show you what distance fields are and how to use them to build these effects.

I won’t go too deep into the technical implementation, though. But hopefully, this will give you a visual intuition about distance fields and help you use them.

Now, let’s start! First off: what actually is a distance field?

You can think of a distance field as a map that tells you how far each point in your image is from the nearest object.

It’s usually stored as a texture, which you can sample directly in a shader by providing the point’s coordinates.

The number returned by the map tells you how far that point is from the nearest object. Here, it’s {value}.

There are several methods to build a distance field, but the simplest is to pick a point and search outward until you hit an object’s edge.

Then, you store that distance in your field texture.

Repeat this process across all other points, and you get your distance field.

Now, the texture tells you each point’s distance from its closest object.

A couple of notes, though:

First, distance fields usually store only a distance value, not a direction.

So the value alone tells you the nearest object is within a certain radius, not exactly where.

You can actually derive directions from distance values. But since the effects we’ll build don’t need them, I’ll save the discussion for another time!

Second, distance fields are often built at a lower resolution than the final image. This means exact distance values aren't available for every pixel.

You can try using the nearest available value to your sampled point, but you might get inaccurate results.

You can fix this with bilinear interpolation, which uses the four nearest values instead of just one.

First, interpolate horizontally between the left and right pixels.

Then, interpolate those results vertically to get your final value.

This smooths out the data and gives you more accurate readings in the gaps where values aren’t originally available.

And in turn, it gives you seamless distance values across the entire image.

Now that we know every pixel’s distance to the nearest object, it’s time to have some fun with it!

Think of the distance fields as a topographical map, where pixels with similar distances form contour lines.

You can then set custom rules that decide each pixel’s color and transparency based on its distance from the surrounding objects.

For example, you can color pixels whose distance is below a threshold, and leave the rest transparent. The result is an outline around the objects.

Click the Show Rules button below to see how this rule works.

Next, try smoothing the edge with a soft gradient instead of a hard cut, and now your objects glow.

Now try interpolating between two colors over distance, and you get this repeating gradient around your objects.

As you can see, all these effects are just pixel colors computed as a function of distance.

So you can keep extending them by changing the rules.

You can even add a time input to make everything move!

And that's pretty much everything I wanted to share about distance fields.

Of course, there are still a lot of things we haven’t touched.

For instance, we haven’t covered how to generate distance fields efficiently. There are several methods, but one popular approach is using the Jump Flooding Algorithm. Check out this Wikipedia article if you want to read more about it.

We also only used an unsigned distance field here, which only tracks distance outside objects. But there’s also a signed distance field, which measure distances inside the objects too.

But I'll save those topics for another time!

For now, I hope this breakdown gave you a great mental model about the distance fields and how to use them for creating simple effects.

Thank you for reading, and see you on another article!

visualrambling.space is created by Damar, someone who loves exploring new topics and rambling about them visually.

If you enjoy this kind of visual article, please follow me on social media. I publish visual stories and sketches on all kinds of topics topics I found interesting.

I’m also open to collaborations and commissioned work. If you need help explaining a complex technical topic visually, feel free to reach out.

X/Twitter Bluesky LinkedIn RSS Email