Edge Detect — Sobel, Real-Time
Sobel edge detection in your browser, GPU-accelerated via WebGPU. Real-time preview, threshold and thickness controls, PNG export.
runs locally — nothing leaves your browser
What is 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.
When to use this
- →Preparing figures for a paper where you want a clean edge map of a photograph or scan
- →Extracting line art from a photo for illustration or stylization
- →Inspecting micrographs or astrophotos for feature boundaries
- →Building a quick preprocessing step for downstream image analysis without installing Python
How it works
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.
Example use cases
Paper figures
Generate clean edge-map insets for figures showing object boundaries or feature locations.
Line-art conversion
Convert a photo to black-on-white line art for illustration or printing.
Quick preprocessing
Spot-check edge content of an image before feeding it to a downstream model or pipeline.
Edge Detect — Sobel, Real-Time
Interactive ToolHow to use
- 1
Pick an image
Drop a JPG, PNG, or WebP into the picker.
- 2
Tune threshold and thickness
Slide threshold to control sensitivity; thickness for stroke weight.
- 3
Download the PNG
Save the result, with or without inverted ink-on-paper styling.
Why use this tool?
- Sobel kernel runs on the GPU via a WGSL fragment shader — interactive even on large images
- Threshold and edge thickness adjust live without re-uploading
- Optional invert mode produces clean black-ink-on-white line art
- Works on any image the browser can decode; nothing is uploaded
Frequently asked questions
- Why WebGPU and not Canvas?
- Canvas-based edge detection works one pixel per JavaScript loop iteration. WebGPU runs all pixels in parallel on your GPU, so sliders are live instead of laggy on large images.
- Which browsers work?
- Chrome, Edge, and Firefox on Windows/Mac/Linux, plus Safari 26+. If WebGPU isn't available the tool shows a clear fallback message.
- Does the image leave my device?
- No. Decoding, GPU processing, and PNG encoding all run in your browser tab.
- What kind of edge detector is this?
- Classic 3×3 Sobel with magnitude thresholding. It is fast and predictable; for noise-robust edges consider a Canny-style pipeline, which we may add later.
Related tools
Real-time exposure, contrast, saturation, warmth, blur, sharpen, vignette, and grain. GPU-accelerated via WebGPU; nothing uploads.
Per-channel RGB and luminance histograms computed on the GPU. Adjust black point, white point, and gamma with live preview.
Apply an anime painting style to your photos using AnimeGANv2. Works best on portraits with clear subjects. Runs entirely in your browser — nothing is uploaded.
Popular right now
Format, validate, and minify JSON instantly in your browser. Your data never leaves your device.
Decode JWT tokens and inspect header and payload instantly in your browser. Your tokens never leave your device.
Count words, characters, sentences, and estimate reading time instantly in your browser. No sign-up required.