Chaque pièce 3D de nos remakes Then & now a commencé sa vie sous forme de fichier Python. Superman, Batman, Wolverine, Spider-Man, Iron Man, Hulk, R2-D2 et la Game & Watch sont chacun construits par un script qui pilote Blender, exporte un modèle et le confie à une page qui l’éclaire en direct avec three.js. Rien n’a été sculpté à la souris.
Ça ressemble à un tour de magie. C’est en fait la décision la plus pratique du projet.
Pourquoi construire la 3D en code
Un modèle fait à la main est un objet fini. Un modèle fait par un script est une recette, et une recette se modifie. Quand le retour sur Hulk a été "ses poings ressemblent à des gants", nous n’avons pas rouvert un fichier pour déplacer des sommets ; nous avons changé la façon dont le poing était construit et relancé le script. Quand les avant-bras étaient trop courts, ou qu’une cape devait tomber sur les épaules plutôt que derrière, il suffisait de quelques lignes, et tout le modèle se reconstruisait en quelques minutes.
Cela veut aussi dire que chaque pièce est reproductible. Les scripts vivent dans le dépôt à côté du site, et une boîte à outils partagée gère ce dont chaque buste a besoin : le torse, le socle, la mise en couleur et l’export.
Les visages sont difficiles, alors nous ne sommes pas partis de rien
Nos premières têtes étaient construites à partir de primitives déformées par des calculs. On y voyait des têtes, mais pas des personnes. Les visages sont l’endroit où l’œil pardonne le moins, et aucun bruit astucieux ne corrige un nez un peu trop long.
Nous avons donc changé d’approche. Blender Studio publie un ensemble de maillages humains de base sous licence CC0, libres d’utilisation pour tous. Nous partons désormais de cette tête réaliste pour chaque visage et la remodelons par script : une arcade plus lourde et une mâchoire plus large pour Hulk, une mâchoire carrée et un menton fendu pour Superman, un rictus pour Wolverine. Les mains viennent du même ensemble, posées par script en une prise, une paume ouverte ou un poing.
Les petits détails qui ont pris le plus de temps
Quelques leçons que nous transmettrions à quiconque fait la même chose :
- Étanche ou rien. Remailler des pièces ensemble puis réduire le résultat pour alléger le fichier peut replier la surface sur elle-même, et les plis s’affichent comme des trous sombres. Notre build refuse désormais de se terminer si un modèle n’est pas une surface fermée et valide.
- Un matériau par maillage. L’exportateur glTF de Blender ne conserve les couleurs de sommets que sur le premier matériau d’un maillage, chaque partie peinte est donc un maillage à part.
- Bouche fermée jusqu’au besoin. Hulk et Wolverine gardent les lèvres closes au repos ; le rugissement et le rictus sont des changements de forme qui ne se jouent que pendant que vous maintenez, les dents restant cachées jusqu’à l’ouverture de la bouche.
- Versionner chaque modèle. Les navigateurs mettent les modèles en cache de façon agressive, chaque fichier est donc chargé avec une étiquette de version qui change quand le modèle change.
La lumière fait la moitié du modèle
Sur la page, chaque pièce est éclairée en temps réel avec three.js. Iron Man et Superman ajoutent du bloom, un effet de lueur pour les yeux, le réacteur ARK, le répulseur et la vision thermique. Il a fallu des réglages. Notre premier Iron Man brillait tellement que le casque disparaissait : le bloom démarre désormais faible et ne s’ouvre que lorsque vous chargez un tir.
Chaque pièce a aussi sa propre scène : un toit de Gotham sous la pluie, le crépuscule sur New York, les soleils jumeaux de Tatooine, un bureau en noyer pour les consoles portables.
Garder la vitesse
La 3D devient vite lente. Quelques règles gardent la nôtre utilisable sur téléphone :
- Les modèles se chargent une fois la page au repos, jamais avant le texte.
- Les scènes sont construites une par une, par petits morceaux, pour que la page ne se fige jamais pendant la préparation des graphismes.
- La préparation graphique tourne en arrière-plan avant que la première image ne s’affiche.
- Les machines sans puce graphique utilisable reçoivent une image fixe plutôt qu’une page bloquée.
L’étagère de musée en haut de Then & now montre les huit pièces à la fois, elle utilise donc des versions allégées de chaque modèle : décimées, compressées et chargées seulement quand il le faut.
Et ensuite
Les techniques derrière ces bustes se transposent directement au travail client : configurateurs de produits, explications interactives, moments forts qui se chargent vite et réagissent au toucher. Les construire en code permet de les faire évoluer aussi vite que le produit qu’ils accompagnent.
En attendant, allez mettre Hulk en colère.