threejs-atmosphere-aer…
Implement physically motivated sky and aerial-perspective systems in Three.js. Use for planetary atmospheres, ground-to-space…
Author procedural planetary bodies in Three.js. Use for spherical terrain, continents, ridges, craters, biome masks, coastlines, material variation, analytic normals, altitude LOD, and bodies that must hold up from orbit through close approach.
$ npx -y skills add scottstts/threejs-awesome-graphics-agent-skills --skill threejs-procedural-planets --agent claude-codeHow it fires
How this skill gets triggered: by you, by Claude, or both.
/threejs-procedural-planetsContext preview
The summary Claude sees to decide when to auto-load this skill.
Author procedural planetary bodies in Three.js. Use for spherical terrain, continents, ridges, craters, biome masks, coastlines, material variation, analytic normals, altitude LOD, and bodies that must hold up from orbit through close approach.
name: threejs-procedural-planets description: Author procedural planetary bodies in Three.js. Use for spherical terrain, continents, ridges, craters, biome masks, coastlines, material variation, analytic normals, altitude LOD, and bodies that must hold up from orbit through close approach.
Build a planet as a coupled field system evaluated on a unit direction. The same geological causes must drive geometry, color, roughness, normal, atmosphere handoff, and distance filtering.
This skill contains exemplary examples and assets beyond descriptive guidance, they're worth studying, referencing, or even copying. Use them sufficiently when relevant and do NOT blindly skip them.
1. Establish planet-space direction, radius, sea level, and world-unit scale. 2. Build macro silhouette fields before any surface material. 3. Add named geological structures: continents, basins, ridges, craters, lava fields, or ice. 4. Derive slope, cavity, altitude, latitude, exposure, and shoreline fields. 5. Classify broad biomes from those causes. 6. Derive displacement, color, roughness, and normal from the shared field bundle. 7. Filter bands by represented mesh scale and camera altitude. 8. Couple the material to atmosphere and lighting using the same planet transform.
Read [references/planet-field-and-atmosphere-systems.md](references/planet-field-and-atmosphere-systems.md) for terrain, biome, gas-giant, material, altitude-LOD, and atmosphere-handoff mechanisms, including a known CPU/GPU field-parity failure mode.
Read the [procedural planet surface implementation](examples/procedural-planet-surface/planet-system.js) and its [shared terrain field](examples/procedural-planet-surface/terrain-field.js) for undeformed sphere coordinates, shared CPU/GLSL terrain, coupled biome and material causes, derivative bump, and altitude-filtered detail.
The body must remain intentional in:
Use `$threejs-procedural-fields` for a reusable field bundle without a complete body, and `$threejs-atmosphere-aerial-perspective` for scattering independent of planet generation. This skill owns the coupled planetary surface.
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,…