TRENCHLINE

A front-line trench at dusk, ten centimetres to the voxel, ray traced live in your browser.

You hold a fire bay on the shoulder of a dry ravine. Across fifty metres of shelled ground is another line exactly like yours. Dusk falls into night:

• flares climb from both lines and drift on the wind;
• machine-gun tracers arc over no man's land;
• barrages flicker on the horizon and rumble seconds later;
• shells set the ruins burning, and the craters' water holds it all.

Every wall, sandbag and duckboard is made of 10 cm voxels. A shell cuts into the ground you were counting on, and you dig yourself back out.

Play

Play it at lordjord78.github.io/Voxel-Trench-Warfare, in a desktop browser with WebGPU: Chrome or Edge 113 or later, or Safari 26. Where WebGPU is missing, the page shows a video of the game instead. Click to play; the mouse looks around.

Play with friends

Up to eight players, Red against Blue:

1. Click Host a game with friends and send the link it gives you (Discord works well). Friends who open it land in your lobby.
2. Everyone names themselves and picks Red or Blue. The host sets the kills to win, the time of day and the battle, then starts the match.
3. Each side wears its colour on the arm and the helmet; friendly fire is on, and a team kill costs your side a point. The first side to the kill target wins.

The rooms run on a small Cloudflare Worker (server/). Everyone needs a desktop browser with WebGPU, and the same version of the page (reload if the lobby says otherwise).

Controls

Keys
W A S D	Move
Shift	Sprint
Space	Jump; stand up from crouching or lying down
C / Z	Crouch / go prone
W into the bench	Climb onto the firing step
W + Space at a wall	Climb over it: out of the trench, over the parapet or the parados
Q	Periscope, on a firing step
Left mouse	Fire
R	Reload
F, held	Dig out loose earth
Esc	Pause: quality, mouse sensitivity, field of view, the time of day and how fast it passes, incoming fire
F3	Frame timings

How it is made

TypeScript and raw WebGPU, with no engine:

• The world: a 256 × 256 m map, 32 m deep, of 10 cm voxels, generated in the browser by workers. It holds trenches, dugouts, a hamlet and a wood, and distant terrain beyond to the horizon.
• Rendering: a voxel ray tracer over a brick map. Its main features:
  • many shadow-casting lights, with reuse between pixels and frames;
  • a froxel haze with light shafts and smoke;
  • a physically based sky with the moon and stars, and a full day-to-night cycle;
  • denoising, temporal anti-aliasing, bloom, automatic exposure and film grain.
• Destruction at 10 cm: shells carve craters, soil slumps, and the player digs it out.
• Combat: weapons with ballistics and recoil, suppression, and the effects of fire.
• The battle around the player: a deterministic director fires flares, barrages, tracers and fires, and the water reflects them.
• Quality: two quality presets and dynamic resolution hold a 14 ms GPU budget at 1.5 megapixels; a first visit whose machine cannot hold the high preset is moved to the low one.

How it is tested

• Unit tests (Vitest): generation, physics, ballistics, destruction, the battle, sound planning and the renderer's arithmetic.
• GPU tests (Playwright in Chrome):
  • shaders against references;
  • the game played through its test hooks;
  • captures for review.
• Performance gates: every standard view, at dusk and at night, holds its GPU time within 14 ms at the 95th percentile on an M1 Pro in Chrome, on mains power. That includes the battle at its peak, with the player firing on full auto under shellfire, where the overview at night sits at the budget's edge (13.4–13.6 ms).
• Safari: the same check runs in Safari (npm run safari) and reports.

Run it

With Node 22.12 or later:

npm install
npm run dev          # the dev server
npm test             # unit tests
npx playwright test  # GPU tests, in Chrome with WebGPU
npm run build        # the static site, in dist/

The build works from any path. The Pages workflow tests it, builds it and publishes it to GitHub Pages on a push to main.

Design

The design is in six specs, from the world to the showcase and playing it together. The build plans are in docs/superpowers/plans/.

Python reference

The original Python/Ursina game lives in reference/python/. It stays runnable, and its tests stay green, until the web version has ported everything it does. The web game's movement has since gone its own way (climbing out of any trench, the firing step only on the bench, no getting stuck); the parity tests still replay Python's recorded scenarios, on Python's own numbers, with those additions off. Run it from that folder with the repo's virtual environment:

cd reference/python
../../.venv/bin/python -m trenchline      # play
../../.venv/bin/python -m pytest          # 283 tests