Wavelets & the Discrete Wavelet Transform

An interactive primer for the tgpu-htj2k WebGPU codec project — why the DWT sits at the heart of JPEG 2000 / HTJ2K, and why it is so promising for image and volumetric scientific data. The wavelet math below is implemented from scratch in plain JavaScript (5/3 reversible + 9/7 irreversible lifting).
round-trip self-test…

What is a wavelet — and why should a codec care?

The short version: a wavelet transform rewrites a signal as a coarse approximation plus detail at many scales. For natural images the detail is overwhelmingly near zero, so a few coefficients capture most of the picture. That "energy compaction" is exactly what a compressor wants. Expand the sections as you go.

1 · A wavelet, intuitively

The Fourier transform describes a signal with sines that stretch across all of space — great for "what frequencies are present", useless for "where". A wavelet is a little wave: localized in space and in scale. By correlating a signal with shifted, scaled copies of one mother wavelet you learn both what structure exists and where it lives.

The DWT does this with a critically-sampled filter bank: a low-pass filter produces a smoothed, half-size approximation; a high-pass filter produces the detail lost in that smoothing. Apply recursively to the approximation and you get a multi-resolution pyramid.

2 · The lifting scheme (how this code actually computes it)

Rather than convolving with long filters, JPEG 2000 uses lifting: split samples into evens and odds, then alternate predict (estimate odds from evens, keep the residual as detail) and update (adjust evens using the details so they form a clean low-pass). It is in-place, O(N), trivially invertible (run the steps backwards), and for the 5/3 filter it is integer-exact — the basis of lossless coding. Watch it happen in Panel 3.

5/3:  d[k] = odd − ⌊(eL+eR)/2⌋ ;  s[k] = even + ⌊(dL+dR+2)/4⌋
9/7:  predict α → update β → predict γ → update δ → scale (×1/K, ×K)

3 · Why detail is mostly zero → why wavelets compress

Natural images are locally smooth: neighbouring pixels are highly correlated, with abrupt changes only at edges. The high-pass filter responds only to those abrupt changes, so detail coefficients are near-zero almost everywhere and large only along edges. After quantization the flat regions become long runs of zeros that entropy coders crush. Panel 2 lets you delete the smallest coefficients and watch how few you actually need.

4 · Multi-resolution & scale space

Because each level halves resolution, the LL band at level k is a genuine thumbnail of the image. This gives quality/resolution scalability for free: decode the small LL for a preview, then add detail bands to refine. It is also why the same coefficients support progressive transmission, region-of-interest decoding, and the precinct/codeblock structure of JPEG 2000.

5 · The volumetric angle (why this matters for 3D scientific data)

The transform is separable: a 2D DWT is just a 1D DWT along rows, then along columns. Nothing stops you adding a third pass — a 1D wavelet along z, across a stack of image slices. That yields a full 3D DWT producing octants (LLL, LLH, … HHH) instead of quadrants.

Volumetric scientific data — CT/MRI stacks, microscopy z-stacks, seismic cubes, simulation fields — is highly correlated between adjacent slices, not just within them. A z-direction wavelet captures that inter-slice redundancy the same way the in-plane transform captures spatial redundancy, typically giving much better compaction than coding slices independently. It also unlocks 3D multi-resolution: coarse volume previews, ROI decode of a sub-volume, and resolution-scalable streaming of huge datasets. On a GPU the separable passes map naturally to per-axis compute dispatches — which is precisely the direction this tgpu-htj2k project is heading.

1Subband decomposition explorer

The classic Mallat pyramid: the top-left LL is the coarse approximation; the HL / LH / HH bands hold horizontal, vertical and diagonal detail at each level. Detail bands are signed — warm = positive, cool = negative. Click any detail subband to isolate it.

Source · 256×256 grayscale

DWT pyramid · blue guides separate LL / detail at each level — click a quadrant to isolate

2Reconstruction & compression demo

Keep only the largest-magnitude coefficients (drop the rest to zero), inverse-transform, and compare to the original. Drag toward the left and watch how few coefficients reproduce a faithful image — the visceral proof of energy compaction. Uses the kernel/levels chosen above.

PSNR (reconstruction quality)
—
Sparsity
—
Coefficients kept
—
Original
Reconstructed from kept coefficients
Error (blue = small, red = large; auto-scaled)

31D lifting-scheme animator

One decomposition level on a 1D signal, stage by stage: split → predict → update → result. See the detail (high-pass) coefficients collapse toward zero for smooth inputs, and spike at the step edge — that is energy compaction in miniature.

even samples odd samples approximation (low-pass) detail (high-pass)
—
—