This tutorial will show you how to create an edge detection shader using a kernel and the GLSL shading language.

In order to complete this tutorial you will need to complete the previous tutorial about creating a simple gaussian blur shader.

Simple gaussian blur shader using a kernel – Agate DRAGON

Step 1: Duplicate

Duplicate the shader code from the simple gaussian blur tutorial. Call the duplicate ‘EdgeDetection’ or anything you like.

Step 2: Kernel

Remove this for loop.

for(int i=0; i<9; ++i)
{
	kernel[i] /= 16f;
}

Then change the kernel values to match the values from the kernel Wikipedia page. You may use either of the below kernels.

Afterwards your kernel values should look like this:

// Top row
kernel[0] = 0f;
kernel[1] = -1f;
kernel[2] = 0f;

// Middle row
kernel[3] = -1f;
kernel[4] = 4f;
kernel[5] = -1f;

// Bottom row
kernel[6] = 0f;
kernel[7] = -1f;
kernel[8] = 0f;

Final result

Congratulations you have created an edge detection shader!

Here are some images using different sample distances.

100

200

300

Thank you for reading this tutorial, I hope you found it useful!

Check out the previous tutorial to learn how to apply a sharpen kernel.