Nexus 3D

De Erasmusbrug in Delfts blauw, in code gebouwd met Next.js en React Three Fiber. Draait in de browser, zonder installatie.

Het idee

Een moderne skyline in een palet van driehonderd jaar oud, en een manier om voorbij tutorials met draaiende kubussen te komen.

Adaptieve kwaliteit die nooit draaide

Ik bouwde een kwaliteitssysteem: bij het opstarten de GPU herkennen, daarna onder 30 FPS een instelling inleveren en boven 55 er een terugnemen. Schaduwen eerst, resolutie als laatste.

// onder 30 FPS: lever één ding in, minst zichtbaar eerst
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   // resolutie als laatste

Bij het schrijven van deze pagina ontdekte ik dat niets de meting ooit start, en dat elk component een eigen kopie van de instellingen heeft. Het performancepaneel toont voor altijd 60 FPS.

Wat hem echt snel houdt

Versimpeling: onbelichte materialen, een handvol kabels, primitieve geometrie en geen modelbestanden. Overtuigend van een afstand, blokkerig van dichtbij.

Wat ik nu anders zou doen

Eerst de meting aansluiten en dan pas optimaliseren, instellingen in één gedeelde store, en vanaf dag één op een telefoon testen.