Projecten
2017·Refactor-lead voor leesbaarheid, performance en 3D-berekeningen

3D configurator — codebase verbeteren

Refactor van grote delen van de codebase voor leesbaarheid, performance en complexe 3D-berekeningen.

Angular 5TypeScriptWebGLHTML5 CanvasSpring BootJava 8
Geometrische vlakke illustratie met een draadframe-kubus en meetassen in gedempte tinten

Een 3D-configurator stelt klanten in staat om in een browser een product visueel samen te stellen, met directe feedback in een interactieve 3D-omgeving. Klinkt prachtig, en is het ook — totdat u in de codebase duikt die over jaren is gegroeid onder voortdurend verschuivende eisen. Op dat moment kwam ik in dit project binnen.

Mijn opdracht was niet zozeer 'nieuwe features' maar 'maak het weer werkbaar'. Grote delen van de codebase moesten leesbaarder en performanter worden, zodat het team weer met vertrouwen wijzigingen kon doorvoeren en de configurator op realistische datasets soepel bleef draaien.

Refactoren in een levende codebase betekent in de praktijk: kleine, veilige stappen, met goede tests als vangnet en met heel duidelijke afspraken over wat in deze sprint wel en niet wijzigt. Ik heb componentgrenzen verlegd, gedeelde state opgeschoond, dode code verwijderd en zware berekeningen losgekoppeld van rendering. Dat laatste gaf direct merkbare winst in vloeiendheid.

Het inhoudelijk meest interessante stuk was collision detection tussen 3D-elementen in een WebGL-omgeving. In een puur component-gedreven canvassituatie binnen Angular betekent dat: scenegraph-achtig denken in een framework dat daar van huis uit niet voor is gemaakt. We moesten zorgvuldig zijn met wanneer berekeningen plaatsvonden, hoe resultaten werden gecached en hoe we voorkwamen dat een rerender van een onschuldig component een hele 3D-stage opnieuw zou doorrekenen.

Voor de berekeningen zelf moest ik mij weer verdiepen in lineaire algebra, bounding volumes en spatial partitioning. Het is bevredigend werk: een goed gekozen datastructuur kan een berekening die eerst meetbaar haperde terugbrengen tot iets wat de gebruiker simpelweg niet meer opmerkt.

Wat dit project me opleverde, naast diepere kennis van WebGL en complexe Angular-componenten, was vooral een sterker gevoel voor wanneer een refactor stopt 'goed genoeg' te zijn en wanneer u doorpakt om écht orde op zaken te stellen. Bij een lang lopende codebase is dat verschil vaak de grens tussen blijven hangen en weer vooruit kunnen.

Resultaten

  • Zware berekeningen losgekoppeld van rendering, met direct merkbare winst in vloeiendheid
  • Collisiedetectie tussen 3D-elementen in een WebGL-omgeving binnen Angular 5
  • Componentgrenzen verlegd, gedeelde state opgeschoond en dode code verwijderd

Sectoren & expertises

Meer werk

Andere projecten

Contact

Werkt u in dit domein?

Loopt u tegen een soortgelijke uitdaging aan? Laten we vrijblijvend kennismaken.

Neem contact op