BLOOM GLOW
THREE.JS GUIDE

Add cinematic Unreal-style bloom to any Three.js scene with EffectComposer and UnrealBloomPass.

By Shane Brumback · Indie Forge Studio · September 20, 2026

Bloom Glow Three.js tutorial — glowing torus knot

LIVE DEMO

The glowing torus knot behind this page is the live demo. Drag the sliders below to change the bloom in real time — the knot behind the page updates instantly.

TRY IT: BLOOM CONTROLS

0.35
0.40
0.20

Tip: lower the threshold toward 0 to make more of the scene glow, then raise strength for a full cinematic bloom. These are the exact three values passed to UnrealBloomPass.

Frequently Asked Questions

How do I add a bloom glow effect in Three.js?

Use three/addons/postprocessing. Create an EffectComposer, add a RenderPass, then add UnrealBloomPass. Call composer.render() instead of renderer.render() every frame. Bloom glows any pixel brighter than the threshold.

What is UnrealBloomPass in Three.js?

UnrealBloomPass is a Three.js post-processing pass inspired by Unreal Engine bloom. It extracts bright areas, blurs them at multiple scales, and composites the result back onto the scene for a cinematic glow.

Why is my Three.js bloom not showing?

The most common causes are still calling renderer.render() instead of composer.render(), a threshold that is too high, materials without emissive color, or a bright background that hides the glow.

Does bloom work on mobile in Three.js?

Yes, but it is GPU-heavy. Lower the bloom resolution, reduce strength, and skip bloom on low-end devices.

What is bloom in Three.js?

Bloom is a post-processing glow. Instead of drawing a halo on the mesh itself, Three.js renders the scene, picks out pixels above a luminance threshold, blurs those bright spots, and layers the blur back on top. UnrealBloomPass is the built-in pass that does this. A dark background plus a bright emissive material is what makes the glow read.

Step 1: Create Scene

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true });

Step 2: Add an emissive mesh

const geometry = new THREE.TorusKnotGeometry(2, 0.6, 150, 32);
const material = new THREE.MeshStandardMaterial({
  color: 0x2ad1d6,
  emissive: 0x0e5f63,
  metalness: 0.7,
  roughness: 0.25
});
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

Step 3: Wire EffectComposer

This is the part that usually breaks: you must stop using renderer.render.

const composer = new EffectComposer(renderer);
composer.addPass(new RenderPass(scene, camera));
composer.addPass(new UnrealBloomPass(
  new THREE.Vector2(innerWidth, innerHeight),
  0.48,  // strength
  0.22,  // radius
  0.32   // threshold
));
composer.addPass(new OutputPass());

Step 4: Animate with composer.render

function animate() {
  requestAnimationFrame(animate);
  mesh.rotation.x += 0.01;
  mesh.rotation.y += 0.01;
  composer.render();
}
animate();

Full Working Code (Copy & Paste)

bloom-glow-threejs.html 



  
  Three.js Bloom Glow Demo
PLAY MORE 3D GAMES

More 3D Projects