threejs-atmosphere-aer…
Implement physically motivated sky and aerial-perspective systems in Three.js. Use for planetary atmospheres, ground-to-space…
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.
$ npx -y skills add scottstts/threejs-awesome-graphics-agent-skills --skill threejs-image-pipeline --agent claude-codeHow it fires
How this skill gets triggered: by you, by Claude, or both.
/threejs-image-pipelineContext preview
The summary Claude sees to decide when to auto-load this skill.
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.
name: threejs-image-pipeline description: 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.
Use this skill only when composing several image-space systems or defining shared buffers. For one effect, load its atomic skill instead.
Load:
The pipeline must expose its signals and ordering. Do not install a pile of effects and tune the final frame blindly.
scene HDR color + depth + normals + albedo where required → lighting-related screen effects → atmosphere/transparency composition → bloom → exposure → tone mapping → grading → lens/presentation effects → output conversion
Read [references/production-image-pipeline.md](references/production-image-pipeline.md) for four production pass graphs, their buffer/resolution contracts, and the ownership boundaries between whole-scene and effect-local graphs.
Use this skill when multiple image-space systems must share buffers, ordering, or output ownership. For one isolated effect, use its atomic skill without loading this coordinator.
Example gallery to visually inspect included examples This is a Three.js agent skills pack for producing awesome graphics.
Implement physically motivated sky and aerial-perspective systems in Three.js. Use for planetary atmospheres, ground-to-space…
Implement production bloom in advanced Three.js scenes. Use for HDR signal ordering, bloom-node controls, dual selective bloom…
Direct advanced Three.js camera systems. Use for scale-aware chase rigs, thrust lag, side/orbit cameras, body-relative up…
Build a measured exposure and grading path in Three.js. Use for a 64x36 encoded luminance meter, asynchronous readback, weighted…
Build silhouette-aware parallax occlusion mapping in Three.js WebGPU and TSL. Use for height-field ray marching, relief UVs,…
Build coupled precipitation and affected surfaces in Three.js. Use for falling snow, snow accumulation, model snow caps, wet…