If God had meant for us to walk, why did he give us feet that fit car pedals? Welcome to our real-time car configuration project. We'll show you how we brought a supercar in a fictional 3D world to life and delivered it as an immersive experience.
How we got the idea
The sale and display of cars is something very special, as are many of the advertisements that are broadcast around it. It is more of a lifestyle than a product that customers buy. In addition, many manufacturers already offer immersive approaches to interactive audio experiences to enhance the experience on the web. But in our opinion these are often far from what is possible.
In this context, we sat down and thought about a possible showcase project, and we ultimately chose a car configurator using a supercar from the Mercedes brand.
Objectives and goals we set
We wanted to focus on an immersive 3D scenery and the experience, rather than the configurator itself. This should work simply and intuitively, without the user having to worry much about it. The 3D scene, on the other hand, should perfectly match the car shown, the Mercedes AMG GT 63s. Therefore we set ourselves the goal of creating a modern, somewhat futuristic but still very elegant and sporty expression. We think it suits the brand.
Goals for the 3D environment
We thought of the environment to be simple and at the same time, align and visually merge with the shape of the car but not create too much distraction. It should also offer an impressive view of images and perspectives that we know from many car advertisements and provide an emotional appeal.
Requirements for UX/UI
The interface design should be able to seamlessly overlay the 3D scene and be reduced to a minimum. We really wanted to avoid the experience being perceived as a 3D scene on a website. Rather, we wanted to approach it like a video game and build the website around the 3D environment. In this way we want to achieve higher immersion and a stronger feeling of the experience.
Our inspiration and Design process
We start all our projects at the idea level and work our way up to the 3D area as soon as a good concept emerges. For this project we took all our main inspiration from Behance and Pinterest, the original car configurator from Mercedes itself and the video game Forza Horizon.
The 4 different environment designs
We took inspiration from Behance and Pinterest for the desired futuristic and cinematic style of the environment and how to place the car in it. We brought the inspirations together and developed 3D concepts for the following 4 scenes:
- Mountain scene (the final scene)
- Garage scene
- Penthouse scene
- Surreal Rocks scene
In the end, we chose the mountain scene because it was the best in terms of the overall vibe, UI, brightness, view and different perspectives. We also liked the futuristic box in which the car is located. It reminds us of a modern car dealership or show off area for the sports car we use.
Inspiration for UX and UI
For the UX, we used the existing, official configurator from Mercedes as inspiration and wanted to inspire our UI from a video game. For this reason, we chose “Forza Horizon”.
The experience should happen gradually and only display the information that is important for the moment. We also wanted to avoid using any opaque colors and elements that would unnecessarily block the 3D scene and thus limit immersiveness. The UI itself should match the modern look of the scene and adapt seamlessly to any perspective used.
Challenges we faced
One of the biggest challenges was establishing the visual quality of the scene on the web as well as many small details. If you look at the final result, you can see detailed reflections on the sides and surface of the car as well as on the glazing that accompanies the light.
We had to make a lot of changes and revisions to the car model and then carefully tweak it on the web until we achieved this quality.
Development process and implementation
To implement the project we used ThreeJ, the WebGI from pixotronics, and webflow for the front end. In order to properly use 3D and the environment on the web, we reduced the model's complexity and prepared textures and other components in a process called "baking".
The core development of the functions took place in ThreeJS. The Pixotronics team actively supported us in developing it in connection with WebGI.
We then coupled the frontend developed with webflow with ThreeJS and then made final changes and tweaking until we were happy with the result.
Credits and Contributors
We would like to thank the Immersive Studios team and our friends at Pixotronics for their active collaboration on this exciting project. Special thanks go especially to:
Julius Branding - Executive Director & Designer
Melvin Romejin - Head of Development
Jacob F. Schmidt - 3D Creative Development
Kiril Tucker - SDK Visual Development
Khalil Boukhelifa - Webflow development
Anderson Mancini - Visual Tweaking
Thanks for the support from the Pixotronics team:
Prashant - SDK Visual Development
Palash - SDK Visual Development
Final words
Project Cars was an exciting exploration into the area of realistic representation and configurators on the web. We can say that we have learned a lot about the project and are amazed by the positive engagement of the community, who were also able to follow us on X in this project and helped to inspire us.
