Procedural Clouds — Claude Code Three.js Skill

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.

What This Skill Does

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

Installation

Claude Code (CLI)

claude install-skill path/to/procedural-clouds

Or copy the procedural-clouds/ folder into your Claude Code skills directory.

Manual Usage

Quick Start Prompts

“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”

Requirements

• 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

Skill Architecture

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

Key Concepts

Three Rendering Paths

Lighting Is Everything

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 Genera at a Glance

Series: Teaching Three.js

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.

License

MIT — use freely in your projects.