Distance Fields

Textureless Materials & Scalable UI


And why developers should care.

A distance field is a multi-dimensional field which can be queried to find the distance from a given point to a surface.

There are various techniques to generate fields or query them. This post will focus on 2D fields generated using shader code.

Whilst these principals have applications have applications in lighting, collision, and 3D rendering, we’re most interested in their application as a replacement for conventional image based UI.



  • Fields can be sampled at a variable sharpness, allowing for vector-like precision when required.
  • Fields can be sampled across a range of values, allowing for ‘blur’ at zero extra cost.
  • Fields can often remove all texture reads, drastically reducing texture memory.
  • Fields can be easily transferring between game/rendering engines.
  • Fields can be animated in ways texture never could.
  • Rendering 2D fields can be very cheap.


  • Some results require a high level of complexity, which may mean the use of a field is no longer justified.
  • Some creative changes would be quicker and easier on a texture.
  • Complex non-standard shapes can require a large instruction count.
  • Rendering 3D fields with raymarching can be very expensive.
  • There are limited resources available to learn to use fields.
  • Fields require the use of a shader, where some game engine systems only support basic texture inputs.
  • Authoring a distance field is sometimes slower than authoring a texture.

Article in progress.