postfx-bloom

Implement UnrealBloomPass bloom effects in Three.js scenes with React Three Fiber.

27|2|Updated Apr 18, 2025

Search Tags:#three.js #react-three-fiber #bloom #postprocessing #emissive

Ready to run

npx skills add https://github.com/tanepiper/teskooano --skill postfx-bloom

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: postfx-bloom
Source: https://github.com/tanepiper/teskooano/tree/main/.cursor/skills/postfx-bloom
Command: npx skills add https://github.com/tanepiper/teskooano --skill postfx-bloom

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill makes it easy to add cinematic bloom and glow effects to Three.js scenes, enhancing emissive elements and delivering neon/cyberpunk visuals without complex shader work.

Core Features & Use Cases

UnrealBloomPass-based bloom for luminance-driven glow and selective object blooming.
Easy integration with React Three Fiber to apply post-processing in typical 3D UIs or scenes.
Use Case: Quickly add a neon glow to a spacecraft cockpit or a UI glow to HUD elements to improve visual clarity.

Quick Start

Install dependencies: npm install three @react-three/fiber @react-three/postprocessing
Import and compose: Canvas from @react-three/fiber and EffectComposer with Bloom from @react-three/postprocessing
Apply Bloom to your emissive materials or selectively to designated meshes.

Frequently Asked Questions about postfx-bloom

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I add bloom and glow effects to a React Three Fiber scene?▼

Bloom in Three.js is a post-processing effect that enhances luminance-driven glow on emissive elements. It uses UnrealBloomPass to extract bright areas and blur them back onto the scene, creating cinematic neon or cyberpunk aesthetics without custom shader work.

Can I apply selective bloom to specific meshes instead of the whole Three.js scene?▼

Yes, you can apply selective bloom to specific meshes. The Skill supports selective object blooming by configuring the EffectComposer and Bloom components from @react-three/postprocessing to target designated meshes while leaving other scene elements unaffected.

What dependencies do I need to use UnrealBloomPass with React Three Fiber?▼

You need to install three, @react-three/fiber, and @react-three/postprocessing. These standard npm packages provide the Canvas, EffectComposer, and Bloom components required to implement and run the UnrealBloomPass glow effect in your web application.

How do I make emissive materials glow in Three.js without writing custom shaders?▼

You can make emissive materials glow without custom shaders by using this Skill's UnrealBloomPass implementation. It automatically extracts and blurs bright emissive areas via @react-three/postprocessing, delivering cinematic neon visuals for 3D web applications.

What is the best way to create cyberpunk visual aesthetics in a 3D web application?▼

The best way to create cyberpunk aesthetics is applying luminance-based bloom to emissive elements. This Skill uses UnrealBloomPass with React Three Fiber to deliver neon glow effects to 3D scenes, enhancing visual clarity for UI HUD elements and cockpits.