Demodern

smart

Car Sites & Car Culture / Nominee

Demodern

Car Sites & Car Culture

Nominee

In order to push one step further and to leave common presentation forms behind we implemented a complete camera system in WebGL that enabled us to create realistic and convincing cinematic shots of the car. - Demodern GmbH Team

Watch

Q: Can you briefly describe your project and the concept behind it?

A: Simple. Radical. Liberating. With the relaunch of smart.com, it was our task to let visitors digitally experience the electric car. Completely in 3D via WebGL technology, users can intuitively interact with the new smart and configure all the equipment and options. Productivity and ease of use are top priorities for any configurator. By putting the product in the middle, we enabled users to configure along with the 3D model of the car while providing continual orientation. We used cinematic tracking shots to realistically depict detailed views in 3D and to connect the different focus points in an exciting way.

What breakthrough or “a-ha” moment did you experience when concepting or executing this project?

The smart configurator is not a stand-alone application in itself. It is embedded within the new smart.com environment that evolved at the same time. Many parties were involved in the project and only by a very close collaboration of all people – designers, developers and product managers of all teams – we could ensure to come to an excellent result.

Q: What web technologies, tools, or resources did you use to develop this?

A: The application is compiled with Webpack and Babel. Most developers used Webstorm as their IDE and Chrome to test and debug. The frontend stack is built on React, Styled Components, Redux. For WebGL, we use ThreeJS with a custom reconciler similar to “react-three-fiber”. Materials and lighting are implemented using custom shaders. All particle effects like dust, flares, and blend effects leveraging instanced geometry. The projects CI/CD consists of Git, Jenkins, Cloud Hosting, and a CDN. For communication and management, we used Slack, Jira, and Confluence.

Q: What influenced your chosen technical approach, and how did it go beyond past methods?

A: In order to push one step further and to leave common presentation forms behind we implemented a complete camera system in WebGL that enabled us to create realistic and convincing cinematic shots of the car. Besides the exterior, we wanted to show the interior in fullest detail in WebGL, with all its many configuration options, components, textures, and materials. Users should even experience their configuration in different lighting scenarios. In order to make that possible, each car is split into reusable elements that can be combined with a specific car configuration.

Q: Why is this an exciting time to create new digital experiences? How does your team fit into this?

A: First of all, digital product presentations become more and more important these days. However, our main goal is to build lasting products that pay in for the big picture, and to help our clients in their digital transformation process. The smart car configurator is not an isolated application, but part of a digital ecosystem that we have created including visualizers and retail applications: all based on the same infrastructure.