Noniv/abyssal-garden

What It Is

Abyssal Garden is an explorable underwater scene that runs in the browser. Kelp forests, light rays, a sunken ship, rock arches, manta rays and a purple grotto are all generated by code: there are no image, model or audio assets. The entire experience ships as a single 96 KB HTML file, rendered directly with WebGPU and without a game engine or 3D library. Sound is synthesized live through the Web Audio API. It suits anyone who wants a short, atmospheric browser experience and developers curious about dense procedural scenes written in raw WebGPU.

Getting Started

1. Download index.html.
2. Open it in Chrome or Edge on a desktop computer and wait a few seconds while the world is built.
3. Press Dive in, then use the mouse to look around, W A S D to swim, E/Q for up and down, and hold Shift for faster movement. Keys 1–6 jump to the six screenshot viewpoints, Esc opens the menu, M toggles sound and H shows performance stats.

An online version is also available at the project page. Touchscreen support exists but is described as experimental: hold one finger to swim forward and slide to steer, with a second finger for more speed.

Detail Levels and Compatibility

The scene requires WebGPU; if it reports "This scene needs WebGPU", update the browser or switch to Chrome or Edge. The menu offers Low, Medium and High detail. First visits pick High on computers, Medium on phones with 8 GB of memory and Low elsewhere; if loading crashes, the page retries one level lower, and the browser remembers the chosen level and resolution. On slower hardware an adaptive system first lowers resolution and then draw distance while aiming for 60 fps. The reported figures are about 180 fps at 2560×1440 on an RTX 5070 Ti and about 20 fps at 670×372 on a Samsung Galaxy A16 at Low detail.

Customizing and Building

The readable source lives in the source folder. Changing the world and rebuilding index.html requires Node.js 18 or newer:

cd source
npm install
npm run build

This writes a new index.html; npm run build:readable produces an unminified version for debugging, and npm run build:dev produces a separate dev.html with a one-minute camera fly-through (F) and a frame-time benchmark (B). The world layout is the recommended starting point, while shaders hold the water, fog and lighting look and main.js contains the renderer, camera and controls. Simple tweaks include the water colors WCOL and PCOL, sunlight SUNC, brightness and rays EXPO and RAYS, and swimming speed near 26 : 7.

The code is released under the MIT license, so it can be reused and modified in other projects.

HotRepo's take

The repository appeared on the JavaScript new-project list on 2026-11-14, gaining 58 stars and 9 forks in roughly one hour of tracked growth. That is a single short window, not a trend, and the project has no recorded all-language daily ranking. The interesting technical point is the delivery format itself: a full procedural WebGPU scene packed into one HTML file, with a build pipeline that can emit a readable or instrumented variant. Readers evaluating it should treat the fps numbers as hardware-specific claims from the author, not independently measured results.