Mobile Car Interior Preview

A tangible
way to explore
a car interior.

Visit from your mobile:

[unex_ce_button id="column_content_h63xpp0o6" button_text_color="#ffffff" button_font="light_italic" button_font_size="18px" button_width="auto" button_alignment="left" button_text_spacing="4px" button_bg_color="#0060ff" button_padding="10px 24px 10px 28px" button_border_width="2px" button_border_color="#0060ff" button_border_radius="0px" button_text_hover_color="#0060ff" button_text_spacing_hover="4px" button_bg_hover_color="transparent" button_border_hover_color="#0060ff" button_link="http://digital.eleks.com/mvr" button_link_type="url" button_link_target="_blank" has_container="" in_column="1"]DIGITAL.ELEKS.COM/MVR[/ce_button]

for iOS8+ or Android 4.3.3+

 

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.

 

People evaluate cars based on 3 criteria: performance, exterior and interior. In our experiment, we focused on the car’s interior, as this car evaluation criteria is the most tangible in human perception.

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.

previewpreview
card_boardcard_board

When it comes to the mobile web, good performance is always a challenge.

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. 

3D3D
high-low_polyhigh-low_poly
normal_map2normal_map2

The car interior preview can be easily integrated into the brand's digital strategy.

Our mobile website can be easily integrated into an existing website of an automotive brand as a multiscreen experience. Alternatively, it can work as a separate mobile website, with its short link printed on outdoor advertising or embedded in a QR code.

ecosystemecosystem

Technology
Used

[unex_ce_button id="column_content_ran9c51e0" button_text_color="#ffffff" button_font="light_italic" button_font_size="18px" button_width="auto" button_alignment="left" button_text_spacing="4px" button_bg_color="#0060ff" button_padding="10px 24px 10px 28px" button_border_width="2px" button_border_color="#0060ff" button_border_radius="0px" button_text_hover_color="#0060ff" button_text_spacing_hover="4px" button_bg_hover_color="transparent " button_border_hover_color="#0060ff" button_link="https://medium.com/eleks-digital/a-more-tangible-way-to-explore-car-interiors-using-webgl-4f2d5fea5ed3" button_link_type="url" button_link_target="_blank" has_container="" in_column="1"]MORE_ON_PROCESS[/ce_button]

#3D
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.

#three.js
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.

Services:
#User_Experience_Design #Creative #Web_Development

#FWA
Mobile Site of the Day

#W3_Awards
Silver - Mobile Apps/Sites

© 2015 eleks_digital. All Rights Reserved.