Interactive Annual 20:
A beautiful site that does a nice job of letting
viewers experience the feeling of being in space.
So beautiful, and flawlessly executed.
Creating the web experience to accompany
Alfonso Cuarons Gravity, one of the most visually innovative films
in recent memory, was a bit more of a challenge than the usual movie
site. To live up to the task, B-Reel began with the idea to recreate the
films visceral sense of panic and awe through an interactive
exploratory experience. Designers built a space environment using the
main locations from the movie, such as the International Space Station
and the Hubble Space Telescope, and created Spacewalk, an immersive
WebGL experience that makes the user feel like they are lost and alone
in the vastness of space.
- • The site has had 1.2 million visitors since it
- • The actual 3-D models used in the film were incorporated
into the WebGL experience.
- • Navigation was kept simple to keep the focus on the imagery
Comments by B-Reel:
Although the experience is purposefully minimal in terms of
things to do, as it is in space, we included Helmet Cam,
which is a cool viral tool to promote the film thats as smart as
it is simple. The user activates a camera in their EVA suit helmet that
allows them to take photos from anywhere in the experience. This
highlights the dynamic nature of the site and creates endless unique
pieces of content as each user captures their own perspective of space
to share with friends.
One of the greatest advantages in this project became one of our
main challenges. We were fortunate enough to receive the actual 3-D
models used in the film itself, but that meant dealing with crazy file
sizes and translating millions and millions of polygons to be usable in
a dynamic in-browser experience. Without access to the proprietary
rendering system, we had to manually prepare the models for WebGL. Both
time and resources were a big factor, but we were able to reach a good
point with the quality. We felt that balancing look with performance was
an important compromise.
We used HTML5 at its
fullest, with WebGL, WebAudio, CSS 3-D, Canvas and a bit of WebRTC, so
we just needed a simple editor to code thousands of lines. We used our
own formats for optimizing the file sizes, so we ended up building our
own web tools for the conversion of the 3-D files, making audio sprites
or chaining post-processing effects live in the browser.
B-Reel, project design and development
Warner Bros. Pictures, client