Inspired by virtual reality and the possibilities of WebGL, we were itching to try out this disruptive innovation on one of our projects. The idea evolved quickly.
We love cars, and the more digitalized the better. So, after the creation of the successful Apple Watch and Android Wear apps for controlling Tesla, we decided to build another experiment around the automotive industry. Since more and more people are making their choices online, digital experience became crucial for car brands as well. Our goal was to create an experience that would not be just a promo but could become a part of a company’s digital ecosystem and a convenient tool for users.
Plus, every car today is modeled in 3D, so we did not have to start our work from scratch.
DISCLAIMER: MINI (BMW AG) was not involved and did not endorse ELEKS Ltd. in this experiment.
Using a gyroscope, a 3D model car and the performance possibilities of mobile gadgets, we created an immersive 3D experience, giving users the ability to view the car’s interior from different angles and “touch” car features - features that existing 360 panoramas do not have.
To make the exploration process more natural, we did not provide any controls between the interior details and the user. Because of a digital medium, the interaction is still limited to tapping, dragging or other gestures but without any intermediary buttons or controls.
We started with a highly polygonal model created in 3D Max. Imported into WebGL, it was a piece of cake for the desktop, but most mobile devices refused to load the model. So, we used a few hacks to make a low-poly model look exactly like a high-poly one. As a result, we have realistic car interior with a low use of resources that lets the user customize textures and the car objects’ design with a single tap.
Since it was impossible to use a proper highly polygonal model created in 3D Max, we implemented a few hacks to make a low-poly model look exactly like a high-poly one. To retain its realism and smoothness, we had to bake normal maps in Blender and Maya, previously making UV maps for all the details. The completed UV maps prompted us to use diffuse maps that gave us the opportunity to choose any interior material and quickly change it in any graphic editor. To avoid using large textures, we picked their minimum size where the loss of quality was still negligible.
Interactive objects were another feature to create an additional effect of presence and immersive experience. The problem with 3D space is the theoretical inability to detect exactly what object the user has tapped. Fortunately for this task, three.js offers a ray casting approach that allows one to determine the objects within a certain point on the screen.
© 2015 eleks_digital. All Rights Reserved.