WebGPU flood digital twin of Sheffield's River Don runs entirely in the browser

A flood twin in one browser tab

A developer writing on dev.to under the handle fortitudeomnis has published Don Watch, a real-time digital twin of Sheffield's River Don that runs entirely in a browser tab — GPU rendering and AI inference included, with no backing server. According to the post, the terrain is reconstructed from open LIDAR elevation data, the real river channel is draped over it, and the tool replays the November 2019 Sheffield flood hour by hour using the Environment Agency's own gauge records. Scrubbing the timeline makes the water track the recorded levels, and a live mode runs against the EA's current monitoring feed instead.

Rendering on WebGPU

Terrain, water and post-processing all render through three.js on its WebGPURenderer, with shaders written in TSL, three.js's node-based shading language, rather than hand-written GLSL. The water is not a decorative plane. The simulation reads the gauge height at the current instant and runs a breadth-first fill outward from the river's vertices, flooding only ground connected to the channel, so isolated hollows away from the river stay dry. The resulting height field is written to a texture that the shader samples for both displacement and depth.

The write-up also describes a shoreline rendering bug: because the water and terrain meshes use different resolutions of the same heightfield, they interpenetrated at the waterline, and a depth-buffer bias could not resolve surfaces that genuinely cross. The fix was geometric — lifting the water surface a couple of metres so it always sits above the ground, an offset the author says is sub-pixel and invisible at camera distance.

The AI stays on-device

Rather than a thin front end over somebody else's cloud, Don Watch loads a small open language model — somewhere between one and two billion parameters, per the post — straight into the browser through WebLLM and runs it on the visitor's own GPU. No server, no API key, nothing leaving the machine. The model is cached in OPFS, the browser's origin-private storage, and the flood data ships with the page, so a button that cuts the network leaves everything still running. Devices that cannot handle the model get a scripted fallback behind the same interface.

Agents that narrate, not calculate

Five small agents operate while the flood plays: an orchestrator delegates to two ingestion agents that read gauge and rainfall data, a forecast agent projects ahead, a risk agent ranks the sites in the water's path, and a communications agent drafts a plain-language brief. Each step streams into a live reasoning feed and lights up a delegation graph.

The design decision the author emphasises most is what the model is not allowed to do. The hydrology, the projections and the risk thresholds are all deterministic TypeScript; the language model reads those results and writes them up, but never produces the numbers. That, the post argues, is the honest role for an LLM in a safety-adjacent tool, and the reason the whole project is framed as decision support rather than an official flood warning.

Built to work offline

Don Watch ships as a Next.js static export and installs as a progressive web app, with a service worker caching the shell, the data and the model — so once it has loaded it keeps working on a locked-down laptop or in a field office without connectivity. The data is real and cited: gauges and rainfall from the Environment Agency, river geometry, landmarks and place names from OpenStreetMap, terrain from open elevation data, and official flood-warning areas and live sensors from the EA's flood-monitoring API. Where a series is reconstructed, the post says the tool discloses it.

The author also notes some hard-won lessons: real sensor networks are sparse, with central Sheffield covered by only a handful of river-level gauges rather than a dense grid, and serving a sub-path static export means every runtime fetch needs the basePath prefix. Running WebGPU rendering and local LLM inference in the same tab also creates real GPU contention, managed by bracketing generation so the render loop can yield.

Why it matters

Don Watch is a useful marker for how far client-side capability has come. WebGPU gives the browser near-direct access to the GPU, and runtimes like WebLLM mean a serviceable language model can execute on hardware the reader already owns. A safety-adjacent application — flood response — running with zero backend shows the practical payoff: no API costs, no data leaving the device, and operation in disconnected environments where flood work actually happens. Just as notable is the architectural honesty: deterministic code computes the hydrology and the model only explains it. As both a template for where an LLM belongs in a serious tool and a demonstration of what a single browser tab can now hold, the project is worth a close look.