Home▸Algorithms & AI▸Sobel, Laplacian and Canny: Edge Detection Lab

🧭 Sobel, Laplacian and Canny: Edge Detection Lab

A 3D pixel-height grid where a sliding 3x3 kernel computes Sobel, Laplacian or Canny edge response in real time, letting you compare how each operator turns intensity gradients into boundaries.

Algorithms & AI3DAdvanced60 FPS

A synthetic test image is rendered as a 3D pixel-height grid on the left; a sliding 3×3 kernel window scans it exactly as a real convolution pass would, and the resulting edge response — Sobel, Laplacian or full Canny — builds up as a second height grid on the right.

🔬 What It Demonstrates

How gradient kernels turn local intensity differences into an edge signal, and why Canny's non-maximum suppression and hysteresis thresholding produce thinner, cleaner boundaries than a raw gradient-magnitude cutoff.

🎮 How to Use

Pick a test pattern and an operator, then drag the threshold slider to see edges appear and disappear. Add noise to see which operator degrades first, and slow or speed up the kernel sweep to follow the convolution step by step.

💡 Did You Know?

The Sobel operator dates to 1968, the Laplacian-of-Gaussian approach to the 1980s, and Canny's multi-stage detector to 1986 — yet all three are still shipped in every major computer-vision library today.

⚙ Under the hood

A 3D pixel-height grid where a sliding 3x3 kernel computes Sobel, Laplacian or Canny edge response in real time, letting you compare how each operator turns intensity gradients into boundaries.

Edge DetectionImage ProcessingConvolutional KernelsComputer VisionGradient AnalysisSignal ProcessingThree.js

3D · Three.js / WebGL renderer · 60 FPS target · runs fully client-side, no install