Bloom

A soft glow that spills out of the brightest parts of a 3D render, making neon, fire, and hot highlights feel brighter than the screen can show.

make the neon actually glowbright lights bleeding into the picturethe video game glow effectwhy does my glowing material still look flatsoft halo around bright thingsthat dreamy glow around lights in animeeverything looks hazy and overexposedblooom effect

See it

Live demo coming soon

What it is

Bloom is a post-processing effect that finds the brightest parts of the render, blurs them at several sizes, and adds the blur back over the sharp image. The spill makes a hot pixel look brighter than the screen can physically display, which is why neon, fire, and emissive materials start to read as light sources instead of flat colors.

Reach for it after the scene lighting and before the final display output. Three.js ships UnrealBloomPass for this exact job in its addons bundle rather than the core module; the name is a nod to the Unreal Engine bloom it was modeled on. In an HDR render, give intended sources values above the bloom threshold so ordinary white objects stay crisp while emissive signs and highlights grow a halo.

Gotcha: bloom is not illumination. It can put a halo around a bulb, but it will not cast that bulb's light onto a nearby wall, so add a real light or baked lighting for the spill on geometry. A threshold that is too low turns every pale surface into fog, the milky wash that mid-2000s HDR games such as The Elder Scrolls IV: Oblivion are still teased for, and wide full-resolution blurs cost fill rate. Keep the threshold selective and render the bloom buffers below full resolution when performance is tight.

Ask AI for it

Add bloom to this three.js scene with EffectComposer, RenderPass, UnrealBloomPass, and OutputPass, all imported from three/addons/postprocessing/. Construct UnrealBloomPass with the viewport resolution, strength 0.8, radius 0.35, and threshold 1.0. Give only the intended MeshStandardMaterial light sources emissiveIntensity values above 1.0, keep ordinary white materials below the threshold, and add a PointLight where nearby geometry must actually be lit. Clamp the composer pixel ratio to 2, update its size on resize, and keep text and HUD layers outside the composer.

You might have meant

post processing render passtone mappingmaterialrender target framebuffer objectoverdraw

Go deeper