Nexus 3D

The Erasmusbrug in Delft Blue, built in code with Next.js and React Three Fiber. It runs in the browser with nothing to install.

The idea

A modern skyline in a three-hundred-year-old palette, and a way past spinning-cube tutorials.

Adaptive quality that never ran

I built a quality system: detect the GPU at start-up, then give up one setting below 30 FPS and take one back above 55. Shadows first, resolution last.

// below 30 FPS: give up one thing, least visible first
if (s.shadowMapSize > 512)  s.shadowMapSize /= 2
else if (s.shadows)         s.shadows = false
else if (s.antialias)       s.antialias = false
else if (s.pixelRatio > 1)  s.pixelRatio -= 0.25   // resolution last

Writing this page, I found that nothing ever starts the measurement, and each component keeps its own copy of the settings. The performance panel shows 60 FPS forever.

What actually keeps it fast

Simplification: unlit materials, a handful of cables, primitive geometry and no model files. Convincing from a distance, blocky up close.

What I’d do differently

Wire up the measurement before building the optimisation, keep settings in one shared store, and test on a phone from day one.