Cascaded FFT waves, a Preetham sky, underwater rendering, persistent wakes, buoyancy, and thirteen environment presets. WebGPU with a WebGL2 fallback.
Tidewater bundles the ocean surface, the sky above it, and the scene below — wired together and tuned per preset.
Buoyant boats sit on the same surface the shader draws. Wakes write into a canvas the ocean samples back for displacement and foam.
<script type="module"> in any page.
Snell's window above the camera, total-internal-reflection past 49°, animated caustics on the sand and every submerged prop, directional Beer–Lambert absorption, screen-space god rays, and marine snow.
A world-locked 512² canvas the boat writes into every frame. The ocean shader samples it for displacement and foam, so the wake bends the surface and seeds whitecaps along the path. The trail decays over time.
Three IFFT cascades cover the spectrum from 16 m wind chop to 256 m open-ocean swell. The GPU runs the butterflies in TSL fragment passes; a CPU mirror evolves the same h₀(k) so the boat's keel rests on the surface you see.
Tessendorf evolution, Phillips spectrum, finite-difference Jacobian foam channel. Coefficients tuned per preset.
A 0–24 h slider drives sun elevation and azimuth, repaints the Preetham sky, rebakes the IBL, rebalances fog, swings the god-ray direction, and re-tints the water. Every preset holds its character at every hour.
A Müller height-field rides on top of the FFT. Clicks drop a tight ring; the boat's hull stamps impacts as it crosses crests; River mode adds a flow direction so the ripples drift downstream. It runs in the same TSL graph as the cascades.
Fresnel reflections, dual-lobe sun glint, depth-graded absorption, subsurface scattering through the crests, and a normal-map cascade catching near-field ripple. The Preetham sky bakes to PMREM each frame; the water inherits its colour from the sky.
Whitecap foam gated on the FFT Jacobian — high values mark a steepening, breaking face. Wake foam stamped from the boat's path. Shoreline foam radiating from rocks and pilings. Presets swap textures and coverage.
Pass a hull into new Buoyancy(ocean, mesh, {points})
and it tracks the rendered surface. Multi-point gives pitch and
roll — bow lifts on the crest, stern settles in the trough.
Single-point handles buoys and debris with one cheap height
query.
Each preset carries its own wave parameters, foam textures, sky turbidity, cloud coverage, fog colours, water tint, depth gradient, seabed look, ambient audio, and bundled props — ice floes for Arctic, spray for Hurricane, kelp and coral for Reef.
Low, Med, High, Ultra. The runtime picks one based on backend, pixel budget, hardware concurrency, and UA. Each tier sets ocean mesh segments, FFT N and cascade count, max DPR, anisotropy ceiling, reflector resolution, and whether the volumetric cloud branch compiles into the sky shader at all.
Override with ?quality=low|med|high|ultra.
Tidewater ships as plain ES modules with an import map — no
bundler, no transform step. Use the full library, or drop the
<water-canvas> web component into a
non-Three.js site for a self-contained ocean. TypeScript
declarations included. Public APIs are documented in the
handbook.
<water-canvas> for non-Three.js sites// 1. import map — once, in your HTML <script type="importmap">{ "imports": { "three": "https://cdn.jsdelivr.net/npm/three@0.184.0/build/three.module.js", "three/webgpu": "https://cdn.jsdelivr.net/npm/three@0.184.0/build/three.webgpu.js", "three/tsl": "https://cdn.jsdelivr.net/npm/three@0.184.0/build/three.tsl.js", "tidewater/": "./tidewater/" } }</script> // 2. instantiate the ocean and start rendering import { OceanFFT } from "tidewater/OceanFFT.js"; import { SEA_MODES } from "tidewater/SeaModes.js"; const ocean = new OceanFFT(camera, sun); ocean.applyMode(SEA_MODES.reef); scene.add(ocean);
Every v1.x release ships to existing buyers at no charge. A future v2 would be a paid upgrade, but you keep v1 forever.
Both. Tidewater is WebGPU-first: the FFT cascades, post pipeline and TSL graph compile directly to compute and fragment passes. On browsers without WebGPU, the same TSL graph is lowered to WebGL2. The look holds. You lose some compute-shader speed, and a few Ultra-tier features get capped.
r184 is the tested minimum. Tidewater is unbundled, so you control the Three.js version via your import map. WebGPU and TSL still shift between Three releases. Pin a version you've verified.
Yes. The Tidewater License is per-developer. Use it in client projects, games, sites, embedded apps, paid or free. You can't redistribute the source. Read the full terms before purchasing.
Open the live demo on the actual device. Tidewater targets modern desktop and laptop GPUs first. Phones and tablets fall back to the Low and Med tiers, which the demo picks automatically. When the budget runs out, the runtime sheds features instead of crashing: SSR off on Low, one FFT cascade on phones, cloud branch removed from the sky shader at Low.
Once the .zip has been downloaded, all sales are final. Before download, you can request a full refund within 7 days for any reason. Email me.
A versioned .zip. Inside: the src/ module tree this site is built against, the assets/ bundle (CC0 boat, dock, ship, rock, yacht and trawler GLBs plus normal and foam textures), TypeScript declarations, an example index.html, a copy of the docs, and a manifest.json recording the version. Any version you've previously bought is re-downloadable from your purchase page.
No. Tidewater is sold only through this site. The zero-build CDN setup avoids the npm and bundler hop entirely. If your toolchain expects an npm install, file links inside a local directory work fine.
Instant download after purchase. The zip includes the source tree, assets, TypeScript declarations, docs and example page.