Shapes Are Functions in Disguise

Introduction

Pick any shape — a circle, a rounded box, a letter "A". Now assign every point in the plane a single number: the distance to the nearest point on the shape's boundary. Points outside get a positive number; points inside get the same distance but negative; points exactly on the surface get zero.

That function is a Signed Distance Field (SDF).

The sign is the whole trick. Positive means "outside," negative means "inside," and the zero level set is the shape itself. You never need to store the boundary explicitly — the shape is implicit in the function's level sets. Want to shrink or grow the shape? Add a constant to the function. Want a rounded corner? Clamp the distance. Want to blend two shapes into one smooth blob? Take the minimum of their SDFs (or a smooth approximation of it). All of these operations are a line of math, not a mesh edit.

SDFs were popularized in computational geometry and computer graphics alike. Valve used them in 2007 to render crisp vector-quality text on GPU hardware at a fraction of the cost of traditional methods. Ray marchers — algorithms that step along a ray until $f(\mathbf{p}) \leq 0$ — turn an SDF into a raytracer with a loop of a dozen lines. And because the function is analytic, the surface normal at any point is simply the gradient $\nabla f$ — no triangle soup required.

This article unpacks how SDFs are defined, why blending works, and where you will find them quietly running the graphics on your screen right now.

Try It

Below, two circular blobs are rendered by evaluating their SDFs on a canvas pixel by pixel. Drag each blob with your mouse and watch them smoothly melt into one another when they get close — that is the smooth-union operator at work.

<!-- SDF smooth-union demo: two distance-field blobs that merge when close -->
<canvas id="sdf-canvas" width="480" height="300" aria-label="Interactive signed distance field canvas — drag the blobs"></canvas>
<div class="controls">
  <label>Smoothness (k): <input id="k-slider" type="range" min="0" max="120" value="60" /></label>
  <span id="k-val">k = 60</span>
</div>
<div class="info" id="info">Drag a blob to move it. Bring the two close to watch them merge.</div>
<div class="btns">
  <button id="reset-btn" type="button">Reset</button>
</div>

