web-ocean

Snowflow is a real-time procedural snow-rendering demonstration built with WebGPU, Babylon.js, and hand-written WGSL. It generates terrain, snow deformation, procedural characters, inverse-kinematics foot placement, cloth, surf wakes, water spells, atmosphere, and post-processing at load time without textures, meshes, HDRIs, or animation assets. Its terrain uses a nested-ring geometry clipmap whose vertex shader performs world placement, level-of-detail morphing, and displacement. Layered gradient noise produces the underlying heightfield, while a persistent GPU terrain-state buffer handles additive deformation through scrolling, relaxation, and splatting in a ping-ponged full-screen pass. The demo also provides GPU snow shading, cascaded PCSS shadows, procedural character and cloth systems, and in-browser settings, performance, and debug views. It requires a WebGPU-capable desktop browser and a discrete or recent integrated GPU; it intentionally has no WebGL fallback.

ABYSSAL is an open-source, browser-based real-time ocean and extreme-weather simulation built with Three.js, WebGL2, GLSL3, and Vite. It procedurally generates the ocean, clouds, rain, spray, foam, lightning, hurricanes, waterspouts, whirlpools, rogue waves, and tsunamis on the GPU without external textures, meshes, HDRIs, or sound files. Its ocean uses three FFT wave cascades driven by a JONSWAP spectrum and a per-frame butterfly IFFT; a projected screen-space grid renders the water, while analytic disaster height fields deform its surface. Volumetric clouds are raymarched from Perlin-Worley noise and a procedural weather map, with atmospheric-scattering lookup tables providing shared lighting for the sky, clouds, ocean, and spray. Temporal anti-aliasing, adaptive quality scaling, bloom, depth of field, motion blur, and tone mapping form the post-processing pipeline. The browser experience includes an automatic cinematic storm sequence and a sandbox with free-flight controls.

Tidewater is a browser-based island fishing game. Players fish from a pier, beach, or boat, manage line tension while fighting catches, sell fish to a village vendor, and spend the proceeds on equipment such as stronger line, reels, rods, a larger hold, fuel capacity, an engine, a fish finder, and deck lights. The island and surrounding ocean can be explored on foot, by swimming underwater, or by boat, with fishing conditions varying by water depth and time of day. The game runs directly on WebGPU and WGSL using its own rendering engine rather than a framework. Its systems include a four-cascade FFT ocean based on Tessendorf spectra, shallow-water swash simulation, boat wakes, underwater lighting and caustics, a physically based atmosphere, volumetric clouds, dynamic lighting, positional audio, and browser-saved progress. It requires a recent browser with WebGPU and a capable GPU; the first load compiles several hundred shaders. The source code is released under the MIT license and is deployed as a static build through GitHub Pages.

Ink Tide is a cel-shaded arcade boat-racing game for the browser, built with Vite, TypeScript, and Three.js. It uses no external assets: meshes, textures, rider animations, and sounds are generated in code. The game runs on an infinite procedural ocean formed from six summed Gerstner waves displaced in a vertex shader on a camera-recentered radial grid; CPU buoyancy samples the same wave field at six hull points, while GPU water rendering receives shared wave uniforms. Boats race three laps around a closed circuit with checkpoint gates, wrong-way detection, split times, AI drivers, powerslide-charged boosts, camera cycling, and gamepad controls. Rendering uses quantised cel shading, banded specular highlights, Fresnel rims, inverted-hull exterior outlines, and a Sobel pass for interior lines. Audio is synthesized with Web Audio, including engine, water, impact, and race-start sounds. The repository includes a Playwright-based screenshot harness for capturing and verifying game frames.