How We Rebuilt Our 3D Viewer from Scratch

At Shapemaker, we’re always pushing boundaries, and our latest 3D viewer update is no exception.

The Problem: Limitations

In our previous 3D viewer, the technology we used came with limitations that hindered performance and flexibility. 
‍
These are the key challenges we faced:

• One of our crucial features relied on an external service.
• We had limitations with control over user interaction.
• Speed was a major issue, causing delays in rendering.
• Only developers familiar with parametric software, like Grasshopper, could really add new features, which limited viewer scalability.

To solve these issues, we decided to implement a new version by re-coding the entire viewer from scratch.

The Solution: Rebuilding the viewer 

Our first step was transitioning from the Grasshopper implementation to Python. Once we had a clearer view of the code in Python, we structured and divided it into smaller, reusable components for easier management and scalability.

This process, initially done in parallel by two people, took extra time and energy. However, we soon realized that working together and doing some pair programming would be much more efficient. When we worked separately, we often needed to stop and clarify things, like how geometry should be handled or why a particular validation error was occurring. 
By pairing up and coding together, we avoided these delays and made faster progress.

Pair Programming: From screen sharing to VSCode Live Share

Initially, we tried screen sharing, where one person would code while discussing the next steps. This approach, however, had its challenges. Only one person had control of the editor at a time, which limited collaboration.

That’s when we decided to use VSCode’s Live Share feature, which allowed both of us to make changes to the code. This significantly improved the workflow, as we could now switch turns or even work on different files simultaneously.

What we developed: A faster and more flexible visualiser

Here’s what we’ve achieved:

• We now calculate everything needed to render the model of the tower and its ancillaries in the backend.
• We’ve moved to using Three.js directly for front-end
• We now have the possibility of reacting to user inputs to deliver richer features in the 3d viewer.

After doing performance tests, we found that our new viewer offered an 87% speed increase over the old one. 
The initial render now takes just around 500ms, significantly improving the responsiveness when users interact with the towers and make changes to them.
As a small feature to demonstrate capturing user interaction, I added the ability to click on an antenna, which then highlights all antennas belonging to the same tenant as the one clicked.

Watch the Demo

For a demo of the described features, check out the screen recording below and see how these improvements come to life.

‍