Graphics & WebGPU
Explore graphics algorithms as a connected pipeline instead of a flat catalog. Follow filters, masks, morphology, and WebGPU demos from one topic to the next.
Topics
33
Algorithms, operators, and GPU-friendly image-processing building blocks.
Families
10
Move from continuous filtering into masks, edges, and morphology without losing the thread.
Interactive demos
32
The atlas pairs the write-up with interactive browser-side playgrounds where a live visual makes the topic click faster.
Learning paths
6
Follow a path when you want a pipeline instead of isolated tricks.
Search by algorithm, pipeline role, or tag. Families and paths keep the image-processing story connected instead of flattening it into isolated shader tricks.
Browse by family
Topic type
Tags
Focus on a path to move through a usable pipeline instead of hopping around at random.
Move from raw pixels through noise reduction, edge emphasis, and multi-stage edge pipelines.
Build a binary mask, explore connectivity, then repair or simplify it with morphology-aware tools.
Learn how image data is resampled, reconstructed, and stabilized across magnification and minification.
Track how values move from color spaces and gamma into dynamic-range compression, equalization, dithering, and compositing.
Follow the classic rendering path from clipping and rasterization into visibility, shadows, occlusion, and temporal cleanup.
Bridge parametric geometry with implicit surfaces and ray-marched rendering ideas.
33 topics match the current filters.
Pixels, neighborhoods, masks, and the mental model behind local image-processing operators.
1 topic
Neighborhood sampling, blur kernels, and other continuous-image transforms.
3 topics
Smooth an image with a weighted local average so noise shrinks before thresholding, edge detection, or later analysis.
Filtering & convolution is a special case of Foundations.
Builds on
Image Processing Fundamentals
Unlocks
Bilateral Filter, Thresholding, Laplacian and Laplacian of Gaussian +3 more
Replace each pixel by the median of its neighborhood so salt-and-pepper noise disappears without averaging everything into mush.
Filtering & convolution is a special case of Foundations.
Builds on
Image Processing Fundamentals
Unlocks
Thresholding, Canny Edge Detection
Smooth an image while refusing to average across strong intensity jumps, making it a classic edge-aware denoiser.
Filtering & convolution is a special case of Foundations.
Builds on
Image Processing Fundamentals, Gaussian Blur
Unlocks
Thresholding, Canny Edge Detection
Turn raw pixels into masks, boundaries, and simpler structural signals.
7 topics
Grow one connected region from a seed pixel, making it the canonical seeded region-growing primitive.
Segmentation & edges is a special case of Foundations.
Builds on
Image Processing Fundamentals, Thresholding
Unlocks
Connected-Components Labeling
Convert a grayscale image into a binary mask by splitting values into foreground and background.
Segmentation & edges is a special case of Foundations.
Builds on
Image Processing Fundamentals
Unlocks
Flood Fill, Connected-Components Labeling, Canny Edge Detection +4 more
Turn a binary mask into object IDs so you can count, measure, filter, and track separate regions instead of raw foreground pixels.
Segmentation & edges is a special case of Foundations.
Builds on
Flood Fill, Thresholding
Unlocks
Distance Transform, Skeletonization
Use second-derivative style filters to emphasize rapid intensity change and zero crossings, often after smoothing first.
Segmentation & edges is a special case of Foundations.
Builds on
Image Processing Fundamentals, Gaussian Blur
Unlocks
Canny Edge Detection
Estimate local intensity gradients so boundaries become visible as bright responses.
Segmentation & edges is a special case of Foundations.
Builds on
Image Processing Fundamentals, Gaussian Blur
Unlocks
Thresholding, Canny Edge Detection
Build a cleaner final edge map by chaining smoothing, gradients, non-maximum suppression, and hysteresis thresholding.
Segmentation & edges is a special case of Foundations.
Builds on
Gaussian Blur, Thresholding, Sobel Edge Detection
Unlocks
Connected-Components Labeling
For every foreground pixel, compute how far it sits from the background or boundary so the mask gains geometric thickness information.
Segmentation & edges is a special case of Foundations.
Builds on
Thresholding, Connected-Components Labeling
Unlocks
Skeletonization
Binary-mask operators such as dilation, erosion, opening, and closing.
4 topics
Grow foreground regions in a binary mask so gaps close and thin structures get thicker.
Morphology is a special case of Segmentation & edges.
Builds on
Image Processing Fundamentals, Thresholding
Unlocks
Opening and Closing
Shrink foreground regions in a binary mask so thin noise and small protrusions disappear.
Morphology is a special case of Segmentation & edges.
Builds on
Image Processing Fundamentals, Thresholding
Unlocks
Opening and Closing, Skeletonization
Compose erosion and dilation to remove bright specks or fill small holes without manually editing the mask.
Morphology is a special case of Segmentation & edges.
Builds on
Image Processing Fundamentals, Thresholding, Dilation +1 more
Reduce a thick binary shape to a thin centerline while trying to preserve its topology.
Morphology is a special case of Segmentation & edges.
Builds on
Connected-Components Labeling, Distance Transform, Erosion
Resampling images, choosing mip levels, and reconstructing signals across scales.
2 topics
Reconstruct values between samples when resizing or sampling images, with different trade-offs between cost and smoothness.
Builds on
Image Processing Fundamentals
Unlocks
Mipmaps
Precompute lower-resolution versions of a texture so minified sampling becomes far less aliased and unstable.
Builds on
Bilinear and Bicubic Interpolation
Unlocks
Temporal Anti-Aliasing (TAA)
Color spaces, gamma, tone mapping, compositing, and distribution-aware image remapping.
6 topics
Combine foreground and background layers with transparency so multiple images or passes can share the same final frame.
Builds on
Color Spaces, Gamma Correction
Unlocks
Bloom
Choose the right representation for the job, because RGB, HSV, linear light, and display-encoded values make different operations easy or safe.
Builds on
Image Processing Fundamentals
Unlocks
Alpha Compositing, Gamma Correction, Histogram Equalization +1 more
Trade spatial noise for perceived smoothness when the output format cannot represent all the shades you want directly.
Builds on
Gamma Correction, Tone Mapping
Match linear-light math to display-encoded output so blends, shading, and gradients do not look mysteriously wrong.
Builds on
Color Spaces
Unlocks
Alpha Compositing, Dithering, Tone Mapping
Redistribute grayscale values so a low-contrast image uses more of the available intensity range.
Builds on
Image Processing Fundamentals, Color Spaces
Unlocks
Thresholding, Dithering
Compress HDR-style scene values into a range a normal display can actually show while keeping highlights under control.
Builds on
Color Spaces, Gamma Correction
Unlocks
Dithering, Bloom
Clip shapes, interpolate across primitives, and reason about parametric geometry.
2 topics
Describe smooth parametric curves with control points so paths and shapes can be edited intuitively.
Builds on
Image Processing Fundamentals
Trim geometry to the visible region so later stages only process the portion that can actually contribute to the frame.
Builds on
Image Processing Fundamentals
Unlocks
Rasterization
Rasterization, visibility, and alternate image synthesis strategies such as ray marching.
4 topics
Turn geometric primitives such as triangles into covered screen pixels so the rendering pipeline can shade actual fragments.
Builds on
Clipping
Unlocks
Barycentric Interpolation, Z-Buffer, Shadow Mapping
Blend per-vertex attributes across a triangle so every covered fragment gets a sensible color, depth, or texture coordinate.
Builds on
Rasterization
Unlocks
Z-Buffer, Shadow Mapping
Resolve which fragment is actually visible at each pixel by keeping only the smallest depth seen so far.
Builds on
Rasterization, Barycentric Interpolation
Unlocks
Screen-Space Ambient Occlusion (SSAO), Shadow Mapping, Temporal Anti-Aliasing (TAA)
Render implicit shapes by stepping along a ray according to the nearest safe distance reported by an SDF.
Builds on
Image Processing Fundamentals
Shadowing, occlusion, and how scene depth influences shading decisions.
2 topics
Approximate local ambient shadowing from the depth and normal buffers so creases and contact areas feel less flat.
Lighting & visibility is a special case of Rendering pipeline.
Builds on
Z-Buffer, Shadow Mapping
Unlocks
Temporal Anti-Aliasing (TAA)
Use a depth map from the light’s point of view to decide whether a visible surface point is blocked from that light.
Lighting & visibility is a special case of Rendering pipeline.
Builds on
Rasterization, Barycentric Interpolation, Z-Buffer
Unlocks
Screen-Space Ambient Occlusion (SSAO), Bloom
Full-frame effects such as bloom and temporal anti-aliasing layered after base rendering.
2 topics
Make bright highlights glow by extracting them, blurring them, and compositing the result back onto the base frame.
Post-processing is a special case of Rendering pipeline.
Builds on
Gaussian Blur, Alpha Compositing, Tone Mapping
Unlocks
Temporal Anti-Aliasing (TAA)
Accumulate information across frames so shimmering and unstable subpixel detail become calmer over time.
Post-processing is a special case of Rendering pipeline.
Builds on
Mipmaps, Z-Buffer, Bloom