A Journey through Middle-Earth in a Chrome Browser Near You

Share via AddThis
Posted December 3, 2013

Google is back with its latest Chrome experiment, this time to the delight of J.R.R. Tolkien fans. “A Journey through Middle-Earth” is an interactive web experience to explore various important parts of the Middle-Earth universe of The Hobbit. It has been developed for Peter Jackson’s upcoming sequel — The Desolation of Smaug — to last year’s The Hobbit: An Unexpected Journey, in collaboration with Warner Bros., New Line Cinema and MGM. Although the experiment is optimized for Chrome, it works on Firefox and Opera as well. Internet Explorer is not supported.

The experience starts with an abridged Google-like map of Middle-Earth with three unlocked (Trollshaw, Rivendell and Dil Guldur) and three locked explorable locations (Tharanduil’s Hall, The Lonely Mountain and Lake Town). Each unlocked location has a story flow and an interactive game. The locked parts of the map represent locations from the third and final installment of Peter Jackson’s The Hobbit series.

It has been developed entirely using standard web technologies, such as HTML5, CSS3 and JavaScript, although it may feel like the interactive Flash based animations you are so used to seeing on official movie sites. WebGL and WebAudio have been employed in order to give it an immersive feel. This experiment truly showcases what all is possible with just the use of common web technologies and the power of modern web browsers.

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.

For the technically astute, this wonderful casestudy on the making of this Middle-Earth Chrome experiment will shed light on technical challenges, how WebGL was used, JavaScript optimization, etc. To explore more such Chrome experiments, check out the official collection.

Source: Muktware

Comment this news or article

Featured news from related categories:

60,955 science & technology articles

Follow us

Facebook   Twitter   Pinterest   StumbleUpon   Plurk
Google+   Tumblr   Delicious   RSS   Newsletter via Email