Home▸AI & Machine Learning▸How Convolution Lets a Neural Network See

🧩 How Convolution Lets a Neural Network See

A sliding 3x3 kernel scans a pixel-height image grid in real time, computing a dot product at every position to build up a feature map — the core operation inside every convolutional layer.

AI & Machine Learning3DAdvanced60 FPS

A 3×3 kernel slides across a pixel-height image grid, computing a dot product at every stop to build a feature map cell by cell — the sliding-window mechanism that powers every convolutional layer in a CNN.

🔬 What It Demonstrates

The left grid renders an image as a height field; the orange window is the kernel scanning it. Each scan step multiplies the nine kernel weights against the nine pixels beneath it, sums them, and writes the result into the matching cell of the feature map on the right.

🎮 How to Use

Pick a kernel (edge detector, sharpen, blur, emboss) and an input pattern, then watch the feature map fill in live. Adjust scan speed and relief height, or pause and restart the sweep at any time.

💡 Did You Know?

A single trained CNN layer typically runs dozens of different kernels over the same image in parallel, each producing its own feature map — stacked together they let deeper layers combine simple edges into complex shapes.

⚙ Under the hood

A sliding 3x3 kernel scans a pixel-height image grid in real time, computing a dot product at every position to build up a feature map — the core operation inside every convolutional layer.

neural networksconvolutiondeep learningartificial intelligencemachine learningimage processingThree.js

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