threejs-bloom

Implement bloom effects in Three.js WebGPU scenes with selective MRT contribution.

5|1|Updated Jul 4, 2026

Search Tags:#three.js #WebGPU #real-time rendering #bloom effect #light scattering

Ready to run

npx skills add https://github.com/linegel/threejs-complete-set-of-skill --skill threejs-bloom

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: threejs-bloom
Source: https://github.com/linegel/threejs-complete-set-of-skill/tree/main/threejs-bloom
Command: npx skills add https://github.com/linegel/threejs-complete-set-of-skill --skill threejs-bloom

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill allows users to design and implement advanced bloom effects in Three.js WebGPU scenes, enhancing visual quality and realism.

Core Features & Use Cases

Bloom Effect: Adds a glow to bright areas in the scene, simulating the effect of light scattering.
Physical HDR Scene Bloom: Offers a physically motivated approach to bloom, ensuring accurate representation of light scattering.
Selective MRT Contribution: Allows users to control which parts of the scene contribute to the bloom effect, enabling fine-grained control over the visual outcome.
Mobile/Tile-GPU Gates: Optimizes bloom for mobile and tile-based GPU architectures, ensuring efficient performance on a variety of devices.
Visual Validation: Provides tools for validating the correctness and quality of the bloom effect.

Quick Start

Use the threejs-bloom skill to apply a bloom effect to the scene with the following command: $threejs-bloom apply bloom scene-color 0.5 0.35 0.9

Frequently Asked Questions about threejs-bloom

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

FAQPage Schema

How do I add a bloom effect to a Three.js WebGPU scene?▼

To add a bloom effect in a Three.js WebGPU scene, you can apply the skill using a command like `$threejs-bloom apply bloom scene-color 0.5 0.35 0.9`. This adds a glow to bright areas, simulating realistic light scattering.

What is physically motivated HDR scene bloom in real-time rendering?▼

Physically motivated HDR scene bloom is a rendering technique that ensures the accurate representation of light scattering. It enhances visual realism by adding a physically accurate glow to bright areas within a high dynamic range scene.

Can I control which specific objects contribute to the bloom effect in Three.js?▼

Yes, you can control which parts of the scene contribute to the bloom effect using Selective MRT Contribution. This feature enables fine-grained control over the visual outcome by isolating specific elements for the light scattering simulation.

Does this bloom effect work efficiently on mobile and tile-based GPU architectures?▼

Yes, the bloom effect is optimized for mobile and tile-based GPU architectures using specific mobile gates. This ensures efficient real-time rendering performance across a variety of devices without causing bottlenecks.

How do I validate the correctness and quality of a bloom effect?▼

You can validate the correctness and quality of your bloom effect using built-in visual validation tools. These tools help ensure the light scattering simulation and overall visual outcome meet the desired rendering standards.