Enhancing Bloom Effect in WebGL: Implementation, Optimization, and Performance Comparison

1. Why Improve Bloom Effect

Glowing objects attract more attention; in visualization they are used to mark important objects, locate key areas, and define important ranges. Bloom is a crucial component of a scene and significantly impacts overall visual quality.

Therefore, our WebGL product has iterated the bloom effect many times to achieve better visual results, higher performance, and finer control.

2. General Bloom Implementation Scheme

The typical bloom pipeline consists of:

(1) Obtain the original texture (the pre‑bloom render target output from the rendering pipeline).

(2) Pre‑process the original texture to extract the "parts to be bloomed".

(3) Apply a blur to the pre‑processed texture.

(4) Fuse the results of steps (1) and (3) together.

The above describes a generic bloom implementation flow.

For extracting the bloom‑eligible parts, most solutions use HDR or a similar color scheme with a threshold; only pixels brighter than the threshold become bloom elements.

3. Factors Affecting Bloom Quality

The bloom radius must affect enough neighboring pixels (i.e., the diffusion of the effect).

There should be a clear contrast between non‑bloom and bloom areas.

Increasing the bloom radius enlarges the blur kernel, but it also brings two drawbacks: higher performance cost and reduced contrast because the blur averages the bright center.

4. Crystal WebGL Engine Optimizations for Bloom

To enlarge the halo while keeping performance, the engine queries a larger texel area and performs weighted averaging.

Simply expanding the filter box on the original texture would increase sampling cost.

By borrowing mipmap techniques, the engine uses two render targets (one for normal elements, one for bloom elements), downsamples the bloom texture to higher‑level mipmaps, and applies a larger filter box on those lower‑resolution textures, reducing the number of samples while achieving a wider halo.

Mipmap technology stores multiple resolutions of a texture so that the appropriate level can be used based on viewing distance.

An example with a 4 × 4 texture illustrates the concept.

5. Efficiency Comparison Between Old and New Bloom Schemes

Assuming an original texture of 128 × 128:

Traditional Scheme

With a filter size of 5, the sample count is 128² × 5² = 409,600, which grows quickly with texture size.

Down‑sample Scheme

The texture is first down‑sampled to 64 × 64. With the same filter size, the sample count becomes 64² × 5² = 102,400, a four‑fold reduction. Even with a larger filter size of 7, the count (64² × 7² = 200,704) remains lower than the traditional 5‑size case.

6. Adding Bloom Layering in Crystal WebGL Engine

(1) To create layered bloom, the engine follows the UE approach and downsamples the texture five times.

(2) Each down‑sampled level is blurred separately in the X and Y directions.

(3) All blurred levels are merged.

(4) The merged result is blended with the original image to produce the final output.

Illustrative images show the visual difference between the old and new approaches.

7. Visual Comparison of Old vs. New Bloom Effects

Side‑by‑side screenshots demonstrate the improved halo size, contrast, and performance of the optimized bloom implementation.