Nissan Altima in 360 degree view on Nissan Canada Mobile Virtual YouTube Showroom
I am so proud of our integrated team at TBWA\Toronto\DAN. After a lot of extremely hard work the efforts have paid off and I can talk openly about the amazing Nissan Canada Mobile Virtual YouTube Showroom. Google has now made it possible to host custom gadgets on YouTube’s mobile site and we have launched one of the first and definitely most comprehensive experiences.
By building on the deliberate modular architecture of the Nissan Showroom – already available on the non-mobile YouTube site and Facebook – we were able to deliver a similar experience tailored for mobile users. Like its desktop big brother the YouTube Mobile Showroom is 100% pure web using HTML5, CSS3 and JavaScript. Because the Mobile Showroom does not use Flash or any other proprietary plugins it runs extremely well on iOS devices including both iPhone and iPad. It also runs very well on Android, YouTube’s other supported platform for mobile channels.
Achieving this was no simple task as mobile devices always present technical challenges due to their slower CPUs and lower memory compared to their laptop and desktop brethren. A non-trivial effort was expended to ensure performance on smartphones and tablets exceeded everyone’s expectations.
One of the biggest obstacles we had to overcome was delivering 360 degree views of 8 cars in 8 colours each. That’s a lot of data to send to a little phone and it exceeds the small cache size of many devices which eliminated pre-loading as a strategy. Numerous other creative solution approaches did not meet our performance requirements:
- sending individual PNG frames required so many HTTP connections that the device all but imploded
- creating one 360 per car and colourizing at runtime with canvas did not produce realistic enough results
- placing all frames into a CSS sprite reduced the HTTP connections but the sprite itself was too big to load
- loading the 360 as an MP4 video wouldn’t have worked since iPhone insists on running videos full screen in the built-in QuickTime player
- reducing the number of frames was too choppy
- converting to lossy and lower-quality JPG was not satisfactory for our discerning creative directors
- WebGL support wasn’t strong enough
- web workers didn’t have access to the DOM
- data URIs were even larger than the compressed PNGs.
Our solution was actually quite simple in the end blending CSS sprites and animated PNGs. We found that optimal performance was achieved by creating 4 individual sprites each with enough frames to render 90 degrees of view. The number of HTTP connections was significantly reduced without creating any single image whose size choked at download.
There were numerous other technical challenges to overcome and they included: Simulating a native-like experience in multiple levels of iframes across domains inside YouTube while preserving multi-directional gestures and events; Scrolling the parent frame into view while simultaneously having no access or control of the parent frame.
Jake Edur, our lead software engineer on this project, had to dig deep into his bag of tricks as well as invent some new ones to achieve what many experts said couldn’t be done. Some of the technical highlights include:
- Building a reusable, modular and event driven architecture (this means that the Mobile Showroom isn’t limited to living on just YouTube)
- Creating a hybrid CSS sprite/PNG sequence animation framework that plays frames out of multiple sequential sprites
- Using hardware accelerated 3D CSS
- Custom gestures and events to work around nested cross-domain iframes
The Nissan YouTube Mobile Showroom is live. To view it simply navigate to http://www.youtube.com/nissancanada from your iOS or Android device.
