GLSL Edge Detection

Yesterday, I read 834144373’s ShaderToy code which did GLSL Edge Detection in 97 chars, it was really simple and fast:

Meanwhile, the rendering result is astonishingly awesome:

GLSL Edge Detection

However, there are some noise from the GLSL edge detection.

Thus, I have made a little improvement on this algorithm and produced cleaner edges in this ShaderToy live demo:

Let’s expand the code a little bit:

According to OpenGL manual:

fwidth means  abs(dFdx(p)) + abs(dFdy(p))

and fwidthFine is equivalent to abs(dFdxFine(p)) + abs(dFdyFine(p)).

Sigmoid Function

Furthermore, one can use a Sigmoid function to increase the contrast. According to Wikipedia, a sigmoid function is a mathematical function having a characteristic “S”-shaped curve or sigmoid curve. Often, sigmoid function refers to the special case of the logistic function shown in the first figure and defined by the formula.


Better, uh? Wait, there is still some noise… let’s add a bilateral filter!

A bilateral filter is an edge-preserving noise reduction filter:

org  bilateral

After bilateral filter, the results did get improved:



But this is still not as good as my canny edge filter:


I’ll write my canny-based GLSL edge detection in ShaderToy in some day…

Low-poly Style Image Generation in GLSL

Edge detection can be further used for low-poly style image generation:


See live demo here:


Wireframes in 3D Mesh

Fwidth can be further used to render wireframes in 3D meshes.

  1. Label each vertices with pure Red, Green and Blue
  2. Use Fwidth to determine the fraction part of the derivatives: