🌊 Ocean Fun Department

All water and ocean related WebXR demos in one place: FFT wave spectra, shoreline surf, caustics, fog, floating ships, marine life, and extreme weather — built with Three.js and tuned for Meta Quest headsets.

Dive in ← Back to all demos
What's in the water

Most scenes use the custom two-pass WebXR loop (depth / shadow pre-pass + stereoscopic render) and run at 72–90 FPS on Quest 3S / Quest 2. They also open on desktop browsers with orbit controls.

FFT / Gerstner waves Caustics Foam & shoreline Sea fog Marine life

Open ocean & simulations

Large-scale wave spectra, weather, and island environments.

Ocean

Three.js ocean demo.

Ocean Simulation

Interactive real-time tropical island ocean simulation with FFT/JONSWAP waves, Eikonal coastal refraction, dual-resolution foam, caustics, and dynamic weather in WebXR.

Ocean Simulation 2 (Optimized)

Optimized tropical island ocean simulation designed for Meta Quest 3S / WebXR headsets with streamlined FFT cascades, efficient foliage instancing, and optimized water shaders.

Natural Disasters (ABYSSAL)

Procedural extreme ocean & weather simulation with multi-cascade FFT waves, volumetric clouds, hurricanes, waterspouts, rogue waves, and tsunamis in WebXR.

Beautiful Water

Cinematic shallow-ocean environment with directional wave spectrum, floating buoy, seabed habitat, fish schools, and underwater light rays.

Shoreline & surf

Breaking waves, foam, and beaches.

ShoreBreak Rolling Waves

Immersive coastal shorebreak simulation featuring analytical Catmull-Rom wave stages, hollow curling lip barrel ribbons, shoaling wave deformation, and beach bathymetry.

Ocean surf

Procedural ocean surf shader with foam and Gerstner waves, utilizing a depth pass for shoreline interaction.

Beach

Beach.

Ships & fog

Vessels on the water.

Ship

Three.js ocean + The Black Pearl + Jack Sparrow.

Ship in the Fog

17th century sailing ship emerging from atmospheric sea fog with ocean waves and depth-based keel foam.

Caustics, reflection & refraction

Pool-scale water optics and underwater life.

Water reflection + refraction

Ported from Three.js.

Water caustics

Ported from Three.js Water.

Water caustics with shark

Three.js water caustics simulation with animated swimming shark.

WebGL Water Ocean

Interactive water caustics simulation with sandy seabed, fish schools, patrolling shark, dynamic clouds, and 10m abyss fog.

← Back to all demos View on GitHub