bloom

Multi-level bloom post-processing. Extracts bright regions, builds a mipmap pyramid with Jimenez 13-tap downsampling, applies separable Gaussian blur at each level, upsamples with tent filtering, and composites the result back onto the original image.

Quick Start

import { createBloom } from './gpu-modules/bloom/bloom';

const bloom = createBloom(device, { format: 'rgba8unorm', levels: 5 });

// Each frame — input and output are GPUTextures
bloom.render(sceneTexture, outputTexture, {
  threshold: 0.8,
  strength: 1.0,
  radius: 0.5,
  softKnee: 0.5
});

bloom.destroy();

API

createBloom(device, options?)

• device — GPUDevice
• options.format — Texture format. Default 'rgba8unorm'.
• options.levels — Number of mip levels in the bloom pyramid. Default 5.

Returns { render, destroy }.

render(input, output, params?)

Applies bloom from input texture to output texture. Both must have TEXTURE_BINDING usage; output must also have RENDER_ATTACHMENT.

• params.threshold — Brightness threshold for bloom extraction. Default 0.8.
• params.strength — Bloom intensity multiplier. Default 1.0.
• params.radius — Blur radius scale. Default 0.5.
• params.softKnee — Soft threshold transition width. Default 0.5.

How It Works

1. Threshold — Extract pixels brighter than threshold (soft-knee smoothstep).
2. Downsample — Build a mip chain using Jimenez 13-tap filter (avoids aliasing artifacts).
3. Blur — Apply 9-tap separable Gaussian blur (horizontal + vertical) at each mip level.
4. Upsample — Walk back up the chain with a 9-tap tent filter, additively combining levels.
5. Composite — Add the bloom result to the original image, scaled by strength.

How to Modify

• Change quality vs performance: Reduce levels for fewer blur passes (faster, less spread). Increase for wider, smoother bloom.
• HDR pipeline: Change format to 'rgba16float' for HDR bloom. The threshold and composite math already works with HDR values.
• Custom threshold: Edit fs_threshold in the WGSL to use a different extraction method (e.g., per-channel threshold, color-based selection).
• Anamorphic bloom: Set the blur direction to only blur horizontally (edit the direction uniforms) for a cinematic streak effect.