What is a Signed Distance Function?

and why should you care?

Signed Distance Functions allow you to generate graphics that can be applied to a surface in a game. Unlike textures, SDF masks can be resolution-independant, require almost zero memory, and can be parameterised to animate in ways that are simply impossible with textures alone. They are a powerful and essential tool in a technical artists toolbelt.

Let's clarify some of these terms:

Signed Distance Functions are functions that operate on a domain and return the distance to the surface of a shape.

The distance value that is returned is a Signed Distance Field, and this field can be sampled to generate several useful things, including but not limited to a shapes, surface properties, raymarched 3D renders, text glyphs and more.

Shader Graphs

Node based SDF

It is, of course, perfectly possible to translate almost all SDF techniques to material function/subgraph versions, for use in a shader graph.

By wrapping the field generation functions, field operations, and sampling operations into their own nodes, fields can be easily used even by artists who are less comfortable with maths.

float3 visualize(float d) {
	// Start with solid blue inside and solid grey outside.
	float3 col = (d>0.0) ? float3(0.25) : float3(0.054,0.450,.819);
	
	// Have brightness falloff from the surface exponentially.
	col *= 1.0 - exp(-6.0*abs(d));

	// Use a fixed smoothstep sampling technique
	// on a modified version of the field to draw concentric rings.
	float m = smoothstep(0.35, 0.45, abs(frac(d * 25.) - 0.5));
	col *= 0.8 + (0.2 * m);

	// Draw a thin white line around the surface.
	col = lerp( col, float3(1.0), 1.0-smoothstep(0.0,0.005,abs(d)) );

	return col;
}

Writing Distance Functions

Get started in Unreal & Unity

You can't write about SDF without mentioning the brilliant Inigo Quilez.

Most of the mathematics that I use when working with SDF comes from IQ.

Booleans

Unlike in polygon based 3D geometry, boolean operations with distance fields (When those fields are constructed properly) actually work.

By combining multiple fields in interesting ways, complex shapes can be built up that are useful far beyond simple primitives.

Union, Subtraction, and Intersection are the basic building blocks of boolean operations, but there are also special "smooth" boolean operations which give you a smoother transition at the cost of field integrity.

Smooth booleans can distort the field leading inconsistent field density - You can see this in the stretching of the lines in the demos below. This can be somewhat counteracted with this technique, or when your result is going to be a mask, dynamic sampling approaches (ddx/ddy) can also help.

It's worth noting that subtraction does not result in a accurate external distance field. In most cases, this isn't a problem.

float2 opUnion(float a, float b) { 
	return min(a,b);
}

float opSubtraction(float a, float b) {
	return max(-b, a);
}

float opIntersect(float a, float b) {
	return max(a, b);
}

float opExclusion(float a, float b) {
	return opUnion(opSubtraction(a,b), opSubtraction(b,a));
}

float opSmoothUnion(float d1, float d2, float k) {
    float h = clamp( 0.5 + 0.5*(d2-d1)/k, 0.0, 1.0 );
    return mix( d2, d1, h ) - k*h*(1.0-h); 
}

float opSmoothSubtraction(float d1, float d2, float k) {
    float h = clamp( 0.5 - 0.5*(d2+d1)/k, 0.0, 1.0 );
    return mix( d2, -d1, h ) + k*h*(1.0-h); 
}

float opSmoothIntersection(float d1, float d2, float k) {
    float h = clamp( 0.5 - 0.5*(d2-d1)/k, 0.0, 1.0 );
    return mix( d2, d1, h ) + k*h*(1.0-h); 
}

Rounding

Making a distance field rounded is simple and useful. By subtracting a radius value from the field, you can essentially offset the surface of the shape being represented, which implictly rounds corners.

Since we usually want to round corners without "inflating" the shape, I usually adjust the size parameter of the shape I'm working with to subtract the radius before passing the resulting field to the rounding function, in order to counteract the upcoming inflation.

It can sometimes also be a good idea to clamp the radius to avoid cases where the radius exceeds the size of the shape. Other times, unclamped values can give useful results.

// Consider using the r value in your initial distance function so your field compensates for the "inflation" this will manifest.
float opRound(float field, float r) {
    return field - r;
}

Annular

Ring-Shaped

We can "fold" all negative field values using abs. If all distance values are considered positive, and a radius parameter is subtracted, we find the field that desribes the shell of a shape.

In a simple sphere field, this operation would return a ring field.

In the double annular example we simple apply the ring function twice, with two different thickness values.

// Returns the annular field with thickness "r".
float opRing(float field, float r) {
	return abs(field)-r;
}