# Threejs Precipitation Surfaces

Build coupled precipitation and affected surfaces in Three.js.

- Repository: https://github.com/scottstts/Threejs-Awesome-Graphics-Agent-Skills (956 stars)
- Category: Engineering
- License: MIT
- Last updated: 2026-10-22
- Runs scripts: yes, review before use

## Install

Claude Code: `npx skills add scottstts/Threejs-Awesome-Graphics-Agent-Skills --skill threejs-precipitation-surfaces -g -a claude-code -y`
Codex: `npx skills add scottstts/Threejs-Awesome-Graphics-Agent-Skills --skill threejs-precipitation-surfaces -g -a codex -y`
Cursor: `npx skills add scottstts/Threejs-Awesome-Graphics-Agent-Skills --skill threejs-precipitation-surfaces -g -a cursor -y`
Gemini CLI: `npx skills add scottstts/Threejs-Awesome-Graphics-Agent-Skills --skill threejs-precipitation-surfaces -g -a gemini-cli -y`

## Description

Build coupled precipitation and affected surfaces in Three.js. Use for falling snow, snow accumulation, model snow caps, wet asphalt puddles, procedural ripple normals, splash flipbooks, rain streaks, shared weather envelopes, and surface wetness or coverage transitions.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Precipitation Surfaces

Treat weather as a coupled event, particle, and surface-response system. Do not
add rain or snow particles that are visually disconnected from the ground.

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.

## Build order

```text
weather envelope
  -> falling precipitation volume
  -> world/object surface mask
  -> displaced or optical surface response
  -> impact residue and splashes
  -> shared lighting/post presentation
```

Read [references/precipitation-surface-systems.md](references/precipitation-surface-systems.md)
for snow accumulation, object capping, wrapped precipitation volumes, wet
puddle masks, procedural ripple normals, splash placement, debug outputs, and
licensing boundaries.

Read the
[snow accumulation implementation](examples/snow-accumulation/snow-system.js)
for camera-wrapped snowfall, shared wind/time uniforms, world-space snow masks,
single-source snow height and normals, model snow capping, and optional ice
surface composition.

Read the
[wet puddle rain implementation](examples/wet-puddle-rain/rain-puddle-system.js)
for rain-progress wetness, asphalt puddle masks, procedural ripple normals,
instanced rain streaks, upward-surface splash sampling, and flipbook splashes.
This example includes GPL-licensed source material;
preserve its license boundary when copying or publishing it.

## Required controls

- precipitation density and speed;
- wind direction and strength;
- shared weather progress or coverage;
- wetness, snow, or puddle mask threshold and softness;
- ripple or drift normal strength;
- surface roughness response;
- particle/splash opacity;
- debug modes for masks, normals, particles, and event progress.

## Failure conditions

The rest: https://github.com/scottstts/Threejs-Awesome-Graphics-Agent-Skills/blob/HEAD/skills/threejs-precipitation-surfaces/SKILL.md