Playground Leeroy
Dans le cadre de cette expérimentation, nous souhaitons intégrer un récit dans le cadre d’une expérience immersive en 3D. Il devait être engageant, mais aussi rapide à produire. C'est pourquoi nous avons opté pour un environnement minimaliste : un plan dans le ciel. Ainsi, ATMOS est né !
L'algorithme Catmull-Rom a été utilisé pour créer une courbe lisse. Étant donné qu'elle a été créée de manière programmatique, nous avons pu la rendre un peu différente à chaque fois que vous chargez l'expérience.
L'utilisation de cette classe nous a également permis de positionner commodément les nuages et les panneaux de texte tout le long de la courbe, peu importe sa cambrure et de déplacer la caméra le long de celle-ci. Une fois ces mécanismes de base en place, il était temps de s'occuper du décor.
Les différents dégradés sont obtenus en combinant une animation Perlin 2D combiné à une belle séquence de palettes de couleurs créées par notre équipe de design. Nous avons également ajouté une lumière hémisphérique, qui change de couleur en fonction du dégradé du ciel. De cette façon, la couleur de l'avion et des nuages correspond toujours au ciel.
Parlant des nuages, nous voulions les rendre aussi ronds que possible! Non seulement au niveau du style, mais aussi de la silhouette que l’on désirait très lisse. Utiliser des nuages basse résolution ou en 2D n'était pas une option pour obtenir l'aspect souhaité. Nous avons donc créé deux modèles haute résolution, puis utilisé la compression DRACO pour réduire leur taille de fichier.
Cela fait beaucoup de variations au niveau des courbes, mais comme toute l'expérience était minimaliste, nous pouvions nous le permettre. Ces nuages ne sont pas seulement une partie du décor, ils sont essentiellement tout le décor, donc l’investissement de temps en valait la peine.
Nous avons ensuite dupliqué ces deux modèles tout au long de l'expérience en ne changeant que leurs attributs de transformation (échelle, position, rotation) pour tromper l'utilisateur en pensant qu'il y avait plusieurs modèles de nuages.
Cette expérience a été réalisée avec l'aide de Three.js, Blender, GSAP et virtual-scroll-handler. Three.js est le principal framework WebGL sur le marché. Mais c'est aussi bien plus qu'un simple moteur de rendu, car il offre également une tonne de fonctionnalités utiles, y compris de nombreuses fonctions mathématiques sur lesquelles nous avons compté pour créer ATMOS.
Blender est un logiciel 3D gratuit dont la popularité a explosé ces dernières années. Nous l'avons utilisé pour créer les nuages et l'avion. GSAP est une excellente bibliothèque d'animation à usage général. Virtual-scroll-handler est une bibliothèque personnalisée que nous avons utilisée pour gérer les événements de défilement sans avoir à faire défiler réellement le DOM.
Les expériences WebGL utilisent souvent HTML pour afficher du texte, mais nous voulions le rendre plus immersif que simplement superposer HTML sur un canevas WebGL. Nous avons donc utilisé Troika pour prendre en charge le rendu de police. Pour nous assurer que les blocs de texte restaient visibles pour tous les utilisateurs quel que soit le ratio de leur fenêtre, nous devions ajuster la position et la rotation de la caméra en fonction du ratio d'écran de l'utilisateur.
