Responses by Letizia Di Battista, executive producer, Active Theory.

Background: Autoneum, a world-leading manufacturer of automative acoustics, asked us to create a B2B tool to show its different products and their impact on cars. The challenge was to create a user-friendly 3-D configurator that engaged a wide audience of technicians and marketing departments at the same time.

Core features: The user interface and car model exist together in 3-D. The futuristic, abstract environment guides users through five steps to teach them about the process behind vehicle acoustics. We’re very proud to see how both the car and interface elements are integrated and complement each other. In the beginning, we had thought of having two different layers: one for the 3-D car and one for the user interface in 2-D. Then we realized that the power of the experience was to merge these two worlds, and we are very happy with the result.

Challenges: The goal was to create a tool that could appeal to people with varying levels of technical expertise. We had to balance being technical enough for acoustic engineers—showing graphs and detailed data—with engaging and entertaining clients and a general audience. Another challenge was building everything in 3-D while keeping loading times on the site short and the performances good for a wide range of devices.

Navigation design: We wanted to create an experience that could be as intuitive and user friendly as possible without using too much text, so we focused on animations that guide the user journey and give the sense of movement and interactivity. Besides the normal navigation, we added something playful: users can drive the car using the keyboard arrows, the mouse and even a game controller.

Technology: The site has been built with WebGL, using Hydra, our internal framework. The most exciting part was creating the 3-D car, which was developed using splines created in Maya and then exported to create the mesh lines in the 3-D scene. To make the car look as though it moves, we animated the lines with a technique that manipulates their UVs in the fragment shader. When the user drives the car and makes a turn, the lines move their position on the vertex shader, giving a sense of dynamism.

Additional layers of visual effects were applied depending on GPU capabilities. Glow effects enhance the lines to make them stand out. Ghosting and a subtle fluid simulation effect come alive as the user moves the camera.

Another interesting aspect was data management. Working directly with acoustics engineers, we mapped complex data requirements to implement a solution that effectively managed all of Autoneum’s products, technologies, configuration options and associated data. We managed a total of sixteen structured data tables with Airtable, which linked them together and leveraged traditional relational database features via a familiar spreadsheet interface. All configuration data, along with copy and translations, are managed this way. Acoustic simulation data is retrieved via an API based on the combination of options selected.