• FWA Site of the Day
  • Awwwards Site of the Day
View All Awards

Gravity Official Movie Site

Launch Site

Responsive EPK + WebGL Spacewalk Experience

Warner Bros. came to us with the exciting prospect of creating an online experience for Alfonso Cuaron’s magnificent movie Gravity. The idea was to recreate the visceral feelings of panic and awe through an interactive exploratory experience. To do this, we created a space environment with the main locations from the movie like the ISS and the Hubble. The goal was for the user to feel as if they were space-walking from a first-person perspective, lost and alone in the vastness of space.
One of the greatest advantages in this project became one of our main challenges on the technical side. We were fortunate enough to receive the actual 3D models used in the film itself! Of course, that meant having to deal with the large number of polygons and crazy file size of the models.

We utilized many types of optimization techniques to make these models usable. The Level of Detail approach allowed us to show as little geometry as possible on the screen at one time. For faster loading, we created a tool to help us read the original Collada models and create our own highly optimized binary file to be added as a BufferGeometry. Add in GZip compression, and we were able to optimize what started as a 25MB Collada file down to a 4.4MB binary download file...way to go!
Much more went into recreating the beautiful imagery from the movie: post processing effects, free cameras, debris that looks like thousand of pieces made of merged chunks, and realtime intro. We stretched the limits of HTML5, with WebGL, WebAudio, CSS3D, Canvas and a bit of WebRTC.

Since the experience is purposefully minimal in terms of “things to do” (as is space), we created the Helmet Cam. It's a cool viral tool to promote the film that is as smart as it is simple. With Helmet Cam 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 our experience and creates endless unique pieces of content as each user captures their own perspective of space and shares with friends.
Beautiful, clean, functional design was our goal with the site. We wanted the imagery and the environment to be the focus. While the biggest creative accomplishments with this site fall into a more technical category, the real beauty in the experience is a balance between performance, load time, payoff, and a realistic look and feel.
With Gravity Spacewalk, we have created an immersive experience in a realistic style that encourages free exploration. More remarkably we have accomplished this with minimal load time and a level of performance that allows this experience to be truly accessible to the masses. While keeping in bounds of the film’s marketing guidelines and working within a limited time table, we feel we struck the best balance we could given the constraints and are truly excited about the discoveries we made during this great adventure into space!

you might also like

Google Maps Cube Game
Web Lab
Mega Hand
Previous Project
Next Project
Google Street View Treks