mcpbeat

Threejs Bloom

scottstts/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.

2k tokens
context cost
the whole folder, loaded on every use
3
files
instructions only
0
copies elsewhere
how many repositories repackaged it
527
stars on the repo
on the repository, not the skill itself

Install

one command, takes just this skill from the repository
npx skills add https://github.com/scottstts/Threejs-Awesome-Graphics-Agent-Skills --skill threejs-bloom

The instruction itself

4 sections, as written by the author

Bloom

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

Workflow

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

Read 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.

How to use it

Copy the folder

Take scottstts/threejs-bloom from the repository into ~/.claude/skills for personal use, or into .claude/skills inside a project.

Check the name does not clash

The agent identifies a skill by the name field in its header. Two skills with the same name cannot sit side by side — one of them will be ignored.