A more tangible way to explore car interiors using WebGL
Virtual reality has always fascinated us as users and inspired us as professionals. Having experienced several Oculus Rift gaming sessions and the capabilities of modern WebGL-powered solutions, our attraction grew into determination: we have to create a VR experiment.
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, such as Penny Skateboard Customizer or Moto X Build Tool.
For our experiment, we chose the automotive industry because most of their potential customers tend to make initial vehicle-related buying choices online. That is why automotive brands make every effort to provide consumers with multiple information channels, thus motivating them to visit a dealer. Furthermore, virtually any car nowadays is modeled in 3D, so we did not have to start our work from scratch. And yes, we simply love cars.
The Idea
Let’s look at a car from the ordinary person’s perspective:
Here is what we have:
We evaluate the exterior of a car by means of visual perception, answering the question: “Do I like it?” Photos and videos work best to represent this criterion.
Performance is a totally logical evaluation criterion. “Is this car in line with my needs; is it powerful enough for me?” Combining data with images is a great way for digital representation of performance.
Pictures are static and cannot fully demonstrate the possibilities for interaction and interior customization.
Meanwhile, to decide on the interior features we have to touch them. It is crucial to feel the space, to have a look around and lay a finger on each item to understand if the interior truly meets our needs.
In general, automotive brands use 360° photo panoramas to demonstrate the interiors of their cars. However, pictures are static and cannot fully demonstrate the possibilities for interaction and interior customization. In other words, there is no way to discover car customization options to help you decide whether to visit the dealer and test the car or keep looking for other options.
So, we decided to accept this “lack of interaction” challenge and…
Enter WebGL
3D modeling gives endless possibilities for car customization. It provides for tangible interaction with the interior elements in the most natural of all virtual ways. However, touching elements of the car’s interior via desktop does not feel as natural as we wanted it to be. The mouse as an input device creates distance between the user and the car. Moving the camera view with a mouse drag is by far less an immersive experience compared to the physical movement.
Almost everyone owns a mobile device, and even low-end and middle-range gadgets are powerful enough to run 3D in the browser.
So, we spiced up the experiment with virtual reality
Some major automotive brands have already made their first steps into the field of virtual reality. VR Video Test Drives have been released for Volvo XC90 and Lexus RC F. Still, the VR headsets are currently in the demo stage, likely to hit the consumer market no sooner than Q1 2016 (Oculus Rift official release date). Keeping this in mind, we had to consider the options of other devices.
The solution literally came out of our pockets — mobile gadgets! Almost everyone owns a mobile device, and even low-end and middle-range gadgets are powerful enough to run 3D in the browser. Hence, using an accelerometer, we can create a deeply engaging experience, even without devices like Google Cardboard. Furthermore, a mobile website can be easily integrated into the main website of an automotive brand as a multiscreen experience; or it can work separately with a short link printed on the outdoor advertising or embedded into a QR code.
Sounds good, but what about the implementation?
Getting started
At ELEKS Digital, we have a time limit of 4 weeks set for all of our experiments. This stimulates us to focus on the experience-defining functionality and cut off peripheral time-consuming tasks. Most of all, we enjoy to race against time, creating something new with our small cross-functional team over the fast iterative work process.
After the few intensive brainstorming sessions we narrowed down our to-do list to include only the most essential features, allowing us to validate the overall idea and finish the project within a 4-week timeframe:
360° view using a gyroscope — the most enthralling way to get a look into the car’s interior.
Switching the camera position to different seats — the ability to observe the car’s interior from different angles, perceiving the space in the most natural way. This is the biggest advantage of 3D applied, compared to 360° photo panoramas.
Changing the seat and dashboard trim textures — the option of the car’s interior configuration, allowing for the combination of design preferences and evaluating them at the early stages of the decision-making process.
Interactive elements. Having infused the car discovery process with realistic user interactions, we made the user experience more transparent and natural.
Transparent and natural UI. The best interface is no interface. We totally refused to put any controls between the interior details and a user to make the exploration process totally seamless. Still, because of a digital medium, the interaction is limited to tapping, dragging and other gestures, but without any intermediary buttons or controls.
Combining these features, we created a realistic 3D model and ensured it operated smoothly on various mobile platforms. When it comes to mobile web, a good performance is always a challenge, especially in order for 3D to be compatible with mobile browsers. And this, to be honest, was our biggest headache within the project.
So, we brought a few tricks into play to make a low poly model look exactly like a high poly one.
Graphics vs Performance
Apparently, rich true-to-life renders of car interiors are super heavy. For our project, we needed to create a 3D model compatible with browsers, so we had to optimize it. We started with a highly polygonal model created in 3D Max. Imported in WebGL, our model could be easily processed by desktop apps, but most mobile devices refused to load it. So, we brought a few tricks into play 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 enables the user to customize textures and car objects’ design with a single tap.
The Virtual Reality approach made the interior preview a more natural and immersive experience, nearly bringing the user into the car. We had no trouble converting 3D to VR; it turned out to be much simpler than converting videos or pictures. We split the view into two cameras, one for each eye, and used the accelerometer data to control them.
WebGL is the the best option in cases of interactivity defining the experience.
Although the immersive web is still a compromise between graphics and performance, WebGL is the the best option in cases of interactivity defining the experience. And vice versa, if realism is crucial for your project, you probably should opt for video or images.
With Google Cardboard, you can view the car’s interior and interact with objects by focusing your eyes on them for a few seconds. Or you can connect you mobile device to a computer via websocket and use keyboard buttons to interact. It is a reverse practice to most multiscreen web experiences where a phone is used as an input device and a computer acts like the main display.
To sum it all up
Technology can dramatically change the user experience. Even within this demo we felt the potential of WebGL and VR for the brand’s digital ecosystems. Nevertheless, the technological feasibility should be established for each idea, no matter how great or simple it might seem at first sight. By creating a small working demo, you can receive the real experience and understand if the concept has the potential for future growth and what the technological constraints are. Although we have not implemented a lot of features in our project, the overall idea looks like a proven success.