Image Histogram & Levels

WebGPU Image Histogram & Levels gives researchers and photographers a fast, browser-native way to inspect tonal distribution and adjust black point, white point, and gamma. The histogram is computed with a WebGPU compute shader using atomic counters — fast even on full-resolution images. The levels controls re-apply with each slider drag, so you can see exactly how a tonal stretch affects the distribution before exporting.

A WebGPU compute shader runs one workgroup per 8×8 tile of the input texture, sampling each pixel and atomically incrementing four 256-bin counters: R, G, B, and luminance. The result buffer is mapped back to JavaScript, rendered into an SVG-style filled curve on a 2D canvas. The levels fragment shader applies (v − black) / (white − black), gamma-corrects with pow(·, 1/gamma), and clamps; a channel selector decides whether the curve runs on all three channels or just one.