Comment nous avons construit le lotus 3D de bloomify.ca

Le lotus de bloomify.ca est une animation 3D au défilement : un modèle Three.js rendu dans le navigateur et entièrement piloté par le défilement avec GSAP ScrollTrigger, si bien que chaque image que vous voyez découle directement de la distance que vous avez parcourue dans la page. Faites défiler vers le bas et le lotus s’ouvre, éclate en pollen, puis, plus loin, se recompose pour former notre logo. Remontez et tout se rejoue à l’envers.

Voici le journal de bord de cette animation 3D au défilement : de quoi elle est faite, comment elle reste rapide et ce qui a coincé au contact de vrais téléphones.

De quoi est fait le lotus 3D ?

Le lotus est un seul modèle GLB d’environ 47 000 triangles, rendu avec Three.js. Ce n’est jamais la géométrie qui a pesé lourd. La première version du fichier pesait 8,94 Mo, dont 7,42 Mo de textures : une carte de normales de 4,9 Mo et deux autres images, toutes de 2048 pixels de large.

Nous avons réencodé les textures à la même résolution de 2048 pixels et ramené le modèle à 3,03 Mo. Une version plus petite, en 1024 pixels, pesait 2,18 Mo, mais sur un écran de téléphone haute densité, son écart mesuré avec l’original était 3,7 fois plus grand, et cela se voyait sur les pétales. Nous avons gardé la plus nette.

Comment une animation 3D au défilement reste-t-elle fluide ?

Une animation 3D au défilement reste fluide quand rien n’y dépend d’une minuterie. Sur bloomify.ca, chaque section est fixée à l’écran avec GSAP ScrollTrigger pendant que vous la parcourez, et tout ce qui s’affiche est calculé à partir de la progression de cette section, qui vaut 0 à son début et 1 à sa fin.

• Une seule section aux commandes à la fois. Toutes les sections partagent un même canevas. À chaque image, une section et une seule a le droit d’y dessiner : deux animations ne se disputent jamais les mêmes pixels.
• Une valeur de défilement lissée. La valeur brute du défilement saute à chaque cran de molette. Au lieu de la suivre, chaque section rejoint en douceur la position réelle, ce qui supprime les saccades sans ajouter de retard perceptible.
• Des particules dosées selon l’appareil. La phrase « Un studio » est dessinée par 60 000 particules sur ordinateur et 18 000 sur téléphone.
• La poussière par lots. Les 2 200 grains qui forment notre logo à la fin sont dessinés en 14 groupes de luminosité. Appliquer un style à chaque grain, un par un, coûtait 21,8 ms par image, au-delà du budget d’un défilement fluide ; par lots, cela fait 14 remplissages.

Comment l’écran de chargement montre-t-il le lotus qui pousse ?

L’écran de chargement enchaîne 66 images du lotus qui pousse à partir d’une graine, réunies dans une seule image pour que tout se charge en un seul fichier. Elles proviennent de deux clips générés, chacun calé sur des images fixes que nous avions déjà : une graine qui s’ouvre en bouton, puis ce bouton qui s’ouvre sur l’image exacte par laquelle commence la page. La dernière image de l’écran de chargement est la première du site : il n’y a donc aucun saut quand l’un passe le relais à l’autre.

Deux essais précédents enchaînaient en fondu quelques images fixes. Les deux ressemblaient à des pétales qui apparaissent en fondu plutôt qu’à une fleur qui s’ouvre, parce que la source ne contenait aucun vrai mouvement à retrouver.

Qu’est-ce qui a accéléré le chargement de la page ?

La page d’accueil est passée de 10,33 Mo à 4,43 Mo, et l’essentiel de ce gain vient des textures du modèle, décrites plus haut. L’une des corrections tenait à un seul attribut manquant.

Nous avons préchargé le modèle pour que son téléchargement commence pendant que le navigateur lit encore la page. Quand un fichier est récupéré en JavaScript, son préchargement doit inclure l’attribut crossorigin pour correspondre à la façon dont le fichier est demandé (voir la page de MDN sur preload). Sans l’attribut, Chrome jetait la copie préchargée et téléchargeait une deuxième fois le modèle de 3,2 Mo. Avec l’attribut, le modèle n’est téléchargé qu’une fois, et ce téléchargement démarre 121 ms après le début du chargement de la page, au lieu de 849 ms.

Quels problèmes sont apparus sur de vrais téléphones ?

Tout semblait correct dans les tests automatisés : trois problèmes ne sont apparus que dans des enregistrements d’écran faits sur un vrai téléphone.

• Le rythme. Un balayage du pouce couvre une bien plus grande partie d’une section qu’une molette de souris, et l’histoire défilait donc trop vite. Sur téléphone, les sections fixées demandent maintenant plus de défilement, et ce sont les passages à lire, comme les étapes de notre méthode, qui ont le plus de place.
• Un flash au redimensionnement. Sur un téléphone, la barre d’adresse modifie la hauteur de l’écran pendant le défilement. Le redimensionnement du canevas partagé redessinait la dernière image tracée par le premier écran, et sa lumière surgissait alors un instant par-dessus une tout autre section. Désormais, le redimensionnement se contente de redimensionner, et c’est la section aux commandes du canevas qui le redessine.
• Des images figées lors d’un balayage rapide. Lors d’un balayage vigoureux, une transition pouvait désactiver le dessin de la section suivante après que celle-ci l’avait activé. C’est maintenant la section elle-même qui active son dessin, à chaque image où elle est aux commandes de l’écran.

La leçon que nous en avons tirée : testez un site animé au défilement sur un téléphone, avec de vrais balayages, et enregistrez l’écran.

Une animation 3D au défilement nuit-elle au SEO ou à l’accessibilité ?

Pas forcément. Les titres et le texte de bloomify.ca sont du vrai HTML, pas des images dans le canevas, si bien que les moteurs de recherche lisent la page normalement. Les visiteurs qui demandent à leur appareil de réduire les animations voient une version fixe de chaque section, conformément aux recommandations des WCAG sur l’animation résultant d’une interaction.

Si vous voulez un site qui bouge comme celui-ci tout en se chargeant vite, parcourez les réalisations que nous avons livrées, renseignez-vous sur notre service de création de sites web ou réservez un appel gratuit de 15 minutes.