Skip to content
Lens · TechniqueIntermediate

Blur

Replace each pixel with a weighted average of its neighbors, the building block of bloom, depth of field and frosted glass.

UVScreenTextureScreen / postSurface

Cards

One live example to tweak, learn and copy.

How it works

A blur gives every pixel a little of its neighbors’ color. In shader terms it is a kernel: read the texels around the pixel, weight each one, add them up. The weights decide the look. Equal weights give a box blur, which turns small bright details into squares; weights that fall off like a bell curve give a Gaussian blur, which looks like an out-of-focus lens.

The hard part is cost, not the math. Every tap is a texture read, and a wide blur needs many. Three tricks keep it affordable, and most real blurs use all of them:

  • Separable passes. A Gaussian over a square equals a blur along the rows followed by a blur along the columns. That turns n × n reads into n + n, at the price of a second pass and a render target between them.
  • Smaller images. A blur on a half-size copy covers twice the radius in pixels of the original, over a quarter of the pixels. Bloom and depth of field blur at half size or smaller.
  • Bilinear taps. One read placed between two texels returns both, blended by the hardware, so a 9-tap kernel needs 5 reads.

Blur runs in two places. Over the finished frame it is a post-process pass, which is what the card here does. On a surface it reads a texture instead, the way frosted glass blurs what is behind it or a UI panel blurs the page under it.

Further reading