postfx-bloom_skill

Overview

This skill provides bloom and glow post-processing built on Three.js UnrealBloomPass via React Three Fiber. It makes luminance-based glow, selective bloom, and animated or audio-reactive intensity straightforward to add. Use it to achieve neon, cyberpunk, magical, or ethereal lighting quickly in React-based 3D scenes.

How this skill works

The effect extracts pixels above a luminance threshold, blurs them across multiple mip levels, then composites the blurred result back onto the scene. Parameters control threshold, smoothing, intensity, radius, levels and kernel size. Selective bloom workflows use selection refs or Selection/Select wrappers so only chosen meshes contribute to the glow.

When to use it

• Add scene-wide bloom for atmospheric glow and HDR-looking highlights
• Apply selective bloom to specific objects (neon signs, energy cores, spells)
• Create animated or audio-reactive lighting that pulses or responds to sound
• Design cyberpunk, sci-fi, or fantasy visuals with emissive materials
• Optimize mobile or low-GPU experiences with reduced levels and mipmap blur

Best practices

• Use emissive materials with toneMapped={false} and sufficient emissiveIntensity to ensure bloom visibility
• Start with luminanceThreshold to isolate glow; lower it for broader bloom, raise it to prevent bleeding
• Enable mipmapBlur and reduce levels on weaker GPUs to save performance
• Combine SelectiveBloom or Selection/Select for fine-grained control rather than masking via threshold alone
• Animate bloom via refs (useFrame) for pulsing effects, and map audio FFT bands to intensity/threshold for reactive visuals

Example use cases

• Neon city scene: high-intensity emissive materials with a mid threshold and small radius for crisp neon edges
• Magic spell: selective bloom on a spell mesh plus pulsing intensity driven by a clock or animation curve
• UI glow: emissive billboard textures and conservative bloom for readable, eye-catching HUD elements
• Audio visualizer: map bass to bloom intensity and mids to luminanceThreshold for music-reactive glow
• Mobile-optimized effects: detect GPU tier and lower levels/radius or disable MSAA for stable frame rates