/* Layout: canvas + controls strip + info line */
* { box-sizing: border-box; }
body { font-family: system-ui, sans-serif; margin: 0; background: #f5f7fa; color: #222; }
canvas { display: block; border-radius: 10px; cursor: grab; width: 100%; max-width: 480px; touch-action: none; }
canvas:active { cursor: grabbing; }
.controls { display: flex; align-items: center; gap: 1rem; margin: .6rem 0 .3rem; flex-wrap: wrap; }
label { font-size: .9rem; display: flex; align-items: center; gap: .4rem; }
input[type=range] { width: 120px; }
#k-val { font-size: .85rem; color: #555; }
.info { font-size: .88rem; color: #444; min-height: 1.3em; margin-bottom: .4rem; }
.btns { display: flex; gap: .5rem; }
button { font: 600 14px system-ui; padding: .4rem .85rem; border: 1px solid #1d3557;
         background: #1d3557; color: #fff; border-radius: 8px; cursor: pointer; }

// SDF smooth-union demo. Each pixel evaluates two circle SDFs and their smooth union.
// sdfCircle(px,py,cx,cy,r) = distance from (px,py) to circle of radius r centred at (cx,cy).
// smin: Quilez smooth-min blends the two SDFs within distance k of their shared boundary.
const canvas = document.getElementById('sdf-canvas');
const ctx = canvas.getContext('2d');
const W = canvas.width, H = canvas.height;

// Two blobs: position (x,y) + radius r.
let blobs = [
  { x: W * 0.35, y: H * 0.5, r: 70 },
  { x: W * 0.65, y: H * 0.5, r: 55 }
];

// Read smoothness k from the slider.
function getK() { return parseFloat(document.getElementById('k-slider').value); }

// Circle SDF: Euclidean distance minus radius.
function sdfCircle(px, py, cx, cy, r) {
  const dx = px - cx, dy = py - cy;
  return Math.sqrt(dx * dx + dy * dy) - r;
}

// Smooth-min (Quilez polynomial): blends two SDFs when |a-b| < k.
function smin(a, b, k) {
  if (k <= 0) return Math.min(a, b);
  const h = Math.max(k - Math.abs(a - b), 0) / k;
  return Math.min(a, b) - h * h * k / 4;
}

// Pixel-by-pixel SDF evaluation and colouring.
function render() {
  const k = getK();
  const imgData = ctx.createImageData(W, H);
  const data = imgData.data;

  for (let py = 0; py < H; py++) {
    for (let px = 0; px < W; px++) {
      const f0 = sdfCircle(px, py, blobs[0].x, blobs[0].y, blobs[0].r);
      const f1 = sdfCircle(px, py, blobs[1].x, blobs[1].y, blobs[1].r);
      const f = smin(f0, f1, k);

      let r, g, b;
      if (f < 0) {
        // Inside the merged shape: blue gradient.
        const t = Math.max(0, 1 + f / 60);
        r = Math.round(29 + t * 30);
        g = Math.round(100 + t * 40);
        b = Math.round(200 - t * 20);
      } else if (f < 2) {
        // Thin white edge at the zero level set.
        r = 255; g = 255; b = 255;
      } else {
        // Outside: light distance-field gradient (lighter = farther).
        const t = Math.min(1, f / 90);
        r = Math.round(220 - t * 50);
        g = Math.round(230 - t * 40);
        b = Math.round(245 - t * 30);
      }
      const i = (py * W + px) * 4;
      data[i] = r; data[i + 1] = g; data[i + 2] = b; data[i + 3] = 255;
    }
  }
  ctx.putImageData(imgData, 0, 0);

  // Draw white dot at each blob centre for drag affordance.
  blobs.forEach((b, idx) => {
    ctx.beginPath();
    ctx.arc(b.x, b.y, 5, 0, Math.PI * 2);
    ctx.fillStyle = 'rgba(255,255,255,0.85)';
    ctx.fill();
    ctx.strokeStyle = '#1d3557';
    ctx.lineWidth = 1.5;
    ctx.stroke();
  });
}

// Mouse/touch drag: pick nearest blob centre within 30 px.
let dragging = null;
function nearestBlob(x, y) {
  let best = null, bestD = 30;
  blobs.forEach((b, i) => {
    const d = Math.sqrt((x - b.x) ** 2 + (y - b.y) ** 2);
    if (d < bestD) { bestD = d; best = i; }
  });
  return best;
}
function canvasXY(e) {
  const rect = canvas.getBoundingClientRect();
  const scaleX = W / rect.width, scaleY = H / rect.height;
  const src = e.touches ? e.touches[0] : e;
  return [(src.clientX - rect.left) * scaleX, (src.clientY - rect.top) * scaleY];
}
canvas.addEventListener('mousedown', e => {
  const [x, y] = canvasXY(e);
  const idx = nearestBlob(x, y) ?? (blobs.findIndex((b, i) => {
    const f = sdfCircle(x, y, b.x, b.y, b.r); return f < 0;
  }));
  if (idx !== null && idx !== -1) dragging = idx;
});
canvas.addEventListener('mousemove', e => {
  if (dragging === null) return;
  const [x, y] = canvasXY(e);
  blobs[dragging].x = x; blobs[dragging].y = y;
  document.getElementById('info').textContent = `f₁=${Math.round(sdfCircle(x,y,blobs[0].x,blobs[0].y,blobs[0].r))}, f₂=${Math.round(sdfCircle(x,y,blobs[1].x,blobs[1].y,blobs[1].r))}`;
  render();
});
canvas.addEventListener('mouseup', () => { dragging = null; document.getElementById('info').textContent = 'Drag a blob to move it. Bring the two close to watch them merge.'; });
canvas.addEventListener('mouseleave', () => { dragging = null; });
canvas.addEventListener('touchstart', e => { e.preventDefault(); const [x,y]=canvasXY(e); const idx=nearestBlob(x,y); if(idx!==null) dragging=idx; }, { passive: false });
canvas.addEventListener('touchmove', e => { e.preventDefault(); if(dragging===null)return; const [x,y]=canvasXY(e); blobs[dragging].x=x; blobs[dragging].y=y; render(); }, { passive: false });
canvas.addEventListener('touchend', () => { dragging=null; });

document.getElementById('k-slider').addEventListener('input', () => {
  document.getElementById('k-val').textContent = 'k = ' + getK();
  render();
});

document.getElementById('reset-btn').addEventListener('click', () => {
  blobs = [{ x: W * 0.35, y: H * 0.5, r: 70 }, { x: W * 0.65, y: H * 0.5, r: 55 }];
  document.getElementById('k-slider').value = 60;
  document.getElementById('k-val').textContent = 'k = 60';
  document.getElementById('info').textContent = 'Drag a blob to move it. Bring the two close to watch them merge.';
  render();
});

render();

<!-- SDF smooth-union demo: two distance-field blobs that merge when close -->
<canvas id="sdf-canvas" width="480" height="300" aria-label="Interactive signed distance field canvas — drag the blobs"></canvas>
<div class="controls">
  <label>Smoothness (k): <input id="k-slider" type="range" min="0" max="120" value="60" /></label>
  <span id="k-val">k = 60</span>
</div>
<div class="info" id="info">Drag a blob to move it. Bring the two close to watch them merge.</div>
<div class="btns">
  <button id="reset-btn" type="button">Reset</button>
</div>

/* Layout: canvas + controls strip + info line */
* { box-sizing: border-box; }
body { font-family: system-ui, sans-serif; margin: 0; background: #f5f7fa; color: #222; }
canvas { display: block; border-radius: 10px; cursor: grab; width: 100%; max-width: 480px; touch-action: none; }
canvas:active { cursor: grabbing; }
.controls { display: flex; align-items: center; gap: 1rem; margin: .6rem 0 .3rem; flex-wrap: wrap; }
label { font-size: .9rem; display: flex; align-items: center; gap: .4rem; }
input[type=range] { width: 120px; }
#k-val { font-size: .85rem; color: #555; }
.info { font-size: .88rem; color: #444; min-height: 1.3em; margin-bottom: .4rem; }
.btns { display: flex; gap: .5rem; }
button { font: 600 14px system-ui; padding: .4rem .85rem; border: 1px solid #1d3557;
         background: #1d3557; color: #fff; border-radius: 8px; cursor: pointer; }

// SDF smooth-union demo. Each pixel evaluates two circle SDFs and their smooth union.
// sdfCircle(px,py,cx,cy,r) = distance from (px,py) to circle of radius r centred at (cx,cy).
// smin: Quilez smooth-min blends the two SDFs within distance k of their shared boundary.
const canvas = document.getElementById('sdf-canvas');
const ctx = canvas.getContext('2d');
const W = canvas.width, H = canvas.height;

// Two blobs: position (x,y) + radius r.
let blobs = [
  { x: W * 0.35, y: H * 0.5, r: 70 },
  { x: W * 0.65, y: H * 0.5, r: 55 }
];

// Read smoothness k from the slider.
function getK() { return parseFloat(document.getElementById('k-slider').value); }

// Circle SDF: Euclidean distance minus radius.
function sdfCircle(px, py, cx, cy, r) {
  const dx = px - cx, dy = py - cy;
  return Math.sqrt(dx * dx + dy * dy) - r;
}

// Smooth-min (Quilez polynomial): blends two SDFs when |a-b| < k.
function smin(a, b, k) {
  if (k <= 0) return Math.min(a, b);
  const h = Math.max(k - Math.abs(a - b), 0) / k;
  return Math.min(a, b) - h * h * k / 4;
}

// Pixel-by-pixel SDF evaluation and colouring.
function render() {
  const k = getK();
  const imgData = ctx.createImageData(W, H);
  const data = imgData.data;

  for (let py = 0; py < H; py++) {
    for (let px = 0; px < W; px++) {
      const f0 = sdfCircle(px, py, blobs[0].x, blobs[0].y, blobs[0].r);
      const f1 = sdfCircle(px, py, blobs[1].x, blobs[1].y, blobs[1].r);
      const f = smin(f0, f1, k);

      let r, g, b;
      if (f < 0) {
        // Inside the merged shape: blue gradient.
        const t = Math.max(0, 1 + f / 60);
        r = Math.round(29 + t * 30);
        g = Math.round(100 + t * 40);
        b = Math.round(200 - t * 20);
      } else if (f < 2) {
        // Thin white edge at the zero level set.
        r = 255; g = 255; b = 255;
      } else {
        // Outside: light distance-field gradient (lighter = farther).
        const t = Math.min(1, f / 90);
        r = Math.round(220 - t * 50);
        g = Math.round(230 - t * 40);
        b = Math.round(245 - t * 30);
      }
      const i = (py * W + px) * 4;
      data[i] = r; data[i + 1] = g; data[i + 2] = b; data[i + 3] = 255;
    }
  }
  ctx.putImageData(imgData, 0, 0);

  // Draw white dot at each blob centre for drag affordance.
  blobs.forEach((b, idx) => {
    ctx.beginPath();
    ctx.arc(b.x, b.y, 5, 0, Math.PI * 2);
    ctx.fillStyle = 'rgba(255,255,255,0.85)';
    ctx.fill();
    ctx.strokeStyle = '#1d3557';
    ctx.lineWidth = 1.5;
    ctx.stroke();
  });
}

// Mouse/touch drag: pick nearest blob centre within 30 px.
let dragging = null;
function nearestBlob(x, y) {
  let best = null, bestD = 30;
  blobs.forEach((b, i) => {
    const d = Math.sqrt((x - b.x) ** 2 + (y - b.y) ** 2);
    if (d < bestD) { bestD = d; best = i; }
  });
  return best;
}
function canvasXY(e) {
  const rect = canvas.getBoundingClientRect();
  const scaleX = W / rect.width, scaleY = H / rect.height;
  const src = e.touches ? e.touches[0] : e;
  return [(src.clientX - rect.left) * scaleX, (src.clientY - rect.top) * scaleY];
}
canvas.addEventListener('mousedown', e => {
  const [x, y] = canvasXY(e);
  const idx = nearestBlob(x, y) ?? (blobs.findIndex((b, i) => {
    const f = sdfCircle(x, y, b.x, b.y, b.r); return f < 0;
  }));
  if (idx !== null && idx !== -1) dragging = idx;
});
canvas.addEventListener('mousemove', e => {
  if (dragging === null) return;
  const [x, y] = canvasXY(e);
  blobs[dragging].x = x; blobs[dragging].y = y;
  document.getElementById('info').textContent = `f₁=${Math.round(sdfCircle(x,y,blobs[0].x,blobs[0].y,blobs[0].r))}, f₂=${Math.round(sdfCircle(x,y,blobs[1].x,blobs[1].y,blobs[1].r))}`;
  render();
});
canvas.addEventListener('mouseup', () => { dragging = null; document.getElementById('info').textContent = 'Drag a blob to move it. Bring the two close to watch them merge.'; });
canvas.addEventListener('mouseleave', () => { dragging = null; });
canvas.addEventListener('touchstart', e => { e.preventDefault(); const [x,y]=canvasXY(e); const idx=nearestBlob(x,y); if(idx!==null) dragging=idx; }, { passive: false });
canvas.addEventListener('touchmove', e => { e.preventDefault(); if(dragging===null)return; const [x,y]=canvasXY(e); blobs[dragging].x=x; blobs[dragging].y=y; render(); }, { passive: false });
canvas.addEventListener('touchend', () => { dragging=null; });

document.getElementById('k-slider').addEventListener('input', () => {
  document.getElementById('k-val').textContent = 'k = ' + getK();
  render();
});

document.getElementById('reset-btn').addEventListener('click', () => {
  blobs = [{ x: W * 0.35, y: H * 0.5, r: 70 }, { x: W * 0.65, y: H * 0.5, r: 55 }];
  document.getElementById('k-slider').value = 60;
  document.getElementById('k-val').textContent = 'k = 60';
  document.getElementById('info').textContent = 'Drag a blob to move it. Bring the two close to watch them merge.';
  render();
});

render();

Result

Console

The solid colour shows the inside (where $f < 0$ ). The thin boundary is the zero level set — the actual shape. The gradient shading outside reveals the distance field itself, lighter farther from the surface. Drag one blob onto the other and notice how the junction softens: no sharp corner, just a continuous blend. No mesh was edited; the merge is pure arithmetic on two distance functions.

How Blending Works

The core operations

Let $f$ and $g$ be two SDFs. Three basic set operations become arithmetic:

\text{union}(f,g) = \min(f, g)

\text{intersection}(f,g) = \max(f, g)

\text{subtraction}(f,g) = \max(f, -g)

The smooth union replaces the hard $\min$ with a polynomial blend introduced by Inigo Quilez. With smoothness parameter $k > 0$ :

h = \max\!\bigl(k - |f - g|,\; 0\bigr) / k

\text{smin}(f, g, k) = \min(f, g) - h^{2} \cdot k / 4

When $f$ and $g$ are far apart this is just $\min$ ; near the boundary where $|f - g| < k$ , it smoothly interpolates, creating the organic "blobby" junction you see in the demo.

Finding the surface: sphere tracing

An SDF tells you the radius of the largest empty sphere centred at your current point. A ray marcher exploits this:

Start at position $\mathbf{p}$ along the ray.
Evaluate $r = f(\mathbf{p})$ .
Step forward by $r$ — you are guaranteed not to skip over the surface.
Repeat until $r \leq \varepsilon$ (hit) or the total distance exceeds a budget (miss).

Each step doubles your proximity in the ideal case, so convergence is $O(\log(1/\varepsilon))$ — effectively constant for any scene at reasonable precision. This is why GPU shaders can ray-march an entire world of blended SDFs in real time: no acceleration structure, just the distance function itself.

Normals for free

Because SDFs satisfy $|\nabla f| = 1$ almost everywhere (the eikonal equation), the unit surface normal at any point $\mathbf{p}$ with $f(\mathbf{p}) \approx 0$ is simply:

\hat{n} = \nabla f(\mathbf{p})

Approximate this with finite differences and you get analytically correct lighting with no vertex normals, no tangent frames — just the field itself.

Where It Matters

SDFs appear wherever a program needs to reason about distance to a surface:

Font rendering on GPUs: Valve's Chris Green (2007) showed that a single low-resolution SDF texture can render a glyph at any size with crisp edges — the shader just checks the sign. This is still how many game engines render text.
Procedural 3D graphics: demoscene and shader artists (Shadertoy, GLSL sandbox) build entire sculpted worlds by composing SDF primitives. Engines like Unity and Unreal expose SDF-based field rendering for particle collisions and ambient occlusion.
Collision detection: robotics and physics engines store the environment as an SDF; querying distance and gradient gives both penetration depth and push-out direction in a single lookup.
Neural implicit surfaces (NeRF variants, DeepSDF, 2019): deep networks learn to output the SDF of an object from point-cloud or multi-view data. The surface is never stored as a mesh; it is the zero set of the learned function.
Medical imaging: signed distance maps let surgeons measure how close a tumour is to a vessel boundary by reading a single voxel value.

Understanding SDFs is a natural companion to ray tracing and connects to the broader theme of implicit representations in geometry and computational geometry.

Conclusion

A signed distance field collapses the complexity of a shape into the simplest possible representation: a number at every point in space. That number is positive outside, negative inside, and exactly zero on the surface. From that one idea flow smooth blending, sphere-traced rendering, analytic normals, font rasterisation, and neural 3D reconstruction — all without storing a single triangle.

The next time a game engine renders a rounded button, a shader blobs two spheres together, or an MRI viewer shows tissue margins, there is a good chance a signed distance field is doing the heavy lifting. Shapes are functions. Functions are flexible. That is the whole secret.

Comments

Loading comments...

https://www.kipuhub.com/en/article/signed-distance-fields/Content licensed under CC BY-NC 4.0.

Cookies & privacy

Signed Distance Fields

Turn any shape into a distance function and blend shapes for free