The Edge Detect Effect

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

function main()
  d1.0 / 512.0

  c1texture2D(colorTexture, fragmentTexCoord + vec2(−d, −d)).rgb
  c2texture2D(colorTexture, fragmentTexCoord + vec2(0, −d)).rgb
  c3texture2D(colorTexture, fragmentTexCoord + vec2(+d, −d)).rgb
  c4texture2D(colorTexture, fragmentTexCoord + vec2(−d, 0)).rgb
  c5texture2D(colorTexture, fragmentTexCoord + vec2(0, 0)).rgb
  c6texture2D(colorTexture, fragmentTexCoord + vec2(+d, 0)).rgb
  c7texture2D(colorTexture, fragmentTexCoord + vec2(−d, +d)).rgb
  c8texture2D(colorTexture, fragmentTexCoord + vec2(0, +d)).rgb
  c9texture2D(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_FragColorvec4(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.