Acoustic Garage

Autoneum is a globally leading automotive supplier for noise and heat protection in cars and asked us to create an online portal for the acoustic management of vehicles. The challenge was to create a user friendly 3D configurator that offers a comprehensive information and product experience in a real car setting and that allows a very wide audience, whether technical experts from automobile manufacturers, research institutes or end consumers, to design a customized noise protection package. The data displayed originated by Autoneum NVH CAE tools running in the background.

The Brief

We were asked to create a tool that showcases Autoneum’s products and technologies. For a user, this experience involves selecting a vehicle and customizing an acoustic package to see how it performs. By configuring and exploring, users learn how to make the car as light as possible while optimizing noise protection.

For this brief, a key challenge was ensuring a user friendly experience for an audience with a range of technical expertise — including acoustic engineers, automotive manufacturers, and a general audience interested in learning more about acoustics.

Our Approach

We wanted to create something visually appealing, seamless to navigate and quick to pick up. This started with a futuristic, abstract environment. The vehicle was central alongside supporting UI. Users customize different aspects of the car in a five step process that walks them through the impact of selecting different products and materials in context of the vehicle. For an extra layer of interactivity, users can play with the 3D model, rotating and driving the car.

We wanted the visuals to feel futuristic and abstracted. The outline of the car supports the realistic rendering of the product, constantly animating along the contours to give it shape and speed

Circular Navigation

Mid-way through the project we found the UI was feeling detached to the 3D visuals — it existed on the side, in the corners and overall not fully integrated with the 3D visuals in the center. To solve this, we designed a linear circular system where the main navigation items were on the left and the sub items were on the right.

The circle also served as a porthole for our main visual, drawing attention to the center and transformed into a glowing steering wheel when driving.

A Unified Dashboard

Another big design change was to bring all customization options onto one screen, this made it easy to see the correlation between different configurations. Users could now see all options available to them instead of having multiple states within a side bar.

The 3D Car

For an extra layer of interactivity, users can play with the 3D model, rotating and driving the car in real time. Different color schemes were added which correlate to different packages, aimed at achieving specific goals.

A stylized car body was developed with splines created in Maya. This model was then exported to create the mesh lines in the 3D scene.

To imitate movement, we animated the lines using a technique manipulating their UVs in the fragment shader using the texture applied to give this illusion. When the user drives the car and makes a turn, the lines move their position on the vertex shader to give 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 comes alive as the user moves the camera.

Acoustics Components

For the components, Autoneum provided us with detailed 3D models. We optimized these to reduce vertex count and generated both ambient occlusion and shadow textures. This improved visual fidelity and prevented expensive real time calculations.

Data Management

Working directly with Acoustics engineers, we mapped complex data requirements to implement a solution to effectively managed all their products, technologies, configuration options and associated data. Airtable was used to manage structured data tables (16 in total) linked together leveraging traditional relational database features via a familiar spreadsheet UI.

All configuration data, along with copy and translations, was managed in this way. Acoustic simulation data, channeled from Autoneum NVH CAE software, was retrieved via an API based on combination of options selected.

We used a radar chart to visualize the data points of key values, transmission loss and absorption. These charts would update based on user selections, allowing them to explore the impact of different acoustics technologies.

The Finished Product

The Acoustic Garage is a powerful tool that has different purposes for different users:

• Sound engineers can generate customized technical data and reports
• Marketing and sales can easily showcase the 3D products all wrapped in a playful and friendly UX.
• New employees learn about Autoneum’s product portfolio in an interactive and easy way

The 3D configurator Acoustic Garage is available on desktop and tablet in English, German, Japanese and Chinese. It was first introduced as an installation at the bi-annual Automotive Acoustics Conference on vehicle acoustics in Zurich.

Visit Autoneum’s Acoustic Garage at https://acoustics.autoneum.com/.