threejs-atmosphere-aer…
Implement physically motivated sky and aerial-perspective systems in Three.js. Use for planetary atmospheres, ground-to-space…
Route ambitious Three.js graphics work to the smallest expert skill set. Use for new visual experiences, graphics rewrites, reference matching, or requests spanning geometry, materials, atmosphere, shadows, temporal effects, and final image treatment.
$ npx -y skills add scottstts/threejs-awesome-graphics-agent-skills --skill threejs-skill-router --agent claude-codeHow it fires
How this skill gets triggered: by you, by Claude, or both.
/threejs-skill-routerContext preview
The summary Claude sees to decide when to auto-load this skill.
Route ambitious Three.js graphics work to the smallest expert skill set. Use for new visual experiences, graphics rewrites, reference matching, or requests spanning geometry, materials, atmosphere, shadows, temporal effects, and final image treatment.
name: threejs-skill-router description: Route ambitious Three.js graphics work to the smallest expert skill set. Use for new visual experiences, graphics rewrites, reference matching, or requests spanning geometry, materials, atmosphere, shadows, temporal effects, and final image treatment.
Treat the model's Three.js knowledge and official documentation as prerequisites. Load only the expertise that changes the visual result.
This pack goes beyond procedural guidance: its working examples and supporting assets contain much of its practical implementation value. When they are relevant, give them particular attention.
| Required result | Load | | --- | --- | | shot composition, chase/side/orbit rigs, camera handoffs, projection ownership, pointer look, floating origins | `$threejs-camera-direction` | | launch and docking timelines, procedural transform phases, springs, staging, rotating-frame alignment, debris motion | `$threejs-procedural-animation` | | reusable scalar/vector fields, domain warping, causal masks, procedural normals | `$threejs-procedural-fields` | | atlas-filtered blocks, planetary surfaces, hybrid texture-backed PBR soil/moss with procedural displacement and masks, ground and model moss accumulation, terrain wetness, deformable granular sand with mass-coupled grain shading, simulated tearable denim with implicit yarn mechanics and frayed fibres, woven cloth with GPU XPBD and yarn microstructure, simulated fur with interactive grooming and strand shading, lava/emissive surfaces, reflective wave-optical diffraction gratings, thin-film soap bubbles with Airy interference, raytraced diamond/gem refraction, dispersive glass transmission with internal reflection and volume absorption, deforming softbody jelly materials with XPBD mechanics and refractive caustics, authored frame PBR, specular AA | `$threejs-procedural-materials` | | height-field ray marching, silhouette-aware POM, curved relief shells, relief self-shadowing | `$threejs-parallax-occlusion-mapping` | | well-crafted and complete hard-surface object assemblies, procedural vehicles and humanoid robots, parameter-curve section tracks, tilted shell and spine lofts, pillow panels, exact polygon cuts, UV-owned apertures, spanwise airfoil lofts, sculpted rails/frames, branch rings, fin lofts, profile extrusion, inset, revolve, sweep, solidify, bevels and fillets, shell thickness, direct-topology apertures, semantic mesh writers, material slots and groups, primitive-built forms, coplanar flicker, loose/non-manifold geometry, detached parts, interpenetration, support, clearance and swept-envelope defects | `$threejs-procedural-geometry` | | trees, surface-following ivy, painted vines, stylized grass, GPU-computed grass, GPU-culled virtual flower fields, distance-tiered plant geometry, roots, foliage, rooted wind deformation | `$threejs-procedural-vegetation` | | buildings, façade grammars, profiles, ornaments, modular mesh writers | `$threejs-procedural-architecture` | | planets, terrain, craters, biome fields, coastlines, spherical detail | `$threejs-procedural-planets` | | sky scattering, planetary shells, depth-based aerial perspective | `$threejs-atmosphere-aerial-perspective` | | weather-driven raymarched clouds and cloud shadows | `$threejs-volumetric-clouds` | | FFT oceans, coastal breaker transitions, finite-volume shallow-water beach waves, signed-distance coastlines, shallow-water swash chains, wet sand, rock-impact spray, stylized above/below ocean optics, submerged Snell windows, total internal reflection, forward-refracted structures, pixel-footprint spectral LOD, aquatic perspective, caustic god rays, spectral cascades, choppy derivatives, Jacobian whitecaps | `$threejs-spectral-ocean` | | photoreal shallow water with gravity-capillary FFT waves, dispersive caustics and diffraction glare, authored analytic waves, bounded heightfield pools, object ripples, differential-area caustics, ray-traced pool volume optics, shared normals, heuristic refraction, fallback absorption, crest foam | `$threejs-water-optics` | | falling snow, snow accumulation, model snow caps, wet asphalt puddles, procedural ripple normals, splash flipbooks, rain streaks, shared weather envelopes, surface wetness | `$threejs-precipitation-surfaces` | | curved-ray black holes, accretion disks, wormholes and throat transits, null-geodesic integration, lensed celestial spheres and star fields | `$threejs-raymarched-space-effects` | | filmic HDR lens-flare compositors, highlight-derived radial ghosts, field-angle pupil deformation, spectral pupil rings, localized glare and bloom, raymarched aurora curtains, finite-footprint emissive slabs, uniform volume integration, equirectangular radiance probes, WebGPU voxel fire and smoke, volumetric fluid fields, mesh-surface emitters, SDF fire collisions, particles, trails, plasma, shockwaves, holographic projections, Fresnel rim shells, scanline banding, layered event effects | `$threejs-procedural-vfx` | | accumulated screen frost, touch clearing, wet-window rain, view-aligned droplet refraction and blur | `$threejs-temporal-surfaces` | | stable large-world shadows, cascades, clipmaps, cached updates | `$threejs-shadow-systems` | | GTAO, bent normals, bilateral reconstruction | `$threejs-screen-space-ambient-occlusion` | | HDR bloom and selective emission contribution | `$threejs-bloom` | | eye adaptation, tone mapping, LUT grading, output color | `$threejs-exposure-color-grading` | | shared depth/normal/velocity ownership and multi-pass ordering | `$threejs-image-pipeline` | | fixed-view diagnostics, seed sweeps, temporal and budget evidence | `$threejs-visual-validation` |
For a new procedural scene:
1. Define a visual contract: subject, scale, camera distance, motion, and target frame budget. 2. Load `$threejs-camera-direction` when framing, lens, camera frame, or mode transitions affect the
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 a deliberate final-image pipeline for advanced Three.js scenes. Use for depth, normal, albedo, and history ownership; GTAO…
Build silhouette-aware parallax occlusion mapping in Three.js WebGPU and TSL. Use for height-field ray marching, relief UVs,…