Edge Detect - Sobel, Real-Time

WebGPU Edge Detect runs a Sobel edge detector on your GPU directly in the browser tab. Edge detection is a foundational operation in computer vision and image analysis: it converts a photo or micrograph into a map of where intensity changes sharply - the outlines of objects, features, or text. It is a standard preprocessing step for figure preparation in scientific papers, line-art generation for illustration, and feature engineering for downstream ML models. Doing it on the GPU means the threshold and thickness sliders update in real time instead of after a multi-second wait.

The image is uploaded as a WebGPU texture. A WGSL fragment shader samples the 3×3 neighborhood around each pixel, computes the Sobel gradient magnitude, thresholds it, and writes the result back to a render target. The result texture is read back, drawn to a 2D canvas for preview, and encoded as PNG for download. The thickness slider scales the kernel sampling radius; invert flips the output so edges appear as dark ink on white.