Procedural Clouds Threejs

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

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

Quick Start Prompts

"Create a sky with beautiful cumulus clouds and golden hour lighting"

"Build volumetric raymar