Street 05 › Services › Case study: Cyber Velocity (performance)
Cyber Velocity: a 3D racing game that stays light
A 3D highway racing game in the browser, built with three.js, with a live rear-view mirror. We built it as our own product and wrote it up the way we would for a client.
The problem
A 3D game needs a 3D engine, and three.js alone is larger than the rest of our site’s first load put together. Shipping it to every visitor would slow down the pages most people come for.
Browser games also often run faster on 120 Hz screens than on 60 Hz ones, because they move things a fixed amount per frame. A racing game that is twice as fast on a new laptop is a different game.
The approach
- The game and three.js are separate downloads, fetched only when someone opens a 3D game. A bundle budget check fails the build if the first load grows past 90 KB gzipped or if any other file grows past its limit.
- Movement is based on elapsed time, not frames: each frame advances the world by the time since the last one, capped at 0.1 s so a stalled tab does not make the car jump.
- The renderer’s pixel ratio is capped at 2, and the rear-view mirror uses its own small renderer at a pixel ratio of 1, so high-density phone screens do not multiply the work.
- Traffic and track pylons come from fixed pools (22 cars, 7 pylons) that are reused as the road scrolls, rather than created and thrown away during a race. Closing the game cancels the frame loop and disposes the renderers, materials and audio.
- On every deploy, a headless browser starts a race on the live site, steers, checks the speedometer reads above zero, then pauses with P and resumes.
The numbers
Each figure comes from a check in our own repository, named after it, so it can be run again. Measured October 2026.
- 87.7 KB: gzipped first load for the whole site, with three.js not included (budget: 90 KB) (npm run test:bundle)
- 131.3 KB: gzipped three.js, downloaded only when a 3D game is opened (npm run build)
- 16.3 KB: gzipped size of the game’s own code (npm run build)
- 54 / 54: canvas games on the site that pass our 60 Hz vs 120 Hz frame-rate check; Cyber Velocity uses the same time-based rule, but is WebGL and not part of that check (npm run test:framerate)
- 22 + 7: traffic cars and pylons reused from fixed pools during a race (src/arcade/highcore/velocity/velocityEngine.js)
How it stays that way
- A headless browser starts a race, steers, checks the car is moving, pauses and resumes; the test fails on any console error (npm run test:smoke). It runs against the live site after each deploy.
- The accessibility audit opens the game window at desktop size and checks names, contrast and tap-target sizes (npm run test:a11y).
Want something like this?
We build games like this for brands, schools and training teams: Web & HTML5 Game Development.
More case studies: Circuit Architect (education).