“A Journey through Middle-earth”: A Chrome Experiment for the multi-device
web
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
