The Blur Effect

The blur effect is another common Photoshop filter. It is a simple example of a convolution. A convolution is an image processing operator that calculates a weighted sum of neighboring pixels.

Here, the variable d gives the distance from one pixel to the next. It is configured for a 512×512 texture.

function main()
  d ← 1.0 / 512.0

  c1 ← texture2D(colorTexture, fragmentTexCoord + vec2(−d, −d)).rgb
  c2 ← texture2D(colorTexture, fragmentTexCoord + vec2(0, −d)).rgb
  c3 ← texture2D(colorTexture, fragmentTexCoord + vec2(+d, −d)).rgb
  c4 ← texture2D(colorTexture, fragmentTexCoord + vec2(−d, 0)).rgb
  c5 ← texture2D(colorTexture, fragmentTexCoord + vec2(0, 0)).rgb
  c6 ← texture2D(colorTexture, fragmentTexCoord + vec2(+d, 0)).rgb
  c7 ← texture2D(colorTexture, fragmentTexCoord + vec2(−d, +d)).rgb
  c8 ← texture2D(colorTexture, fragmentTexCoord + vec2(0, +d)).rgb
  c9 ← texture2D(colorTexture, fragmentTexCoord + vec2(+d, +d)).rgb

  c ←
    1.0 * c1 + 2.0 * c2 + 1.0 * c3 +
    2.0 * c4 + 4.0 * c5 + 2.0 * c6 +
    1.0 * c7 + 2.0 * c8 + 1.0 * c9

  gl_FragColor ← vec4(c / 16.0, 1.0)

In this case, the center pixel contributes the most to the output. The pixels in the cardinal directions contribute half that, and the corner pixels contribute a quarter. The result is a simulation of an out-of-focus camera.