Skip to content

DCtheTall/webgl-edge-detection

Repository files navigation

Edge detection photo

webgl-edge-detection

Edge detection in images and video with WebGL using Canny edge detection.

Live demo

Algorithm

This program uses Canny edge detection on images and video in real time. The algorithm is broken into the following steps:

  1. Apply a 5-pixel Gaussian blur to the image. This program uses the open source library glsl-fast-gaussian-blur.

  2. Calculate the texture intensity gradient using a 3x3 Sobel operator.

  3. Round the gradient to 1 of the 8 cardinal directions. This is done by seeing which direction has the highest dot product with the gradient vector.

  4. Suppress any gradient that is not a local maximum in the direction the vector points.

  5. Apply a double threshold to the gradient vector to classify each pixel as not an edge, a weak edge, or a strong edge.

  6. Apply hysteresis to the existing weak edges. If a weak edge does not neighbor a strong edge, then it is likely due to noise, so we consider it to not be an edge. If a weak edge does neighbor a strong edge, then consider it a strong edge as well.

About

Edge detection in images and video with WebGL using Canny edge detection

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published