Learn to fly with Atmos

Leeroy Playground

WEBGL, MOTION DESIGN, CREATIVE DEVELOPMENT, STORYTELLING

As creatives, we’re lucky to have the Leeroy Lab, where we can get a bit crazy and experiment on
things that inspire us technically or visually.

As a part of this lab, we wanted to bring storytelling into an immersive 3D experience. It needed to be engaging, but also quick to produce. That’s why we

opted for a minimalist environment: a plane in the sky. ATMOS was born!

Play

FOLLOWING A PATH

Telling a story is almost always like walking along a line. That’s why we wanted to visually display a
line guiding the user from the start to the end.

We used the Catmull-Rom algorithm to create a smooth spline curve. Since it was created programmatically, we were able to make it a little bit different each

time you load the experience.

Using this class also allowed us to conveniently position the clouds and text panels all along the curve, no matter how bent it was, and move the camera

along it. Once these basic mechanics were in place, it was time to take care of the scenery.

SETTING THE STAGE

The sky is actually a sphere, facing inwards, coloured using a shader material. As the user scrolls, the
sky sphere moves with the camera so that it never leaves the frame.

The different gradients are obtained by combining an animated Perlin 2D noise with a beautiful sequence of color palettes created by our design team. We

also added a hemisphere light, which changes color according to the sky gradient. This way, the color of the plane and clouds always match the sky.

Smooth, bubbly clouds

Speaking of the clouds, we wanted to make them as round as possible! Not only the normals, but the silhouette also needed to be super smooth. Using low

poly or 2d clouds wasn’t an option to achieve the look we had in mind, so we made two high poly models and then used DRACO compression to lower their

file size.

That’s quite a lot of vertices, but since the whole experience was so minimalistic otherwise, we could afford it. Those clouds are not just part of the decor,

they basically are the entire decor, so it wasn’t the time to be cheap!

We then duplicated these two models throughout the whole experience while only changing their transform attributes (scale, position, rotation) to trick the

user into thinking there were multiple models of clouds.

Making this project was not only fun, it was a humble statement of what we are, love, and aim to
accomplish. By the way, did you spot the elephant? It’s positioned at one of several predefined
locations on each load!

Complementary infos

Development

This experience was made with the help of Three.js, Blender, GSAP, and virtual-scroll-handler. Three.js is the main WebGL framework on the market. But it’s

also way more than just a rendering engine, as it also offers a ton of useful features, including a lot of math functions we relied on to make Atmos.

3D creation

Blender is a free 3D software which popularity has exploded in recent years. We used it to make the clouds and the plane. GSAP is an awesome general

purpose animation library. virtual-scroll-handler is a custom library we used to handle scroll events without having to actually scroll the DOM.

Displaying text in 3D

WebGL experiences often use HTML to display text, but we wanted to make it more immersive than just superimposing HTML over a WebGL canvas. So we

used Troika to take care of the font rendering. To make sure text blocks remained visible for all users regardless of their window ratio, we needed to adjust

the position and rotation of the camera depending on the user’s screen ratio.

Next project

Immerse yourself in a unique, immersive experience

Scavengers