System·three·v1.0.0·MIT

Bloom Postprocessing

EffectComposer-based bloom pass for Three.js. Adds glow to bright pixels — perfect for neon, lasers, and cinematic looks.

#three#postprocessing#bloom#effects

Install

npx gamecn add bloom-postprocessing

Usage

ts
import { setupBloom } from '@/systems/BloomPostprocessing';
const composer = setupBloom(renderer, scene, camera, { strength: 0.8 });
// Replace your render loop with:
composer.render();

Source preview

Compatibility

Engines
three >=0.160.0
Frameworksvanilla
Languagestypescript
Bundlersvite

Files installed

  • {systems}/BloomPostprocessing.ts
  • docs/gamecn/bloom-postprocessing.md(docs)

Dependencies

npm

three@>=0.160.0

Notes

Usage

Replace your direct renderer.render(scene, camera) calls with composer.render():

import { setupBloom, autoResizeComposer } from "@/systems/BloomPostprocessing";

const composer = setupBloom(renderer, scene, camera, {
  strength: 0.8,
  radius: 0.4,
  threshold: 0.7,
});
const detachResize = autoResizeComposer(composer, renderer);

function animate(): void {
  requestAnimationFrame(animate);
  composer.render();
}
animate();

// On teardown:
detachResize();
composer.dispose();

If you're using @main/orbit-scene, swap the loop:

const composer = setupBloom(orbit.renderer, orbit.scene, orbit.camera);
orbit.stop(); // disable the built-in render loop
orbit.onUpdate(() => composer.render());
orbit.start();

Options

Option Default Description
strength 0.6 Intensity of the bloom.
radius 0.4 Spread radius.
threshold 0.85 Luminance cutoff (lower = more pixels bloom).

Tips

  • Make materials very bright (color.multiplyScalar(2) or high-emissive textures) to see strong bloom; the threshold is calibrated against 1.0.
  • Bloom is GPU-expensive at high pixel ratios on mobile. Lower the ratio or reduce radius if you're on a phone.

Related