What does the Blur sigma slider actually change?

It sets the standard deviation of the Gaussian kernel. A larger sigma spreads the weighting over a wider radius (the kernel size is computed as roughly 2 sigma on each side), producing stronger, smoother blur. A smaller sigma keeps the kernel tight, so only immediate neighbours influence each pixel.

Home▸Computational Photography▸Image Filters

📸 Image Filters

Apply real image processing filters using convolution and Fourier analysis. See how Gaussian blur, Sobel edge detection, sharpening, and emboss work mathematically on pixel values.

Computational Photography3DEasy60 FPS

About this simulation

This tool performs genuine 2D convolution on real pixel data, applying a small weighting matrix — the kernel — to every pixel and its neighbours. Each output pixel is the weighted sum of the surrounding region, which is how Gaussian blur, Sobel edge detection, sharpening, emboss and high-pass filters all work. A separate median filter ranks neighbouring values instead, and live histograms plus a PSNR readout let you measure how each operation alters the image.

🔬 What it shows

The maths behind spatial image filtering. Gaussian blur uses a normalised kernel built from exp(-(x²+y²)/2σ²); Sobel combines horizontal and vertical 3×3 gradient kernels and takes their magnitude; sharpen, emboss and high-pass use fixed 3×3 kernels; median is a rank filter. PSNR (in dB) quantifies the difference from the original.

🎮 How to use

Pick a synthetic test image (Portrait, Landscape, Circuit Board or Checker), then choose a filter. The “Blur σ / Strength” slider sets the Gaussian standard deviation, and the “Threshold” slider controls the Sobel edge cut-off. The live kernel grid, processing time, PSNR and dual histograms update with every change.

💡 Did you know?

A 2D Gaussian blur is separable: applying a 1D kernel horizontally then vertically gives the same result far more cheaply than the full 2D convolution shown here. This separability is why Gaussian blur is one of the fastest smoothing operations in real image pipelines.

Frequently asked questions

What is a convolution kernel?

A kernel is a small grid of numbers, usually 3×3, that defines how each pixel is combined with its neighbours. The filter slides the kernel over the image, multiplies each kernel weight by the pixel beneath it, and sums the results to produce one output pixel. Different weight patterns create blurring, sharpening, edge detection and other effects.

How does Sobel edge detection work here?

The Sobel filter runs two 3×3 kernels, one detecting horizontal intensity changes (Gx) and one vertical (Gy). The gradient magnitude is sqrt(Gx² + Gy²), and any pixel whose magnitude exceeds the Threshold slider is drawn white, the rest black. Raising the threshold keeps only the strongest edges.

What does the Blur σ slider actually change?

It sets the standard deviation of the Gaussian kernel. A larger σ spreads the weighting over a wider radius (the kernel size is computed as roughly 2σ on each side), producing stronger, smoother blur. A smaller σ keeps the kernel tight, so only immediate neighbours influence each pixel.

Why is the median filter different from the others?

Convolution filters compute a weighted average, which can smear sharp features. The median filter instead collects the neighbouring pixel values, sorts them, and picks the middle one. Because it is a rank operation rather than an average, it removes salt-and-pepper noise while preserving edges much better than Gaussian blur.

Are these filters physically accurate?

Yes. The kernels and the convolution loop are the same operations used in real image-processing libraries, run pixel by pixel on a 200×160 image with edge clamping at the borders. The PSNR figure (peak signal-to-noise ratio in decibels) is the standard metric for comparing a processed image with the original, so the numbers shown reflect genuine results.

Frequently Asked Questions

What is convolution in the context of image filtering?

Convolution multiplies corresponding elements of the kernel and the image patch it covers, sums them, and assigns the result to the central pixel. Sliding this operation over every pixel transforms the entire image. It is commutative and associative, so chaining multiple filters is equivalent to convolving with the combined kernel.

What is the difference between a Gaussian blur and a box blur?

A box blur averages all pixels equally within a rectangular region, which can produce ringing artefacts (visible in the frequency domain as oscillations). A Gaussian blur weights pixels by a bell-curve falloff, so nearby pixels contribute more than distant ones. Gaussian blur produces smoother results and is separable (applied as 1D row then column), making it computationally efficient.

How does the Canny edge detector work?

Canny edge detection has four steps: Gaussian blur to reduce noise, gradient computation to find edge strength and direction, non-maximum suppression to thin edges to single-pixel width, and double thresholding with hysteresis to keep strong edges and connected weak edges while discarding isolated noise.

What is the bilateral filter and when should it be used?

The bilateral filter is an edge-preserving smoothing filter that computes each output pixel as a weighted average of its neighbours, where the weights depend on both spatial distance and intensity similarity. Pixels with very different intensities (across an edge) receive low weight, so the filter smooths within uniform regions without blurring edges. It is useful for noise reduction in photographic and medical images.

How do unsharp masking and sharpening kernels enhance detail?

Unsharp masking subtracts a blurred version of the image from the original, amplifying the difference (fine detail), then adds this back. A sharpening kernel achieves the same in one convolution step with a kernel that has a strong positive centre and negative surround. Both boost high-frequency components, making edges crisper but also amplifying noise.

⚙ Under the hood

Image processing with convolution, Sobel edge detection, Gaussian blur and FFT filtering.

image processingconvolutionSobelGaussian blurFFT

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