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.
How do I install this agent skill?
npx skills add https://github.com/scottstts/threejs-awesome-graphics-agent-skills --skill threejs-bloomIs this agent skill safe to install?
- Gen Agent Trust Hubpass
This skill provides architectural guidelines and implementation patterns for High Dynamic Range (HDR) bloom effects in Three.js. It contains technical documentation and best practices without any malicious code or security vulnerabilities.
- Socketpass
No alerts
- Snykpass
Risk: LOW · No issues
What does this agent skill do?
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. 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.
How can the creator link this skill?
Add the canonical catalog link to the repository README so users can inspect current installs and available audits. The publishing guide covers the complete discovery path.
<a href="https://skillzs.dev/skills/scottstts/threejs-awesome-graphics-agent-skills/threejs-bloom">View threejs-bloom on skillZs</a>