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

Share via AddThis
Posted on December 3, 2013
http://www.muktware.com/wp-content/uploads/2013/11/galdalf-dol-guldur-middle-earth.jpg

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



34,204 science & technology articles

Categories

Our Articles (see all)

General News

Follow us

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

Featured Video (see all)

A screenshot from YouTube video
The chemistry of cats: On catnip, pheromones and kitty litter
They are seemingly the most popular thing on the Internet, the subject of millions of videos and hundreds…

Featured Image (see all)


Supercomputer Simulation of Magnetic Field Loops on the Sun
Magnetic fields emerging from below the surface of the sun influence the solar wind—a stream of particles that…