scottstts/threejs-awesome-graphics-agent-skills

threejs-bloom

Implement production bloom in advanced Three.js scenes.

Quelltext ansehen
Originales Skill-Dokument

Aus dem Quell-Repository gerendert; Überschriften, Beispiele, Code, Tabellen, Links und Bilder bleiben erhalten.

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.

aus demselben Repository

Weitere Skills

Alle Skills
scottstts
Community

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.

Installationen
2
GitHub Stars
911
Aktualisiert
15. Okt.
scottstts
Community

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.

Installationen
2
GitHub Stars
911
Aktualisiert
15. Okt.
scottstts
Community

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.

Installationen
2
GitHub Stars
911
Aktualisiert
15. Okt.
scottstts
Community

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.

Installationen
2
GitHub Stars
911
Aktualisiert
15. Okt.