HomeAlgorithms & AIConvolutional Layer Simulation

Convolutional Neural Network Simulator

Interactive CNN simulator: watch a 3x3 kernel slide across a pixel grid computing a convolution in real time, see the resulting feature map build up, and apply max-pooling to shrink it — with filter type, stride and pooling all tunable live.

Algorithms & AI3DModerate60 FPS
convolutional-networks ↗ Open standalone

Convolutional neural networks power modern computer vision by learning to detect features — edges, textures, shapes — through small filters that slide across an image. This simulator makes that process visible: a synthetic pixel grid sits on the left, a 3x3 kernel sweeps across it in real time, and the resulting feature map builds up cell by cell on the right as each convolution is computed. Switch between edge-detection, sharpening, blur and emboss filters to see how the choice of weights changes what the feature map picks out, adjust the stride to see the output shrink, and enable max-pooling to watch the feature map compress into a coarser summary the way a real CNN's pooling layer would.

⚙ Under the hood

Watch a 3x3 convolution kernel slide across a pixel grid in real time, building a feature map cell by cell, then compress it with max-pooling. Switch between edge-detection, sharpen, blur and emboss filters and tune stride live.

Three.jsCNNConvolutionNeural NetworksComputer Vision

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

What did you find?

Add reproduction steps (optional)