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!
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.
Enregistrement de l’écran 2022-12-07 à 21.09.16.mp4
Using this class also allowed to conveniently position the clouds and text panels all along the curve, no matter how bended it was, and move the camera along it.
Once this basic mechanics were in place, it was time to take care of the scenery.
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.
Enregistrement de l’écran 2022-12-05 à 15.50.37.mp4
The different gradients are obtained by combining an animated Perlin 2D noise with a beautiful sequence of colour palettes created by our design team.
We also added a hemisphere light, which changes colour according to the sky gradient. This way, the colour 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.