Home▸Algorithms & AI▸How Convolution Kernels Transform Images

🧮 How Convolution Kernels Transform Images

A 3D visualization of 2D convolution: watch a kernel slide across an extruded pixel grid and build an output feature map cell by cell, live, for blur, sharpen, edge-detect and emboss filters.

Algorithms & AI3DAdvanced60 FPS

Watch a 3×3 kernel sweep across an extruded 3D pixel grid in real time, computing one dot product per cell and building an output feature map beside it — the same operation that powers blur tools, edge detectors, and every convolutional neural network layer.

🔬 What It Demonstrates

At every position the kernel's nine weights multiply the nine pixels beneath it and sum into a single output value, revealing exactly how blur, sharpen, edge-detect, and emboss kernels each transform the same source image differently.

🎮 How to Use

Pick a kernel and a source image, then watch the scan fill in the output grid live. Adjust scan speed and height scale, or pause and restart to inspect any single step.

💡 Did You Know?

A CNN doesn't use hand-picked kernels like these — it learns thousands of them per layer via backpropagation, discovering weight patterns no human engineer would have designed by hand.

⚙ Under the hood

A 3D visualization of 2D convolution: watch a kernel slide across an extruded pixel grid and build an output feature map cell by cell, live, for blur, sharpen, edge-detect and emboss filters.

convolutionimage processingneural networksdeep learningcomputer visionfilteringThree.js

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