“A Journey through Middle-earth”: A Chrome Experiment for the multi-device web

NOV 20, 2013
Author Photo By Max Heinritz, Product Manager and (Tolkien) Troll Evader

Cross-posted from the Chromium Blog

For the past few years, building multimedia web experiences for mobile devices has been difficult. Phones and tablets are less powerful than their counterparts, and mobile browsers have traditionally had limited API support. Despite these challenges, the mobile web is evolving rapidly. In the last few months alone, Chrome for Android gained support for WebGL, WebRTC, and Web Audio.

“A Journey through Middle-Earth”, our latest Chrome Experiment, demonstrates what’s now possible on the mobile web. Developed by North Kingdom in collaboration with Warner Bros. Pictures, New Line Cinema and Metro-Goldwyn-Mayer Pictures, the experiment uses the latest web technologies to deliver a multimedia experience designed specifically for tablets, phones, and touch-enabled desktops.

The experiment starts with an interactive map of Middle-earth. It may not feel like it, but this cinematic part of the experience was built with just HTML, CSS, and JavaScript. North Kingdom used the Touch Events API to support multi-touch pinch-to-zoom and the Full Screen API to allow users to hide the URL address bar. It looks natural on any screen size thanks to media queries and feels low-latency because of hardware-accelerated CSS Transitions.

Clicking or tapping a location in the map reveals a second layer with horizontal parallax scrolling, again built just with HTML, CSS, and JavaScript. Eventually users reach an immersive WebGL-based 3D environment optimized for Android phones and tablets with high-end GPUs. These environments also use the Web Audio API for interactive audio.

The multi-device web is evolving rapidly, and we’re looking forward to more sites like “A Journey Through Middle-earth” that show the potential of the platform’s latest mobile features. For a deeper technical case study, check out North Kingdom’s new HTML5 Rocks article about using WebGL in Chrome for Android*. We’re also planning to host a Google Developers Live session with the team in early December; circle +Google Chrome Developers for details.

*Update: you can now read North Kingdom's second HTML5 Rocks case study on building the rest of the HTML5 front-end for "A Journey through Middle-earth".

Max Heinritz is an Associate Product Manager on the Chrome Web Platform team. He's helping the web reach its potential to become the universal application platform. On the weekends you can find him exploring the Northern California wilderness.

Posted by Scott Knaster, Editor