Google today unveiled a new Chrome experiment called “A Journey through Middle-earth” that was inspired by the upcoming motion picture “The Hobbit: The Desolation of Smaug.” The site was developed by North Kingdom in collaboration with Warner Bros. Pictures, New Line Cinema, and Metro-Goldwyn-Mayer Pictures.
The site starts on an interactive map of Middle-earth built with just HTML, CSS, and JavaScript. You can zoom in to explore locations (more are coming in the next few weeks), click on each one to learn its history and meet the characters who inhabit it, as well as “test your wits on a unique survival challenge.”
Check it out:
The Chrome experiment brings the locations and characters from the movie trilogy to life with modern Web technologies. The audio effects and sound manipulation are delivered through the Web Audio API, which is supported on both Chrome for Android and Chrome for iOS.
The 💜 of EU tech
The latest rumblings from the EU tech scene, a story from our wise ol' founder Boris, and some questionable AI art. It's free, every week, in your inbox. Sign up now!
The 3D graphics were built with CSS3 and WebGL, which have been used in previous Chrome experiments. “Journey through Middle-earth” is, however, the first Chrome Experiment designed to bring the 3D experience to mobile.
This works especially well if you’re using Chrome for Android on devices with high-end graphics cards, since WebGL is supported. Chrome for iOS doesn’t have WebGL support, unfortunately, but it still manages to keep up to a certain extent.
The Touch Events API is used to support multi-touch pinch-to-zoom and the Full Screen API allows users to hide the URL address bar. Screen size isn’t a problem thanks to media queries and low-latency is achieved because of hardware-accelerated CSS Transitions.
Google’s goal with “A Journey through Middle-earth” is to demonstrate what’s now possible on the mobile Web. Based on what we’ve seen so far, we have to say we’re quite impressed.
➤ A Journey through Middle-earth
Top Image Credit: casasroger/Flickr
Get the TNW newsletter
Get the most important tech news in your inbox each week.