A Claude Code skill for generating beautiful procedural clouds in Three.js, emphasizing artistic quality across all major cloud types with WebGPU raymarching and WebGL fallbacks.
Part of the Teaching Three.js skill series.
When installed, this skill teaches Claude Code how to generate procedural cloudscapes including:
- Volumetric raymarching with Beer-Lambert absorption, Henyey-Greenstein phase functions, and light marching for self-shadowing
- Mesh cluster clouds — instanced soft-particle spheres with cloud-type-specific profiles
- Billboard clouds — camera-facing sprites with procedural noise textures for mobile/background use
- All 10 cloud genera — cumulus, stratus, cirrus, cumulonimbus, stratocumulus, altocumulus, altostratus, nimbostratus, cirrostratus, cirrocumulus
- Physically-inspired lighting — silver linings, subsurface scattering, two-lobe phase functions, Beer-powder bright edges
- Time-of-day coloring — dawn, golden hour, sunset, twilight, and night palettes
- God ray post-processing — radial blur for volumetric light shafts
- WGSL 3D noise compute — GPU-generated tiling Perlin + Worley noise textures
- Animated drift — wind-driven movement, formation, and dissipation
claude install-skill path/to/procedural-cloudsOr copy the procedural-clouds/ folder into your Claude Code skills directory.
| File | Purpose |
|---|---|
SKILL.md |
Main skill — three rendering paths, lighting model, presets, scene assembly |
references/cloud-shaders.md |
Complete GLSL/WGSL shaders for volumetric, mesh, billboard, god rays |
references/cloud-types.md |
All 10 cloud genera with density parameters, lighting, and artistic direction |
"Create a sky with beautiful cumulus clouds and golden hour lighting"
"Build volumetric raymarched clouds with silver linings and god rays"
"Generate a dramatic cumulonimbus storm cloud with dark base and bright anvil top"
"Create a sunset scene with stratocumulus clouds lit from below in gold and purple"
"Build a peaceful cirrus sky with delicate ice crystal wisps at high altitude"
"Create a layered sky with cirrus above altocumulus above scattered cumulus"
- Three.js r170+ for WebGPU support and TSL node materials
- WebGPU browser (Chrome 121+, Edge 121+) for volumetric raymarching and compute noise
- WebGL2 fallback (mesh/billboard paths) works in all modern browsers
procedural-clouds/
├── SKILL.md # Core skill (read first)
├── README.md # This file
└── references/
├── cloud-shaders.md # GLSL, WGSL, and TSL shader code
└── cloud-types.md # 10 genera profiles with artistic notes
| Path | Quality | Cost | Best For |
|---|---|---|---|
| Volumetric Raymarching | Highest | High | Desktop hero scenes, WebGPU |
| Mesh Cluster | Good | Medium | General use, WebGL2 |
| Billboard Sprites | Acceptable | Low | Mobile, distant backgrounds |
Cloud beauty comes from light interaction, not shape alone. The skill implements:
- Henyey-Greenstein phase — two-lobe forward + back scattering
- Beer-Lambert + powder — bright thin edges, dark thick centers
- Silver linings — dramatic rim glow when sun is behind clouds
- Self-shadowing — inner light march creates natural dark bases
- Time-of-day palettes — from peach dawn to purple twilight
| Cloud | Altitude | Key Visual |
|---|---|---|
| Cumulus | Low | Cotton ball, flat base |
| Stratus | Low | Grey blanket |
| Stratocumulus | Low | Lumpy blanket with gaps |
| Cumulonimbus | All | Towering storm anvil |
| Altocumulus | Mid | Mackerel sky pattern |
| Altostratus | Mid | Thin veil, watery sun |
| Nimbostratus | Mid | Dark rain sheet |
| Cirrus | High | Wispy ice streaks |
| Cirrostratus | High | Milky haze with halos |
| Cirrocumulus | High | Tiny fish-scale ripples |
Independent skills that compose for complete environments:
- procedural-landscapes — terrain
- procedural-grass — ground cover
- procedural-stars — nightime skies
- procedural-weather — precipitation and atmosphere
- procedural-clouds ← this skill.
MIT — use freely in your projects.