threejs-spectral-ocean

Name: threejs-spectral-ocean
Author: scottstts

377stars47forks

How to install threejs-spectral-ocean?

scottstts/threejs-awesome-graphics-agent-skills/threejs-spectral-ocean

$npx -y skills add scottstts/Threejs-Awesome-Graphics-Agent-Skills --skill threejs-spectral-ocean

Installs into the current project.

Summary

Build large procedural oceans in Three.js from directional wave spectra. Use for WebGPU/TSL FFT oceans, multi-cascade wavelength bands, hybrid FFT plus Gerstner clear-water oceans, stylized above/below surface optics, permanently submerged Snell-window views, total internal refle

Files · 1

View on GitHub

SKILL.md

1	# Spectral Ocean
2
3	Treat an ocean as a sampled stochastic wave field with explicit frequency-space ownership. Do not approximate this target with a pile of Gerstner waves, scrolling normal maps, or unrelated foam noise.
4
5	## Build order
6
7	1. Define the sea-state spectrum and deterministic Gaussian seed.
8	2. Partition wavelengths into disjoint cascades.
9	3. Validate the inverse FFT independently with analytic inputs.
10	4. Generate and conjugate-pack the initial spectrum.
11	5. Evolve packed displacement and derivative fields in frequency space.
12	6. Inverse-transform every packed field with explicit inter-step barriers.
13	7. Assemble displacement, derivatives, and persistent Jacobian foam maps.
14	8. Shade from summed cascade displacement and derivatives.
15	9. Add sub-grid detail only below the resolved simulation bands.
16	10. Expose spectrum, height, slopes, Jacobian, and foam-history diagnostics.
17
18	Read [references/spectral-cascade-ocean-system.md](references/spectral-cascade-ocean-system.md) before implementing or auditing a spectral ocean.
19
20	Read the [spectral cascade ocean system](examples/spectral-cascade-ocean/ocean-system.js)
21	and its adjacent spectrum, FFT, material, and detail modules for the cascade,
22	FFT, derivative, Jacobian, foam-history, and shading contracts. Its WebGL2
23	fragment-FFT backend is an explicit compatibility tier; preserve the
24	production WebGPU/TSL architecture described in the reference when the target
25	supports it.
26
27	Read the
28	[hybrid clear-water ocean material](examples/hybrid-clear-water-ocean/hybrid-ocean-material.js)
29	when the target needs FFT displacement with authored long swell, clear shallow
30	refraction, animated sand-bed caustics, Beer-Lambert color, shared sky
31	reflection, side-aware above/below surface normals, GGX sun highlights, and
32	foam diagnostics.
33
34	Read the
35	[stylized above/below ocean material](examples/stylized-above-below-ocean/stylized-ocean-material.js)
36	when the target needs a stylized FFT ocean that can be inspected from both
37	above and below the surface: height-gradient water color, sun-path glints,
38	crest scatter, Jacobian foam, water-tinted seafloor caustics, and an
39	underwater Beer-Lambert composite driven by scene depth.
40
41	Read the
42	[submerged Snell ocean system](examples/submerged-snell-ocean/underwater-snell-ocean.ts)
43	when the camera must remain underwater beneath a WebGPU spectral surface: it
44	provides surface-anchored above-water structure reprojection through Snell's
45	window, exact water-to-air Fresnel and total internal reflection, shared HDR
46	sky radiance, aquatic extinction and in-scatter, differential-area caustics,
47	full-resolution god rays, suspended particulates, and the final HDR grade.
48
49	## Non-negotiable gates
50
51	- Require a power-of-two grid and a passing FFT impulse/frequency test.
52	- Keep cascade wavenumber intervals disjoint.
53	- Derive normals from transformed derivatives, not a detached normal texture.
54	- Detect breaking from the horizontal-displacement Jacobian.
55	- Persist foam in simulation state; do not infer all foam anew per frame.
56	- Submit FFT stages with the synchronization required by the active backend.
57	- Share sun and sky parameters between the visible sky and ocean reflection.
58	- Start underwater structure reprojection at the displaced interface hit point; reject samples that are offscreen, on the wrong side of the interface, or misaligned with the refracted ray.
59	- Gate the entire optical side from one camera-medium state; do not choose above/below behavior per triangle.
60	- Terminate distant underwater sightlines with a safely submerged terrain rim; do not mask an empty seabed/ocean horizon with a view-aligned scattering layer.
61	- Keep a deterministic seed and fixed-camera capture for comparisons.
62
63	## Route elsewhere
64
65	- Use `$threejs-water-optics` for bounded water, screen-space refraction, depth thickness, shoreline absorption, and analytic wave surfaces.
66	- Add `$threejs-procedural-vfx` only when crest spray or interaction splashes are required.
67	- Add `$threejs-visual-validation` for cross-seed, temporal, and GPU evidence.

