Repolode
Submit
Humpalumps

Humpalumps/Ultra-Water

Real-time ocean renderer for three.js (WebGL2) with FFT waves, shore breakers, foam, caustics, underwater view and floating objects.

View on GitHub
Stars
640
Forks
95
Open issues
0
Last commit
5 days ago

What is it?

Ultra Water is a real-time ocean renderer built on three.js and WebGL2, shipped with a demo island scene. Waves come from a Tessendorf-style FFT simulation across four cascades, with a capillary band for small ripples. The surface is shaded per pixel with GGX sun specular, planar reflections of the island, refraction and Beer-Lambert absorption.

Beyond open water, it covers shore breakers driven by an eikonal travel-time field, crest and lace foam, beach swash, and impact rings when objects hit the water. Caustics are computed by splatting refracted light onto planes at several depths. An underwater mode renders Snell's window, sun shafts and marine snow when the camera is at or below the surface.

Floating crates, barrels, buoys and boats use GPU-sampled water heights for buoyancy and drag, with a separate shadow map. The project includes an in-page performance HUD and benchmark, and it adapts its quality profile for phones and tablets.

Key features

  • 01FFT-based ocean waves across four cascades with capillary ripples.
  • 02Shore breakers with plunging lean, peeling crests and shoaling.
  • 03Crest whitewater and lace foam with coverage that erodes over time.
  • 04Caustics, underwater Snell's window and sun shafts.
  • 05Buoyancy simulation for floating crates, barrels, buoys and boats.
  • 06Mobile profile with automatic resolution scaling.

Use cases

  • Adding a realistic ocean or lake backdrop to a three.js web scene.
  • Studying FFT ocean shading, caustics and foam techniques in WebGL2.
  • Prototyping boats or floating objects that respond to waves.
  • Benchmarking GPU rendering performance in the browser.

Quick start

  1. 1

    Install dependencies

    npm install
  2. 2

    Start the dev server and open the printed localhost URL

    npm run dev

Things to know

  • Needs a WebGL2-capable browser and a reasonably powerful GPU for smooth frame rates.
  • Phone and tablet performance varies with temperature and device, and desktop settings can drop frames on phones.

Topics

#three-js#webgl#graphics#water-simulation#fft#shaders#real-time-rendering#game-dev

FAQ

What is Ultra-Water?
Real-time ocean renderer for three.js (WebGL2) with FFT waves, shore breakers, foam, caustics, underwater view and floating objects. Ultra Water is a real-time ocean renderer built on three.js and WebGL2, shipped with a demo island scene. Waves come from a Tessendorf-style FFT simulation across four cascades, with a capillary band for small ripples. The surface is shaded per pixel with GGX sun specular, planar reflections of the island, refraction and Beer-Lambert absorption.
Is Ultra-Water free to use? What license does it have?
Ultra-Water is open source under the MIT license. Check the license terms before using it in commercial products.
Is Ultra-Water still maintained?
Actively maintained. The last commit to Ultra-Water was on Nov 2, 2026.
What can I use Ultra-Water for?
Adding a realistic ocean or lake backdrop to a three.js web scene. Studying FFT ocean shading, caustics and foam techniques in WebGL2. Prototyping boats or floating objects that respond to waves. Benchmarking GPU rendering performance in the browser.
How do I install Ultra-Water?
Install dependencies: npm install Start the dev server and open the printed localhost URL: npm run dev
Where can I get Ultra-Water?
The source code and installation instructions are on GitHub: https://github.com/Humpalumps/Ultra-Water

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects