Loading ...

Responses by Aurelien Vigne.

Background: The main creative direction I took from the beginning of the project was to immerse the visitor in the story of the Apollo missions like the user would live the experience in real time. Inspired by the video game and film industries, I tried to bring users closer to each step of the Apollo missions through a series of minigames that follow each other through an ongoing story, such as going through each of the steps that astronauts took to go to the Moon. Each game is playful and essential to the immersive experience but also includes historical accuracy and a bit of education through the use of iconic pictures taken during the Apollo missions.

Design core: Three minigames retrace the most epic steps of the Apollo missions: the liftoff, the landing of the lunar module on the Moon and exploration with the Lunar Roving Vehicle. I designed the games to be easy to understand and to play, deploying a trial-and-error logic to avoid boring tutorials before each game; that way, users would be immersed from the moment they landed on the website until the end.

I also designed two interactive photo galleries that appear after the liftoff and landing minigames, the first featuring pictures from the Saturn V launch to space and the second featuring the mind-blowing pictures astronauts took during their exploration of the Moon. To keep it interactive and a bit playful, I coded the first photo gallery as though the pictures were Polaroid photos floating in space around the Earth and the second photo gallery as though they were on the Moon.

The creative direction for the UI is also a fundamentally important feature of the experience. While the overall UI design is minimalist, you can see the blend of styles throughout the website once you become familiar with it. For example, some elements typically use a retro-style design—such as the old TV set at the beginning of the experience, the warnings in the games or the menu inspired by the NASA Mission Control flight-path dashboard in 1969—but there are also more modern elements inspired by science fiction, such as the typography or the buttons’ design.

I followed the same strategy for the audio and music as well, combining actual recordings from the Apollo missions with a set of inspirational, space-ish synthwave background music.

Favorite details: I am quite proud of the smoke and fire shader I coded on The Leap For Mankind, particularly the soft particles that appear especially during the liftoff. This coding technique is quite common in the video game industry but can be challenging to implement on the web. The idea behind the particles is that, in 3-D, they are cropped when they hit a surface; the smoke will be brutally cut when it gets closer to surfaces like the floor or the landing pad, making it look unrealistic and buggy. The trick is gradually reducing the texture’s opacity and smoothly when it gets close to another surface.

Other details I enjoyed designing and coding at the page transitions and intro animations. I drew inspiration from the movie industry to create theatrical, seamless transitions. My favorite is the transition from the “Landing” to the “First Steps” gallery page: right after the Lunar Module lands, the camera comes closer to the module and then rotates to the pitch-black sky. In the next scene, the camera rotates back from the sky to the module, then flies above the surface of the Moon as a drone would.

Challenges: Design-wise, I encountered a few challenges that needed to be solved. The main one was the navigation and architecture itself. I wanted to combine interactive games and immersive educational sections into a seamless experience, but this is not really a standard on the web or in game design. I studied and created a few prototypes until I found one that fit the immersive, interactive story I wanted to bring to users.

On the technical side, I also encountered challenges. For instance, 3-D on the web has become popular over the last five years thanks to huge improvements in device performance and internet connection. However, it still tends to be heavy on machines. I was able to add almost all of the features and details I planned for the experience, but some of my wilder ideas could not be included because it was too intensive for the user’s devices.

Furthermore, this is a side project that I completed on my own. I am passionate about this field; I explore and experiment with coding, design and modeling for fun during my free time. On the one hand, building The Leap For Mankind proved to be an interesting personal challenge. However, doing everything on my own meant that it would be challenging to deliver this project within a proper timeline; I needed to find enough time between my full-time job, freelance gigs, and time spent with my friends and family.

Technology: I used Blender to design all the 3-D models, such as the Saturn V rocket, the Lunar Roving Vehicle, the Lunar Modules and the launch pad. I then imported the models to my scenes as compressed glTFs.

I also used Blender to create heat maps of the Moon. A heat map is a square image in which software converts 3-D coordinates into a range of gray colors. A black pixel means a coordinate is high, such as a hill, and a white pixel is somewhere low, such as the bottom of a crater. Based on this logic, I designed the Moon’s terrain in Blender (inspired by real heat maps provided by NASA), exported it as a heat map and imported it to my website. Then, using an algorithm, I checked each pixel of the heat map and converted it into a position in a 3-D scene. Once I generated my map in 3-D, I added a normal map to create a puffy texture. I also added a mix of randomized textures to make a range of light- to dark-gray moon dust, depending on the texture’s height.

For the code, I picked Vue.js for my JavaScript framework. I switched from React to Vue.js in 2018, and since then, I have fallen in love with this framework.

To animate some of the complex UI animations and most of the 3-D animations, I used GSAP. The 3-D part of the website was coded in three.js, my favorite 3-D library. The in-game physics uses the Cannon.js engine alongside three.js. The website runs on a Node.js server hosted by Digital Ocean.


Browse Projects

Click on an image to view more from each project

With a free Commarts account, you can enjoy 50% more free content
Create an Account
Get a subscription and have unlimited access
Already a subscriber or have a Commarts account?
Sign In

Get a subscription and have unlimited access
Already a subscriber?
Sign In