“A beautiful site that does a nice job of letting viewers experience the feeling of being in space.” —Kris Kiger
“So beautiful, and flawlessly executed.” —Sean Klassen
Overview: Creating the web experience to accompany Alfonso Cuaron’s 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 film’s 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 launched.
• 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 and environment.
Comments by B-Reel:
Was there a viral component? “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 that’s 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.”
Were there any specific demands that made the project easier or harder? “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.”
What software, back-end technology and programming languages were used? “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.”
