Find Your Way to Oz is a new Chrome experiment inspired by the feature film "Oz the Great and Powerful." Developed by UNIT9, the 3D environment is built entirely with WebGL and CSS3.
Do you consider a movie promotion successful if it compels an individual to go to the cinema? How about if that individual hasn't been inside a cinema in more than 20 years?
That is absolutely the case with this project. Crazy as it might sound, I last went to the cinema back in 1990. It's not a decision I consciously made, and there was no rhyme or reason as to why I hadn't been since. However, when I saw the web project for Find Your Way to Oz, it had such a profound effect on me that I finally said to my wife, "Let's go and see it." So we did. I thoroughly enjoyed the 3D movie and felt that my 20+ year abstinence from the cinema had finally come to an end.
So this web project has not only raised the bar for digital experiences, but it has affected me on a very personal level as well. The 3D glasses I bought at the cinema will make it onto my shelf of life's important things, and I thank everyone involved in this project for having such a profound effect on me while also paving the way for an entire digital generation.
This captivating interactive experience really sets a benchmark for what can be achieved today using modern web technologies. It epitomizes the focus of The Cutting Edge award: to move the web forward by leveraging the latest features and technologies in modern browsers, such as HTML5, CSS3, WebGL, and other current and future technology trends.
UNIT9's interactive director, Anrick Bregman, gave me some great insights into this amazing project.
Rob Ford: What did the client originally envision?
Anrick Bregman: The Oz project was a combined brief from Disney and Google, so our response needed to cover two very different challenges. On one hand, we needed to extend the world of Disney's film "Oz the Great and Powerful" to the web. On the other hand, we had to highlight the features of Chrome that contribute to a rich and fun browser experience.
I proposed we create a world just outside of Oz — an interactive version of the start of the film. It would be a circus scene that users could explore, and that would enable them to reach exclusive clips from the forthcoming film. In other words, it would lead them to the film, but it would still center around the individual user. A key phrase quickly emerged: "Find your way to Oz." With the emphasis squarely placed on "you," this experience was designed for each user to have his or her own unique journey.
The technological side of this work was just as important, however, so we agreed to prototype every Chrome feature we thought we could use. It took about 20 prototypes to settle on a subset of six or seven that we could integrate into the experience.
Ford: How did you brainstorm to get to the final idea?
Bregman: If the circus scene was to carry the whole site experience, it needed to express emotion, too. We were looking for a cinematic feeling that required a lot of exploration and technical innovation. But we also wanted to make sure we'd capture everyone, regardless of the technology.
A narrative direction emerged, focusing on the simplest of interactions: a horizontal pan across different sets that create a progression toward a climactic conclusion. The idea was that users would move through a circus with progressively darker skies and stronger wind to arrive at a tornado that takes them across to the world on film: the world of Oz.
A technical structure followed naturally. By combining many different elements, from stylized painted textures to 3D modeling, shader lighting, and atmospheric visual effects, our technology team was building a picture of how to create the final visual style.
Ford: How did you go about implementing that idea?
Bregman: To bring together the technology and craft needed to create the circus scene, we needed to go through a process of dialogue. An illustration changes when it goes from paper to being a texture on a geometric environment, as part of a larger scene with lighting, shadows, and so forth. So we were constantly moving through a very organic, flowing creative process, with handmade material and more process-driven 3D at opposing ends of the spectrum.
With this in mind, it was crucial that our 3D models could be made and modified quickly. Our 3D content pipeline took a lot of work to set up, but ultimately allowed that flow in our process to happen with ease. Initially our results were good but cold, high-polygon scenes with exacting colors and shapes. This initiated a secondary exploration that involved examining our work from a cinematic point of view. Working with simple old-school effects and some clever use of light, we created a richer, more fully finished version of our world. The feeling was unusual, a mixed sense of the unreal and the real at the same time.
Ford: What were some of your ups and downs?
Bregman: The climax of the users' journey is the storm. They are swept up into a dramatic experience, spinning out of control inside the vortex of a tornado.
Building this was easily our biggest challenge in the project. When nature is powerful and threatening, it delivers a sensory overload of sounds, images, and textures. We needed to re-create this sense of an intimidating natural force and yet keep a sense of softness that we all associate with clouds. Our first prototypes just could not keep up with the processor's abilities, and we quickly ran out of viable options.
We went back to the drawing board and were looking for a radically different approach. A chunk of math inspired by scientific visualization research proved to be the spark. [The tornado shader was created in part thanks to research from the Max Planck Institute of Neurobiology.] We made a custom shader built out of only 200 lines of code — a swirling soft object that is always different, always changing.
We then built a world around that shader tornado, with mangled objects from the circus, custom matte-painted backgrounds and particle clouds, and faked lens-flares and raindrops. All these layers combine to make a scene that feels really powerful and intense.
But such a large number of different assets is very hard to control. To enable quick experimentation and editing, we used a system that allowed live updating and editing of assets in the browser. This meant all team members could control their own work and see it live. Then they could make adjustments as needed. It created a way of working internally in a truly collaborative way and allowed us to involve both the teams at Disney and Google with our processes in an intimate way.
Ford: How has the project been received?
Bregman: Oz is a project that took a lot of people working together efficiently and passionately. The final project merges the richness of film with new technical abilities of the web. These new types of experiences can reach and inspire huge audiences on the web.
The response to Oz has been extremely rewarding. There's been a lot of wonderful feedback from all over the globe and numerous articles written about how the project came together. It has already been awarded the FWA site of the month, FWA's and Adobe's The Cutting Edge project of the week, and Awwwards site of the month. We've presented it at SXSW and FITC Amsterdam, and we'll continue to discuss it in technical and creative circles. It's a great story to share.
Of course, the project's overall aim was simple: to promote the film "Oz the Great and Powerful." The film opened with a very successful first weekend at the box office, and we're proud Find Your Way to Oz played a small part in that success.
This tornado of modern web technology twists and turns what could have become a tech demo into an engaging and interactive piece of world-building. The behind-the-scenes walkthrough is a must-read for anyone in the business, not just for the insight but also as a wake-up call: We're not in Kansas anymore.
— Wesley ter Haar, FWA judge
Rob Ford founded The FWA Network in May 2000. Since then, the network has received more than 170 million visits. The FWA Network showcases projects that use cutting-edge technology for desktop, mobile, and offline experiences, together with showcases for photography as well as video. Rob is also the author of three best-selling books on web and mobile. Check out The FWA Network.