Leeroy Playground
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!
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.
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.
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.
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.
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.
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.
