Three.js WebGL Unreal Bloom Pass
This page provides implementation details for Mockrithm's WebGL post-processing unreal bloom effects, which power the dynamic neon outlines and glowing grid transitions on the marketing landing pages.
1. Unreal Bloom Architecture
The landing page features a three-dimensional particles grid that pulses in response to user scroll events. To achieve realistic neon effects without overloading the GPU, we implement an Unreal Bloom Pass via an EffectComposer.
graph LR
Scene[WebGL Scene & Camera] --> Composer[EffectComposer Pipeline]
Composer --> RenderPass[RenderPass: Draw Base Geometry]
RenderPass --> BloomPass[UnrealBloomPass: Calculate Glow]
BloomPass --> Output[Output: Screen Buffer]2. WebGL Code Implementation
Below is the code configuration to initialize and manage the post-processing stack in a Next.js client component:
import * as THREE from 'three';
import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';
import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js';
import { UnrealBloomPass } from 'three/examples/jsm/postprocessing/UnrealBloomPass.js';
export function initializeGlowPipeline(
container: HTMLDivElement,
scene: THREE.Scene,
camera: THREE.PerspectiveCamera,
renderer: THREE.WebGLRenderer
) {
// 1. Initialize Composer
const composer = new EffectComposer(renderer);
// 2. Add Base Render Pass
const renderPass = new RenderPass(scene, camera);
composer.addPass(renderPass);
// 3. Define Bloom Parameters
const resolution = new THREE.Vector2(window.innerWidth, window.innerHeight);
const strength = 1.5; // Intensity of the glow
const radius = 0.4; // Dispersion radius
const threshold = 0.85; // Luminosity floor to trigger glow
// 4. Instantiate and Append Bloom Pass
const bloomPass = new UnrealBloomPass(resolution, strength, radius, threshold);
composer.addPass(bloomPass);
return {
composer,
updateBloomThreshold: (val: number) => { bloomPass.threshold = val; },
updateBloomStrength: (val: number) => { bloomPass.strength = val; }
};
}3. Bloom Configurations Configuration
Performance Target
We target a consistent 60 FPS on mid-range mobile devices by dynamically adjusting resolution mapping when canvas pixel density exceeds 2.0.
Adjust the bloom properties using the parameters below:
| Parameter Key | Recommended Value | Range | Impact on Scene |
|---|---|---|---|
strength | 1.2 | 0.0 - 3.0 | Controls the brightness of the glowing outline. |
radius | 0.5 | 0.0 - 1.0 | Controls the spread distance of the glow dispersion. |
threshold | 0.85 | 0.0 - 1.0 | Determines the minimum luminosity required to glow. |