Threejs Spectral Ocean
Build large procedural oceans and coast transitions in Three.js.
Install
npx skills add scottstts/Threejs-Awesome-Graphics-Agent-Skills --skill threejs-spectral-ocean -g -a claude-code -y- Repository
- scottstts/Threejs-Awesome-Graphics-Agent-Skills956
- Category
- Engineering
- Updated
- 13d ago
- License
- MIT
- Context cost
- Mediumabout 1,774 tokens
- Runs scripts
- Yes, review before use
What it does
Build large procedural oceans and coast transitions in Three.js. Use for WebGPU/TSL FFT oceans, multi-cascade wavelength bands, coastal breakers, finite-volume shallow-water beach waves, signed-distance coastlines, shallow-water swash films, wet-sand transitions, rock-impact spray, stylized above/below surface optics, permanently submerged Snell-window views, total internal reflection, forward-refracted structures through an interface, pixel-footprint spectral LOD, aquatic perspective, caustic god rays, choppy displacement, spectral derivatives, Jacobian whitecaps, windrow and temporal foam, analytic sky reflection, underwater absorption, crest scatter, and GPU validation.
Spectral Ocean
Choose the representation that owns the requested view. Open-water sea states use explicit frequency-space ownership. A beach-level breaker view uses a coupled band-limited wave field, coast representation, swash state, foam history, and sand response. Do not reduce either target to scrolling normal maps or unrelated foam noise.
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.
Spectral build order
- Define the sea-state spectrum and deterministic Gaussian seed.
- Partition wavelengths into disjoint cascades.
- Validate the inverse FFT independently with analytic inputs.
- Generate and conjugate-pack the initial spectrum.
- Evolve packed displacement and derivative fields in frequency space.
- Inverse-transform every packed field with explicit inter-step barriers.
- Assemble displacement, derivatives, and persistent Jacobian foam maps.
- Shade from summed cascade displacement and derivatives.
- Add sub-grid detail only below the resolved simulation bands.
- Expose spectrum, height, slopes, Jacobian, and foam-history diagnostics.
Read references/spectral-cascade-ocean-system.md before implementing or auditing a spectral ocean.
Read references/coastal-breaker-and-swash-ocean.md before implementing or auditing the water-to-wet-sand transition of a coastal breaker system.
Read the spectral cascade ocean system and its adjacent spectrum, FFT, material, and detail modules for the cascade, FFT, derivative, Jacobian, foam-history, and shading contracts. Its WebGL2 fragment-FFT backend is an explicit compatibility tier; preserve the production WebGPU/TSL architecture described in the reference when the target supports it.
