A 3D configurator lets customers visually compose a product in the browser, with direct feedback in an interactive 3D environment. Sounds beautiful — and it is, until you dive into the codebase that has grown for years under constantly shifting requirements. That's the moment I joined this project.
My assignment wasn't so much 'new features' as 'make it workable again'. Large parts of the codebase needed to become more readable and more performant, so the team could once again make changes with confidence and the configurator could keep running smoothly on realistic datasets.
Refactoring inside a live codebase means in practice: small, safe steps, with good tests as a safety net and very clear agreements about what does and does not change in this sprint. I redrew component boundaries, cleaned up shared state, removed dead code, and decoupled heavy calculations from rendering. The latter gave immediately noticeable gains in smoothness.
The most substantively interesting part was collision detection between 3D elements in a WebGL environment. In a purely component-driven canvas situation inside Angular, that means thinking scenegraph-style inside a framework that wasn't built for it. We had to be careful about when calculations happened, how results were cached, and how to prevent an innocent component rerender from triggering a full recompute of an entire 3D stage.
For the calculations themselves I had to dive back into linear algebra, bounding volumes, and spatial partitioning. It's satisfying work: a well-chosen data structure can take a calculation that previously stuttered noticeably and reduce it to something the user simply doesn't notice anymore.
What this project gave me, beyond deeper knowledge of WebGL and complex Angular components, was above all a stronger sense of when a refactor stops being 'good enough' and when to push through and really clean things up. In a long-running codebase that distinction often marks the line between getting stuck and being able to move forward again.
Outcomes
- Heavy calculations decoupled from rendering, with immediately noticeable gains in smoothness
- Collision detection between 3D elements in a WebGL environment inside Angular 5
- Component boundaries redrawn, shared state cleaned up and dead code removed