Save 37% off PRO during our Black Friday Sale! »

Signed Distance Fields

Signed Distance Fields

Short talk given at a UWaterloo CS Club's "Alt+Tab" short talks event.


Tristan Hume

July 03, 2018


  1. Signed Distance Fields For all your rendering needs By Tristan

  2. Image credit: Warren Moore, Inigio Quilez, Tom Beddard

  3. Contents — 2D distance fields — 3D distance fields —

  4. Background: Antialiasing Image credit: Wikipedia

  5. Standard Text Rasterization — Raster all glyphs to texture with

    antialiasing at all required sizes — Render quads with texture coordinates pointing into the atlas Has to render glyph for every size! This makes pinch-zooming and text in 3D worlds slow or blurry.
  6. Signed Distance Fields (SDFs) — The distance to the nearest

    point on the object's boundary — Negative on the inside of the object
  7. Rendering Text with SDFs — Apply a smooth step function

    in a shader — Can add outline/glow to text by modifying mapping — Same texture can look good at a variety of sizes
  8. Text in 3D worlds — Size of text on screen

    can change rapidly, poor fit for glyph atlases — Detailed in a 2007 paper by Chris Green at Valve
  9. Problem: Rounded Corners — If text is rendered much bigger

    than SDF texture, corners get rounded — Solution: fancy tricks with multiple distance fields — The msdfgen project on Github can do this for you
  10. 3D SDFs

  11. Ray Marching Distance Fields — Allows you to quickly ray

    trace distance fields — Fast enough to run in real time on a GPU fragment shader — Step as far as the distance field tells you is safe — Can compute normals using numerical slope
  12. None
  13. ClayBook: What did you just see? — World stored as

    a signed distance field in 586MB 3D SDF texture — Fluid simulation done on GPU produces SDF every frame — Shape morphing done simply by linearly interpolating distance fields — Tracing cones through distance field for antialiasing and soft shadows — Use distance field information to approximate ambient occlusion
  14. Modeling — Can use functions to calculate distance field as

    required — Inigo Quilez has a handy page with tons of these formulas — Unlike a 3D texture, doesn't take tons of space and can be evaluated accurately at any point
  15. Constructive Solid Geometry — Really easy to combine primitives into

    models — Just use math: min, max
  16. SDF only fanciness

  17. None
  18. 3D Fractals! — People have figured out how to use

    derivatives of Mandelbrot-style iteration fractals as distance estimators. — Most famous are the Mandelbulb and Mandelbox
  19. None
  20. The End