Real-Time 3D Car Configurator

Program-Ace has built a car configurator that dramatically improves the audience's interaction with your product in every single way.

Background Info

Program-Ace developed a configurator that takes your interactions with clients to a whole new level. This immersive solution works entirely in real-time and provides a wide range of interactive options coupled with high-detail graphics. The product prototype that it features can be easily replaced with other car models to showcase what your business is selling.

Business Challenges

1
Providing a captivating user experience
One main focus of our team during development was cultivating the emotions that a user would get via interaction with the configurator. Contributing to them were a fast load time and responsive interface, proper function in different browsers and extensions, as well as a rich visual section with plenty of information.
2
Building a convenient interface
We put great thought and care into the interface design process, as it was important to provide the user with a quick and straightforward system of navigating the configurator. This involved minimal movements to complete an action, no expanding menus or scrolling, and no superfluous information.
3
Matching business goals with user desires
Having packed the visuals into full 3D with high-quality automobile models, along with their reflections and interactions with light, we managed to achieve realistic visuals that help users overcome the fear of first interacting with a product, as well as allow them to evaluate it from all angles.

Approach and Solution

From the moment we started working on this configurator, we knew that it had to be easy to use while remaining functional. We also knew that we wanted our car to look sleek, so skimping on the detail and fidelity was not an option. And so, we set off on this endeavor:

  1. During the planning stage, we came up with the type of vehicle that we wanted to showcase and the customization options that we wanted to include.
  2. Our developers and artists began working together on a prototype. We aimed to determine whether it was possible to implement the features we wanted while keeping the software running smoothly. Suffice it to say that it was a success.
  3. The bulk of the production was geared towards building the UI, 3D car model, and implementing the real-time effects we envisioned. Everyone was working in PlayCanvas, but our artists were also working their craft in Photoshop, Illustrator, and 3DS Max while the developer was putting his JavaScript skills to the test.
  4. Having integrated the model, UI elements, and core functionality into the PlayCanvas project, we performed testing to iron out the bugs and make sure that the overall experience is on par with or exceeds what our clients expect.
  5. Voila! The configurator is ready, with room for additional functionality to be added later.

The current version of the configurator is presented as a screen, most of which is taken up by the 3D vehicle. On the left, there are 3 different car configurations (and prices), with the bottom panel displaying specs for each type – transmission, speed, fuel consumption, etc.

The top menu allows you to switch from the price tab to the exterior modification tab. This tab includes a wide variety of customization options for the paint, wheels, exhaust, mirrors, sunroof, and tinting. Two additional tabs that are planned to open in the future are “Interior” (for interior modifications) and “Payments” (for selecting different payment plans). Furthermore, the “Next” option in the lower right section of the screen is intended to allow users to place orders or bookings on a website.

3D car configurator

Technical Information

The project involved a total of 4 specialists: one Project Manager, one front-end developer, a 3D artist, and a UI/UX designer. It was built using the PlayCanvas engine, with additional assets developed in Adobe Photoshop, Illustrator, and 3DS Max. The team overcame the challenge of optimizing real-time rendering and successfully demonstrated deployment on the new and elaborate PlayCanvas platform. We are also currently developing another version of the configurator in Unity (using ray tracing technology), and hope to make it available in VR - mainly Manus and Oculus Quest headsets.
HTML CSS JavaScript Photoshop Illustrator

Audience

Car Configurator is a web application that was developed for companies that are interested in increasing their sales potential at the automotive market – typically car dealers, manufacturers, and sales & marketing agencies.
Retail
Manufacturing
Automotive
Marketing
Car configurator

Value Delivered

Program-Ace developed a configurator that provides users an opportunity to explore and customize the car model easily and effectively. This solution is simultaneously a reflection of the types of solutions we have previously developed for major automakers (under NDA) and an improvement upon them. If you choose to implement such a solution for your business, it will be easy to reap the following benefits from it:
  1. The approach of using our configurator can effectively boost the level of engagement users have with your product and form a bond with your product.
  2. Shopping around with a configurator is many times more useful than any other online purchase experience, as it is pressure-free and personalized, often resulting in a sale.
  3. In a crowded field of competitors, our configurator can push you to the head of the pack and offers a digital solution that others cannot match.
IAOP
Clutch AR/VR
Clutch B2B
Unity Certified
ETSA
EBA
Start A Project With Us
Tell us more about your business needs to help us serve you better. The more detailed information will allow us to route your inquiry to the most appropriate person in our team.
Upload File
(Accepted file types: jpg, gif, png, pdf, doc, docx, xls, xlsx, ppt, pptx, max 32mb)
By sending this form you agree to our Privacy Policy. The information you provide will be added to our CRM system for further communication.
Let’s work together
Tell us more about your business needs to help us serve you better. The more detailed information will allow us to route your inquiry to the most appropriate person in our team.
Upload File
(Accepted file types: jpg, gif, png, pdf, doc, docx, xls, xlsx, ppt, pptx, max 32mb)
Step 1/2
Step 2/2