Lockheed Martin wanted ISL, my then employer, to build a magical experience for kids, a schoolbus that would seem to transport them to Mars. An incredibly talented cross functional team of hardware & software engineers, industrial & experience designers, came together to collaborate on this massive undertaking. My role was to build a website to showcase the wonder of Lockheed Martin's impressive space program: Generation Beyond.

The client wanted to capture the imagination immediately upon entering the site, so I created an animated landing page with Greensock's indispendible TimelineMax. The core of this multistep animation is a twinkling backdrop of stars created without the aid of any libraries, just the HTML5 Canvas API. The impression of 3d is created while flying through stars, but there's not actually any 3d math involved, just animating and scaling the stars from the center of the screen. At the end of the intro animation, the main navigation drops into place with a nice staggered effect, reinforcing the impression of space-age crispness.

We wanted to showcase the Orion spacecraft and interesting features of mars in 3d, and we chose to use Unity, best known as a game engine for computers, consoles and mobile. We wanted to get a feel for how Unity performed in WebGL on the web, and we learned a lot of great lessons along the way. The primary developer on the Unity side, Rodrigo Thauby, and I had the thought to build the UI in HTML & CSS. This let our designers design for a context they're familiar with, and simplified UI development for our more web oriented team. Rodrigo ingeniously communicated between the web page UI and the Unity canvas with an API exposed by Unity to mostly send loading progress information to the browser.

Ultimately we would have been better served to use a technology like Three.js, having realized too late that Unity doesn't support mobile browsers, neccessitating a separate mobile site, which was much less impressive than on desktops. Three.js would have minimized complexity while still offering up impressive visuals. Still, the lessons learned by this experiment with Unity served ISL, Rodrigo and myself well; we now understand the strengths and weaknesses of Unity on the web far better than we did before.

Despite difficult circumstances and many sleepless nights, the project as a whole was immensely successful. The physical Mars Bus build garnered some wonderful plaudits, and was feautred in AdWeek, Engaget, and DigitalTrends.com to name a few. The website received more than 2.2 million impressions. Add to that number and check it out at Generation-Beyond.com.