The Edge Detect Effect

The edge detect filter is another convolution. The eight neighboring input pixels all contribute to the output.

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

  x ← (c3 + c6 + c6 + c9) − (c1 + c4 + c4 + c7)
  y ← (c1 + c2 + c2 + c2) − (c7 + c8 + c8 + c9)

  gl_FragColor ← vec4(sqrt(x * x + y * y), 1.0)

In the case of edge detection, the pixel values are subtracted instead of added. Thus a simple derivative is calculated along the x and y axes. Thes differences are combined as a gradient, which highlights the changes in the image, and thus detects edges.