scottstts/threejs-awesome-graphics-agent-skills

threejs-bloom

Implement production bloom in advanced Three.js scenes.

Voir la source
Document Skill original

Rendu depuis le dépôt source en conservant titres, exemples, code, tableaux, liens et images.

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

du même dépôt

Autres Skills

Tous les Skills
scottstts
Communauté

threejs-atmosphere-aerial-perspective

Implement physically motivated sky and aerial-perspective systems in Three.js. Use for planetary atmospheres, ground-to-space transitions, Rayleigh/Mie scattering, precomputed LUTs, depth-based transmittance and inscattering, sun/moon discs, and atmosphere-aware lighting.

installations
2
GitHub Stars
911
Mis à jour
15 oct.
scottstts
Communauté

threejs-camera-direction

Direct advanced Three.js camera systems. Use for scale-aware chase rigs, thrust lag, side/orbit cameras, body-relative up vectors, quaternion handoffs, authored cinematic framing, floating origins, pointer-look controls, camera collision constraints, projection ownership, and lifecycle restoration.

installations
2
GitHub Stars
911
Mis à jour
15 oct.
scottstts
Communauté

threejs-exposure-color-grading

Build a measured exposure and grading path in Three.js. Use for a 64x36 encoded luminance meter, asynchronous readback, weighted log-average exposure, asymmetric adaptation, single tone-map ownership, and a generated 32-cube post-tone-map LUT.

installations
2
GitHub Stars
911
Mis à jour
15 oct.
scottstts
Communauté

threejs-image-pipeline

Build a deliberate final-image pipeline for advanced Three.js scenes. Use for depth, normal, albedo, and history ownership; GTAO or bent normals; bloom; eye adaptation; tone mapping; 3D LUT grading; effect-local render targets; and pass diagnostics.

installations
2
GitHub Stars
911
Mis à jour
15 oct.