- Demodern GmbH Team
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.
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.
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.
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.