compute_bloom

Overview

Bloom is a postprocess that extracts bright regions, blurs them, and adds the result back to the original scene to create glow. This sample is the compute-shader counterpart to samples/bloom, using multiple compute dispatches and storage textures for bright extraction, horizontal/vertical blur, and final compositing.

The current core webg/ComputeBloomPass.js runs as staged bloom. It extracts bright pixels into small / medium / large stages, blurs each stage at a different low resolution and sample step, then adds the three blurred results back to the scene. Small / Medium / Large Threshold controls which brightness enters each stage, and Small / Medium / Large Strength controls how much light that stage sends into blur.

This sample displays only the intermediate views needed to tune the core staged ComputeBloomPass. Pressing V or using the View selector switches between scene / extract / small / medium / large / blur / composite. extract shows the small-stage bright-pass result, small / medium / large show the per-stage blur results, and blur shows the summed bloom contribution before it is added to the scene. Intermediate targets are stored as rgba16float so wide blur values are not quantized to black by an 8-bit storage target. The existing fragment-shader webg/BloomPass.js is unchanged.

How to Run

Open ./compute_bloom.html
Use a browser with WebGPU support, and check the help panel and CommandPalette together with the sample when needed

Checkpoints

In addition to global Strength, Soft Knee, and Exposure, the palette exposes Small / Medium / Large Threshold, Small / Medium / Large Strength, Small / Medium / Large Scale, and Small / Medium / Large Step. Check whether brighter areas can bloom wider with the same blur radius and blur iterations.

Keeping Small / Medium / Large Threshold in the order small <= medium <= large makes the setup easy to read as “brighter pixels spread farther”. Small / Medium / Large Step controls blur tap spacing, so larger values spread the same tap count wider and thinner. Lowering Small / Medium / Large Scale reduces the number of pixels processed by each stage's extraction and blur. Soft Knee controls the transition near thresholds, Exposure controls final brightness, and global Strength controls how much bloom is added.

The large center sphere slowly animates its bloom extraction emission level from 0.60 to 0.95 and back. As the emission level crosses the staged thresholds, the sphere enters different small / medium / large stages, making it easier to check whether stronger light produces a wider bloom radius.

Below the center sphere, the sample also includes fixed white emission probes from 0.50 to 1.00 in 0.05 steps, following the same idea as user/compute_bloom0. If the animated center sphere shows a sudden change around 0.70 to 0.80, the fixed row lets you compare which brightness levels make the small / medium / large contributions visible in the same frame. The previous fixed colored background spheres were removed so the investigation stays focused.

The defaults are smallThreshold=0.60, mediumThreshold=0.75, largeThreshold=0.90, smallStrength=1.00, mediumStrength=1.33, largeStrength=2.00, smallSampleStep=2, mediumSampleStep=3, largeSampleStep=6, softKnee=0.40, strength=0.70, exposure=0.80, blurRadius=7, and blurIterations=2. A production version should also consider sRGB/Linear handling, bandwidth on mobile GPUs, and tone-mapping order together with this staged bloom path.