People who liked this also viewed

6 picks

Type

threejs-spectral-ocean

377stars47forks

View on GitHub

How to install threejs-spectral-ocean?

scottstts/threejs-awesome-graphics-agent-skills/threejs-spectral-ocean

$npx -y skills add scottstts/Threejs-Awesome-Graphics-Agent-Skills --skill threejs-spectral-ocean

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Spectral Ocean
2
3	Treat an ocean as a sampled stochastic wave field with explicit frequency-space ownership. Do not approximate this target with a pile of Gerstner waves, scrolling normal maps, or unrelated foam noise.
4
5	## Build order
6
7	1. Define the sea-state spectrum and deterministic Gaussian seed.
8	2. Partition wavelengths into disjoint cascades.
9	3. Validate the inverse FFT independently with analytic inputs.
10	4. Generate and conjugate-pack the initial spectrum.
11	5. Evolve packed displacement and derivative fields in frequency space.
12	6. Inverse-transform every packed field with explicit inter-step barriers.
13	7. Assemble displacement, derivatives, and persistent Jacobian foam maps.
14	8. Shade from summed cascade displacement and derivatives.
15	9. Add sub-grid detail only below the resolved simulation bands.
16	10. Expose spectrum, height, slopes, Jacobian, and foam-history diagnostics.
17
18	Read [references/spectral-cascade-ocean-system.md](references/spectral-cascade-ocean-system.md) before implementing or auditing a spectral ocean.
19
20	Read the [spectral cascade ocean system](examples/spectral-cascade-ocean/ocean-system.js)
21	and its adjacent spectrum, FFT, material, and detail modules for the cascade,
22	FFT, derivative, Jacobian, foam-history, and shading contracts. Its WebGL2
23	fragment-FFT backend is an explicit compatibility tier; preserve the
24	production WebGPU/TSL architecture described in the reference when the target
25	supports it.
26
27	Read the
28	[hybrid clear-water ocean material](examples/hybrid-clear-water-ocean/hybrid-ocean-material.js)
29	when the target needs FFT displacement with authored long swell, clear shallow
30	refraction, animated sand-bed caustics, Beer-Lambert color, shared sky
31	reflection, side-aware above/below surface normals, GGX sun highlights, and
32	foam diagnostics.
33
34	Read the
35	[stylized above/below ocean material](examples/stylized-above-below-ocean/stylized-ocean-material.js)
36	when the target needs a stylized FFT ocean that can be inspected from both
37	above and below the surface: height-gradient water color, sun-path glints,
38	crest scatter, Jacobian foam, water-tinted seafloor caustics, and an
39	underwater Beer-Lambert composite driven by scene depth.
40
41	Read the
42	[submerged Snell ocean system](examples/submerged-snell-ocean/underwater-snell-ocean.ts)
43	when the camera must remain underwater beneath a WebGPU spectral surface: it
44	provides surface-anchored above-water structure reprojection through Snell's
45	window, exact water-to-air Fresnel and total internal reflection, shared HDR
46	sky radiance, aquatic extinction and in-scatter, differential-area caustics,
47	full-resolution god rays, suspended particulates, and the final HDR grade.
48
49	## Non-negotiable gates
50
51	- Require a power-of-two grid and a passing FFT impulse/frequency test.
52	- Keep cascade wavenumber intervals disjoint.
53	- Derive normals from transformed derivatives, not a detached normal texture.
54	- Detect breaking from the horizontal-displacement Jacobian.
55	- Persist foam in simulation state; do not infer all foam anew per frame.
56	- Submit FFT stages with the synchronization required by the active backend.
57	- Share sun and sky parameters between the visible sky and ocean reflection.
58	- Start underwater structure reprojection at the displaced interface hit point; reject samples that are offscreen, on the wrong side of the interface, or misaligned with the refracted ray.
59	- Gate the entire optical side from one camera-medium state; do not choose above/below behavior per triangle.
60	- Terminate distant underwater sightlines with a safely submerged terrain rim; do not mask an empty seabed/ocean horizon with a view-aligned scattering layer.
61	- Keep a deterministic seed and fixed-camera capture for comparisons.
62
63	## Route elsewhere
64
65	- Use `$threejs-water-optics` for bounded water, screen-space refraction, depth thickness, shoreline absorption, and analytic wave surfaces.
66	- Add `$threejs-procedural-vfx` only when crest spray or interaction splashes are required.
67	- Add `$threejs-visual-validation` for cross-seed, temporal, and GPU evidence.

People who liked this also viewed

6 picks

Type