Warner Bros. International and the Interstellar production team approached AvatarLabs with a unique and ambitious request: Make the Endurance—the film’s signature spacecraft, purpose-built for navigating unknown space—explorable by curious film fans on the web in 3D. This WebGL-enabled HTML5 experience would dissolve virtually every technical barrier to entry and deliver an online version of the Endurance with a degree of three-dimensional verisimilitude that matched the ship depicted in the film.
When planning began, little was known about Christopher Nolan’s looming sci-fi epic beyond a first act outline. The heart of the plot, which included the origin of the Endurance, its capabilities and its destination, remained a mystery. AvatarLabs, Warner Bros. and Nolan—a technology evangelist who actively participates in the marketing programs for his films—opted for a strategy of building wonder. Rather than reveal details about the ship’s journey, the Endurance 3D experience would evoke the film’s grand designs on the intersection of science and destiny by permitting unguided investigation of the craft. A vivid rendering of the ship and its constituent parts would tease audiences with pioneer notions of travel to the far side of the stars, and the future tech that makes such an adventure possible.
Working in conjunction with Berlin-based studio Xymatic, and beginning with the original high-polygon, ultra high-resolution textured model of the Endurance used in the film, development and design teams undertook a complete teardown and rebuild, reducing the poly count and modifying textures to make the model viable for display on the web. Bump, normal and specular maps were added and special attention was paid to how the Endurance would respond to light in the vast openness of outer space.
Dynamic lighting was crucial to cementing the realism of the 3D model, and communicating a genuine sense of depth. A single source, supplemented by ambient background light, cast the ship’s surfaces in sharp relief and enabled reflections and shadows that respond in real time as the viewer manipulates the craft. A vast star field, subtly animated, was created to further amplify the sense of being afloat in deep and uncharted space.
Following the modeling phase, AvatarLabs collaborated with Warner Bros. on which sections of the Endurance to feature – the goal being to whet the appetite without giving away too much - and mapped out dynamic camera moves to best highlight these modules. The viewer is free to zoom in and out, and manipulate the model on all three axes at any time. When viewers select a section, the ships spins and the camera swoops to offer the ideal viewing angle — all aimed at keeping the Endurance the star of the experience. An info panel spawns at left providing viewers with detailed information about the technology within the selected section. The UI permits the viewer to enable or disable ship’s rotation and thrusters, further showcasing the spacecraft’s one-of-a-kind capabilities.
The experience was enhanced further in early December with the addition of four interior sections (Ranger, Command, Habitat and Main Dock). The detailed models plus the interplay of realistic light and shadow atop complex, articulated surfaces within the ship is nothing short of a showpiece for WebGL-enabled 3D.
With the recent incorporation of full WebGL support in mobile Safari in iOS 8, a special version of the 3D Endurance experience was created for iOS tablets and phones. The UI was optimized for mobile and load times were streamlined to make the portable implementation as satisfying as the desktop version.
The final execution yields a vital and immersive in-browser 3D experience, highlighting the culmination of months of close coordination among multiple teams across numerous technical disciplines that captured the scope and spirit of Interstellar inside a browser window.
The WebGL Endurance Exploration was greeted as both a technical achievement and a successful extension of the film world into the digital space. The experience earned positive nods in the enthusiast and mainstream press the moment it launched on Yahoo UK Movies and on USA Today, where Christopher Nolan spoke about the piece: http://goo.gl/vmUhox
Interstellar welcomed fans at early IMAX screenings across the United States and earned $47.5 million in its opening weekend, the 13th-highest domestic grossing bow for a science-fiction film ever. As of December 3, 2014, Christopher Nolan’s soaring space drama has grossed over $500 million worldwide.
AvatarLabs is an award-winning, full-service digital agency founded in 2001 that leads in innovation, design and technology for Fortune 500 corporate brands and the world’s top entertainment companies. Its expertise includes global digital marketing strategy, websites, online advertising, social media solutions, viral marketing, mobile solutions, games, video content production and motion graphics. The agency has created some of the most innovative digital campaigns for some of the biggest entertainment and consumer brands in the world, including six of the top ten highest grossing films of all time. For more information, please visit avatarlabs.com.