I haven’t seen a clear, concise overview of signed distance fields (SDFs) and their application to ray tracing, so here’s a guide that breaks down the basics and some advanced techniques!

First, some example renders:

[

Screenshot 2025-01-26 0741211076×1080 53.1 KB](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/7/b/7bc463fb39a8fd62b50cc07291aec5bb3811cccf.png "Screenshot 2025-01-26 074121")

[

Screenshot 2025-01-26 0754061077×1077 87.2 KB](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/9/f/9f7d5af0dc57556ea9eb08788024607c64dbbd41.png "Screenshot 2025-01-26 075406")

[

Screenshot 2025-01-26 0759441076×1080 98.2 KB](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/7/c/7c9e4ae762a5843c2e0fc4493c7c6a334fa1e997.png "Screenshot 2025-01-26 075944")

[

Screenshot 2025-01-14 0328341076×939 51.4 KB](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/8/8/889fd7f553f898e94dafc0259348bb0d00ba9962.jpeg "Screenshot 2025-01-14 032834")

[

Screenshot 2025-01-14 0334131077×1079 106 KB](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/7/e/7e837cafcfa944c5d720a26c275c4f9057ec98f6.jpeg "Screenshot 2025-01-14 033413")

[

Screenshot 2025-01-14 0400491076×1074 44.2 KB](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/3/5/350daaac658a711ea5b0287ce1d976499940220e.jpeg "Screenshot 2025-01-14 040049")

The first set uses a 512x512x512 SDF texture with ray tracing, while the second set are standard rasterized renders.

In the ray tracing examples, the visualization shows the number of steps (texture samples) used to register a hit, ranging from 0 to 128.

What Are SDFs?

SDFs (Signed Distance Fields) describe a scalar field where each point in space encodes the distance to the nearest surface. This concept is similar to physical fields like magnetism or gravity. For example, a 2D circle’s distance field might render white for “far” areas and black for “near” ones. By adding a sign, negative values indicate points inside the surface (often shown in red), and the transition zone marks the actual surface.

SDFs can be defined by functions, for instance:

GLSLCopied
float sdSphere( vec3 p, float s )
{
  return length(p)-s;
}

For more on these functions, check out Inigo Quilez’s overview on Shadertoy.

Mesh SDFs and Their Construction

Creating SDFs for arbitrary 3D meshes generally involves using 3D textures combined with an Axis-Aligned Bounding Box (AABB) for the mesh. Since most of space is far from any surface, sparse 3D textures are used. Alternative methods, such as approximating a mesh with primitive SDFs (spheres, capsules, etc.) and employing acceleration structures like BVH, exist but usually aren’t practical.

Key aspects in building a Mesh SDF include:

1. Uniting two SDFs (using the min operator)
2. Computing the SDF for triangles
3. Determining if a point is inside or outside the mesh

For example, here’s a function to compute the SDF of a triangle as provided by Inigo Quilez:

GLSLCopied
float udTriangle( vec3 p, vec3 a, vec3 b, vec3 c )
{
  vec3 ba = b - a; vec3 pa = p - a;
  vec3 cb = c - b; vec3 pb = p - b;
  vec3 ac = a - c; vec3 pc = p - c;
  vec3 nor = cross( ba, ac );

  return sqrt(
    (sign(dot(cross(ba,nor),pa)) +
     sign(dot(cross(cb,nor),pb)) +
     sign(dot(cross(ac,nor),pc)) < 2.0)
    ?
    min( min(
      dot2(ba * clamp(dot(ba,pa)/dot2(ba), 0.0, 1.0) - pa),
      dot2(cb * clamp(dot(cb,pb)/dot2(cb), 0.0, 1.0) - pb) ),
      dot2(ac * clamp(dot(ac,pc)/dot2(ac), 0.0, 1.0) - pc) )
    :
    dot(nor,pa) * dot(nor,pa) / dot2(nor) );
}

Determining whether a point is inside or outside often involves casting rays in multiple directions and analyzing the distribution of front-facing versus back-facing triangle hits.

Benefits of SDFs in Ray Tracing

By ray marching through an SDF, we can perform efficient cone tracing that accurately computes effects like soft shadows and penumbrae with considerably fewer samples than traditional triangle ray tracing (which may require hundreds of rays).

Additional advantages include:

• A fixed data size regardless of mesh complexity (e.g., a 3D texture vs. millions of triangles)
• O(1) lookup times with superior memory access patterns using GPU texture units
• Consistent performance even for scenes with over 100,000 triangles, unlike triangle-based approaches where cost increases with triangle count

For instance, when changing the sample scale to use 1 to 16 texture samples, most of the scene resolves in around 4 taps, with only a small percentage requiring more samples:

[

Screenshot 2025-01-27 0906561074×1078 49.8 KB](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/8/5/85b0e2ce1a521833f9f4c7bccdfb3b0f2ab8e8fd.png "Screenshot 2025-01-27 090656")

This approach can sometimes be almost cheaper than a standard SSAO pass, which usually requires 32 or more samples.

Disclaimer:

• All screenshots were taken in Shade

References:

• Inigo Quilez’s articles on ray marching and distance functions
• Alan Zucconi’s overview of signed distance functions
• Wikipedia’s entry on Signed Distance Functions
• 9bit Science on raymarching distance fields

Other Topics:

• Personal Project - Ray Tracing Distance Fields
• Clipping Solids (SDF functions)
• Clipping Solids (SDF) Modelling / Sculpting
• Troika-3d-text: library for SDF text rendering (2D)
• Xiamo - SDF modeling editor with Three.js
• Three-mesh-bvh: A plugin for fast geometry raycasting and spatial queries

This guide provides a comprehensive yet streamlined look at how SDFs work and their advantages in ray tracing. Feel free to ask follow-up questions or share your thoughts!