Skip to content
Image Generation
Skill

/threejs-bloom

Implement production bloom in advanced Three.js scenes. Use for HDR signal ordering, bloom-node controls, dual selective bloom with guaranteed material restoration, scene-relative emissive hierarchy, and effect-isolation diagnostics.

BOOST
From plugin
threejs-awesome-graphics-agent-skills
91124 skills
Install
$ npx -y skills add scottstts/threejs-awesome-graphics-agent-skills --skill threejs-bloom --agent claude-code

How it fires

How this skill gets triggered: by you, by Claude, or both.

  • Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.Auto-invocation is when the right skill fires by itself at the right moment, driven by a FLOW.md router and a hook, instead of you invoking it by name. It is the difference between a skill being installed and a skill actually getting used.Read the full definition →
  • You can call itInvoke it directly when you want it.
  • Slash command/threejs-bloom

Context preview

The summary Claude sees to decide when to auto-load this skill.

Implement production bloom in advanced Three.js scenes. Use for HDR signal ordering, bloom-node controls, dual selective bloom with guaranteed material restoration, scene-relative emissive hierarchy, and effect-isolation diagnostics.

SKILL.md

threejs-bloom.SKILL.md
name: threejs-bloom
description: Implement production bloom in advanced Three.js scenes. Use for HDR signal ordering, bloom-node controls, dual selective bloom with guaranteed material restoration, scene-relative emissive hierarchy, and effect-isolation diagnostics.

Bloom

Bloom is a camera/display response to bright HDR signal. Establish scene exposure and emissive luminance before tuning blur.

Workflow

1. Inspect pre-tone-map luminance. 2. Choose which scene values should bloom. 3. Choose a single-node or dual selective-render ownership model. 4. Calibrate threshold, radius, smooth width, and strength in HDR. 5. Restore all substituted materials transactionally for selective passes. 6. Composite before exposure/tone mapping. 7. Validate base, contribution, and final views.

Read [references/hdr-bloom-system.md](references/hdr-bloom-system.md) for the HDR ordering, dual selective-bloom transaction, compact emissive hierarchy, and the costs and limits of each ownership model.

Apply the material substitution/restoration ownership pattern in the reference before adding selective bloom to a composed scene.

Failure conditions

  • bloom creates the only visible form of an effect;
  • all bright materials share one arbitrary emission multiplier;
  • threshold is tuned after tone mapping;
  • selective bloom requires mutating scene materials every frame without restoration guarantees;
  • transparent particles disappear from extraction because pass ownership is unclear;
  • bloom radius changes wildly with resolution;
  • highlights become gray because energy is clamped too early.

Routing boundary

Use `$threejs-exposure-color-grading` for metering, adaptation, tone mapping, and LUTs. Load `$threejs-image-pipeline` only when bloom must be composed with several shared image-space systems. A per-pixel ray integrator that owns its own reduced-resolution target and accumulation history keeps its bloom internal; route that to `$threejs-raymarched-space-effects`.

Read more
Ships withthreejs-awesome-graphics-agent-skills

Example gallery to visually inspect included examples This is a Three.js agent skills pack for producing awesome graphics.

Get the whole plugin