February 05, 2013

Google Helps You ‘Find Your Way To Oz’ with HTML5 Chrome Experiment with Disney, Unit9

You have to love how marketing folks are always trying to push the technology and placement envelops to grab our attention. After all, they face a world where we all seem to have developed a case of attention deficient disorder (ADD) when it comes to content consumption.

Indeed, nowadays companies looking to create buzz for their movies have inundated us with not just trailers, but a host of associated incentive programs that include games, contests, discounts, etc. 

But when everyone is doing it, the time has come to do something completely different.

In the run-up to the March 8, 2013 opening of Disney’s (NewsAlert) new movie, Oz The Great and Powerful, it would be an understatement to say Disney already has a full-court press going. I’ve seen previews for the movie during my last three visits to theaters, and just look at what has already been on the Web.

In collaboration with none other than Google (News Alert) and promotional wizards in their own right UNIT9, Disney has pushed the Web-based promotion envelop even further. Be the first on your block, or have the kids be the first, and check out Find Your Way to Oz. This is a new Chrome experiment that raises the bar on what can be done to grab attention.

I’m curious if you agree.

As Google notes, “Find Your Way to Oz is a new Chrome Experiment, developed with +Disney, that extends the magical world of Oz The Great and Powerful to your browser. Built with WebGL, CSS3, and other modern web standards, the interactive experience takes you on a journey filled with tornados, hot air balloons, and classic circus attractions.”  

How did they do that?

Google has given those interested an opportunity to take a peek under the hood via a case study as to how all of this works.

Google and UNIT9 are using various HTML5 techniques, including:

  • WebGL for the 3D effects
  • CSS3 transitions
  • GLSL shaders, accelerated 3D transforms
  • The Web Audio API for audio effect
  • The getUserMedia feature of WebRTC to power an in-browser photo booth that uses your computer’s camera and microphone

It is fascinating. For example, as the UNIT9 developers state, “in WebGL / Javascript we don’t (yet) have the luxury to run a full-blown physics simulation. So in Oz we had to find a way to create the effect of wind, without actually simulating it.”

And if you’re really into this and have some time, you can even play with the user experience without even touching the code. I did and the results were interesting to say the least. Append ?debug=on to the site’s URL, wait for it to load and then press Ctrl-i to bring up a new menu. This will enable you to adjust some aspects of the experience to your liking, and have the predetermined camera path guide you across this 3D world.

So to sum up, let’s see what we have here: Google, Disney, UNIT9, a Chrome experiment, a case study and the use of WebGL, CSS3 transitions, GLSL shaders, accelerated 3D transforms, Web Audio API, and the getUserMedia feature of WebRTC. 

That’s a whole lot of hype and technology rolled into an interesting test of both. 

I’m not going to say this is transformative. The long knives of tech purists are already out castigating Google for playing ball with Disney. Whether you like or dislike Disney, Google, Chrome as a browser or even going to the movies, one thing that can be said is that while this may turn out to be a nice promotional idea for Disney, it’s great publicity for Google and what it can do for others going forward. YouTube (NewsAlert) may be the present, but this certainly looks like it is going to be a significant part of the future. 

The wizards of Hollywood, Silicon Valley and Oz have created a world like no other, and to quote Dorothy’s famous line from the original Wizard of Oz, “I don’t think we’re in Kansas anymore.”

Edited by Braden Becker


HTML 5 Demos and Examples

HTML 5 experimentation and demos I've hacked together. Click on the browser support icon or the technology tag to filter the demos.... Learn More

HTML5 GAMES is the largest and most comprehensive directory of HTML5 games on the internet... Learn More

The HTML5 test

How well does your browser support HTML5?... Learn More

Working Draft (WHATWG)

This is the Editor’s Draft from WHATWG. You can use it online or print the available PDF version... Learn More

HTML5 Flip Book

Free jQuery and HTML5 flip book maker for PDF to online page turning book conversion... Learn More