Real-time 3D Car Configurator
In conjunction with the 2020 DC Comics FanDome event—a virtual convention for comics fans around the globe—Chevrolet teamed up with Warner Bros. and DC to give an heroic introduction to the new 2021 Chevrolet Trailblazer.
Chevy and DC hoped to offer fans a chance to customize their own versions of the Trailblazer, as inspired by one of five iconic DC characters: Superman, Batman, Wonder Woman, the Joker, and Harley Quinn.
From the outset, we planned to take advantage of real-time 3D with webGL to give both mobile and desktop users the ability to see the car from every angle.
Borrowing a few visual and stylistic cues from the Selfie Station project that we were also producing in support of the DC FanDome event, we set to work establishing a look that could marry a realistic 3D portrayal of the 2021 Trailblazer with the over-the-top, fun attitude of the larger comic book event.
Our first step was ensuring the car itself would present well, with an attractive and convincingly believable finish. To that end, we wrote a custom car-paint shader that could apply our various DC character decals as if they had been part of the base coat of paint, completed by a lightly flecked clearcoat finish.
To fit with the fantastic, in-world vision of FanDome, and capture some of the same dramatic presentation evident in Chevy’s own Trailblazer marketing materials, we created an up-lit, color-changing dome to house the Trailblazer on a rotating pedestal.
Taking inspiration from modern video game selection screens (additionally appropriate as the customizer would launch the same morning that Warner Bros. announced Gotham Knights, the next blockbuster game in the Batman Universe), we built a roving camera system that followed the car while moving smoothly and dynamically in response to each step in the user’s customization journey.
The design options envisioned by the DC’s internal creative team allowed for over 400 unique variants of the SUV, each of which would need to be reliably delivered as a well-rendered, easily shareable image to users at the culmination of their experience.
The best quality and reliability could be achieved if we prepared those takeaway images in advance, rather than at runtime, but the thought of hand-generating hundreds of images was a non-starter for our team, especially given the project’s timeline. Instead, we opted for automation.
After making modifications to a client-supplied 3D model of the Trailblazer, we prepared a small suite of custom Python scripts, one of which was written to control an instance of Marmoset, a high-quality 3D rendering system.
The scripts were able to step through paint color options and various decal designs, as well as trigger the rendering of a new image, allowing us to quickly create high quality shareable images of each and every one of the hundreds of combinations our users might make.
Additionally, and thanks to the automated process, we could be confident that any new batch of renders would incorporate our latest adjustments to either the Trailblazer’s 3D model or the custom decal designs, and the full running time to generate all of the rendered variants was only about 20 minutes.
With that solution in place, we were ready for fans to start building and sharing their creations for all to see.
"Everyone has been blown away and extremely happy with all the work your team has done."
Launching on the weekend of the FanDome event, the configurator was a hit with fans, who gave it traction on social media as they shared hundreds of personalized Trailblazers.
You can try out the archived experience here.