Comment j'ai construit le studio 3D de ce site

Le studio, c'est la vue par défaut du site sur ordinateur. Les projets sont posés sur leurs appareils, dans une scène en trois dimensions qu'on survole et qu'on ouvre. Voici comment il est fait, et surtout ce que j'ai dû changer pour qu'il tienne la route.

Une seule source de données. Chaque projet est un fichier TypeScript typé, et les trois vues du site, la liste, le bureau et le studio, ne sont que trois façons de rendre les mêmes données. Le HTML prérendu est toujours la liste. Le studio est un morceau de code chargé à part, monté par-dessus une fois que le navigateur a confirmé qu'il a un GPU, un écran assez large et pas de préférence pour le mouvement réduit.

React Three Fiber et drei font la scène. Les appareils sont des boîtes arrondies avec un écran découpé aux coins, texturé avec les vraies captures des apps. Le détail qui rend le focus possible, c'est que les proportions des appareils 3D sont exactement celles des cadres DOM des simulateurs. À chaque image, la caméra projette les quatre coins de l'écran 3D en pixels CSS, et le simulateur HTML vient se poser dessus. On ne regarde plus une texture, on manipule le vrai simulateur.

Le sol est une petite planète. Un champ de hauteur est calculé au chargement, avec des cratères et leur rebord, et j'en tire une carte de couleur et une carte de normales pour que la lumière modèle vraiment le relief. Le plan reste plat sous les appareils et bascule au-delà d'une ellipse, ce qui donne un horizon courbe. J'ai fait le calcul avant de coder. Vu d'un point bas, l'horizon d'une vraie sphère se projette presque droit, quelle que soit sa taille. La rondeur visible ne peut venir que d'un sol qui tombe.

Les étoiles m'ont coûté une soirée. Le composant tout fait que j'utilisais projette ses points avec une composante homogène de 0,5, ce qui décale leur profondeur et, avec un plan lointain à 60 unités, coupe toute étoile à plus de 30. Le ciel restait presque vide sans que rien ne plante. Je les dessine maintenant moi-même, neuf mille points sur ordinateur, tirés de façon déterministe, en trois blancs, chacun avec son scintillement.

Ce que j'ai retiré compte autant que ce que j'ai ajouté. Le compositeur d'effets, pour le bloom et la vignette, allouait un tampon multi-échantillonné en demi-flottants à la résolution Retina, près de 300 Mo sur un grand écran, et faisait ramer la scène. La vignette est devenue un dégradé CSS, le bloom a disparu, et un budget de sept millions de pixels par image plafonne le pixel ratio sur les très grands écrans.

Sans vrai GPU, pas de studio. Les navigateurs sans carte graphique, les machines virtuelles et Lighthouse obtiennent un WebGL logiciel qui met la scène à genoux. La sonde demande le contexte avec failIfMajorPerformanceCaveat, qui refuse tout de suite un rendu logiciel, et dans ce cas le site recommande le bureau. Le mouvement réduit, lui, ne retire pas le studio, il le calme, sans entrée chorégraphiée, sans flottement, sans parallaxe.

Sur téléphone, on marche. La caméra cadre un groupe de projets à la fois et se déplace le long du sol au doigt, avec un arrêt par projet. Un toucher ouvre l'appareil dans une feuille en bas de l'écran. Et si on ne touche à rien pendant vingt secondes sur ordinateur, le studio se visite tout seul, un groupe après l'autre, jusqu'au premier geste.