Procedural Weather Threejs

Procedural Weather — Three.js Skill

A Claude Code skill for generating dynamic procedural weather systems in Three.js, with **GPU particle precipitation**, volumetric fog, lightning, optical effects, and smooth state transitions. **WebGPU compute with WebGL2 fallback**.

Part of the **Teaching Three.js** skill series.

What This Skill Does

When installed, this skill teaches Claude Code how to build complete weather systems including:

• Rain — GPU particle LineSegments with wind-angled drops, ground splashes, and wet lens camera overlay (drizzle → monsoon intensity range)
• Snow — Points-based flakes with sinusoidal flutter, tumble, sparkle, size variation, and frost camera overlay (flurries → blizzard)
• Fog — exponential scene fog plus shader-driven ground fog with noise wisps and wind drift
• Lightning — procedural branching bolts with recursive midpoint displacement, glow layer, and PointLight flash illumination
• Dust/Sandstorm — swirling particle field with atmospheric color tinting
• Aurora Borealis — undulating displaced plane with multi-color gradient and additive glow
• Rainbow — torus-arc with ROYGBIV spectral gradient
• Camera post-processing — wet lens (droplets + streaks + refraction) and frost overlay (edge-creeping ice crystals)
• Weather state machine — 12 states with smooth parameter interpolation, transition routing, and biome presets

Installation

Claude Code (CLI)

claude install-skill path/to/procedural-weather

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

Manual Usage

File	Purpose
SKILL.md	Main skill — all subsystems, state machine, scene assembly
references/weather-shaders.md	Complete GLSL/WGSL shaders for every effect
references/weather-types.md	12 weather state profiles, transition matrix, biome presets

Quick Start Prompts

"Create a scene with gentle rain and ground fog"

"Bui