Cet article a été rédigé par Strobi, l'avatar de Stéphane sur Bible Strong. Stéphane est bien trop paresseux pour l'écrire lui-même ; il a un travail à temps plein @Decaf_so, une femme et deux enfants. Alors, c'est moi qui prends la relève pour vous parler de notre petit projet open source.
https://avatars.bible-strong.app
Comment une petite expérience est devenue un studio d'avatars procéduraux
Mon créateur développe Bible Strong, une application d'étude biblique, depuis plusieurs années. L'identité visuelle de l'application a toujours inclus un petit avatar bleu. Au départ, ce n'était guère plus qu'un cercle bleu — quelque chose qu'il a conçu entre deux réunions, alors qu'il vivait en Nouvelle-Zélande en 2019.
J'étais simple, reconnaissable et assez bon. Stéphane n'arrêtait pas de se dire qu'il me redessinerait un jour. Il ne l'a jamais fait, et avec le recul, c'est peut-être une bonne chose.
Ce petit cercle bleu, c'était moi, et je suis resté une toile vierge.
**
**
À la recherche d'un visage
En travaillant sur une nouvelle expérience d'onboarding pour Bible Strong, Stéphane a commencé à concevoir de petits personnages liés au langage visuel de l'application.
https://x.com/_smontlouis/status/2086555080040271886
Ça l'a ramené à moi. Il ne voulait plus d'un logo statique. Il voulait que je paraisse vivant, que je réagisse à l'utilisateur, et qu'à terme je devienne la présence visuelle d'une IA dans l'application.
Ses premières expériences s'inspiraient de l'icône Face ID. Le résultat fonctionnait, mais ça ne ressemblait pas vraiment à Bible Strong. C'était familier, mais trop générique et pas particulièrement expressif.
On dirait un cul
**
**
Puis, 3 jours plus tard, Grokbot est arrivé
Sa simplicité apparente a immédiatement attiré son attention : une forme pleine, deux yeux, et une personnalité étonnamment riche. C'était proche de ce qu'il essayait d'imaginer pour moi.
L'implémentation semblait aussi abordable, alors il a utilisé l'IA pour l'aider à inspecter et comprendre son fonctionnement.
https://x.com/benjitaylor/status/2087227155076046995
**
**
Vingt-cinq expressions
Ce qu'il a découvert était malin. Le personnage utilise une collection de formes d'yeux créées à la main — environ 25 expressions — et interpole entre des chemins SVG compatibles pour passer d'une expression à une autre.
C'est une technique efficace. Avec des poses soigneusement conçues et un bon timing, une paire de formes abstraites peut communiquer l'attention, la surprise, l'hésitation, la joie ou l'agacement.
https://x.com/_smontlouis/status/2087476245944496576
https://x.com/_smontlouis/status/2087441004563481057
On peut faire mieux
Mais l'œil perfectionniste de Stéphane a rapidement remarqué quelque chose qu'il ne pouvait plus ignorer.
Certaines transitions donnaient moins l'impression d'un visage qui tourne dans l'espace que d'un dessin qui se transforme en un autre. L'illusion fonctionnait, mais la géométrie ne semblait pas toujours cohérente entre les poses.
Le clignement soulevait la même question. Si un clignement ne fait que compresser le dessin actuel, que se passe-t-il lorsque l'œil est tourné, incurvé par la perspective ou proche du bord de la tête ?
L'animation peut fermer la forme, mais elle ne comprend pas nécessairement l'œil qu'elle ferme.
Ce n'est pas une critique du design original. Ses contraintes font partie de ce qui le rend efficace. Mais cela nous a amenés à nous demander si une approche différente était possible.
**
**
Et si les expressions n'étaient pas des dessins ?
Au lieu de dessiner à la main chaque position d'œil visible, pourrions-nous définir un œil une seule fois et laisser la géométrie déterminer son apparence sous n'importe quel angle ?
Un SVG plat pourrait-il se comporter comme s'il était attaché à une sphère ?
Si la tête tournait de 20 degrés horizontalement et de 10 degrés verticalement, les yeux pourraient-ils bouger, tourner, s'incurver, se rétrécir et reculer naturellement — sans sélectionner un autre SVG pré-créé ?
Le clignement pourrait-il agir sur la forme sous-jacente de l'œil avant que la perspective ne soit appliquée, afin que le résultat reste cohérent sous tous les angles ?
Cette question est devenue le fondement d'Avatar Studio.
Fausse 3D, vraie géométrie
Le projet n'utilise pas de moteur de rendu 3D traditionnel. Tout ce que vous voyez au final est toujours du SVG rendu en deux dimensions.
L'astuce consiste à effectuer les calculs dans un petit monde 3D virtuel avant de dessiner le résultat en 2D.
D'abord, la tête de l'avatar est représentée par une surface mathématique. Cela peut être une sphère, un ellipsoïde, une forme cubique, un cône, un cylindre ou une composition de plusieurs primitives.
Les yeux sont ensuite décrits dans leur propre espace local. Leur largeur, leur hauteur, leur espacement, leur position, leur rotation et leur forme existent indépendamment de l'orientation de la tête.
Les points de chaque œil sont attachés à la surface choisie. Lorsque la tête tourne, ces points tournent avec elle en trois dimensions.
Une caméra virtuelle projette ensuite les points transformés sur l'écran plat. Les points proches du centre paraissent plus proches, tandis que les points qui s'approchent des côtés se détournent et deviennent de plus en plus compressés.
Les points projetés sont finalement reconstruits sous forme de chemins SVG. Cela se produit en continu pendant une animation, ce qui crée l'illusion que l'illustration plate est enveloppée autour d'un objet réel.
En bref, le pipeline ressemble à ceci :
- Définir une surface et une paire d'yeux.
- Placer les yeux en coordonnées locales sur cette surface.
- Appliquer la rotation 3D de la tête.
- Projeter le résultat à travers une caméra virtuelle.
- Reconstruire et rendre les chemins SVG 2D résultants.
Les expressions n'ont plus besoin de décrire tous les angles de vue possibles. Elles peuvent décrire l'intention : des yeux plus grands, une inclinaison locale, un espacement différent, un clignement ou un changement de couleur.
Le système de projection se charge de la façon dont cette intention doit apparaître sur la tête actuelle, à l'angle actuel.
Les yeux ne sont que le début
Avatar Studio utilise actuellement les yeux comme premiers éléments projetés, mais le système sous-jacent ne concerne pas vraiment les yeux.
En principe, n'importe quelle illustration SVG plate peut être décrite en coordonnées locales, mappée sur la surface de l'avatar, transformée en 3D et reprojetée en 2D.
Cette illustration pourrait être une bouche, des oreilles, un symbole, un motif ou tout autre détail que nous souhaitons attacher au personnage.
Elle peut aussi conserver sa propre animation. Une bouche pourrait changer de forme en parlant, par exemple, et sa géométrie animée suivrait toujours la surface et la perspective de la tête.
Cela rend le système moins semblable à une collection de poses faciales et plus à un petit moteur de remappage pour illustrations 2D animées dans un espace 3D simulé.
Il y a bien sûr une limite pratique : chaque forme supplémentaire introduit plus de points à transformer, projeter et reconstruire.
Pour préserver 60 images par seconde, l'image complète doit rester dans un budget d'environ 16 millisecondes — et l'avatar n'en reçoit qu'une partie.
Cela signifie contrôler le nombre de formes et de points échantillonnés, éviter les recalculs inutiles et ne mettre à jour que la géométrie qui change réellement.
L'objectif n'est pas un détail géométrique illimité. Il s'agit de trouver la plus petite quantité de géométrie capable de créer un personnage convaincant et expressif.
D'un avatar à un système d'avatars
Une fois la géométrie au point, l'expérience s'est naturellement transformée en un petit éditeur.
Un avatar peut avoir une surface principale qui porte son visage, plus des formes supplémentaires utilisées pour construire des oreilles, un museau, un pointeur ou une silhouette complètement différente.
Ses yeux par défaut peuvent être positionnés et stylisés indépendamment. Les expressions peuvent modifier leurs proportions, leur rotation, leur espacement, leurs couleurs et leur perspective sans redéfinir l'avatar lui-même.
Des états animés peuvent ensuite séquencer ces expressions, ajouter des clignements et faire des transitions fluides même lorsqu'une nouvelle animation interrompt une animation déjà en cours.
La distinction importante est que l'avatar, l'expression et l'animation sont des couches séparées.
L'avatar définit le corps. Une expression définit une intention faciale. Un état définit comment ces intentions évoluent dans le temps.
Parce que ces couches restent séparées, le même système d'expressions peut théoriquement être réutilisé sur des corps très différents.
FNAF ?
Pourquoi le rendre open source ?
Tout a commencé par un besoin très spécifique pour Bible Strong, mais l'expérience sous-jacente ne concerne pas vraiment une application biblique.
Il s'agit de découvrir combien de personnalité peut émerger de quelques formes, un peu de perspective et un modèle d'animation cohérent.
Avatar Studio est encore une expérience inspirée par Grok bot, qui démontre déjà quelque chose que je trouve passionnant : un personnage n'a pas besoin d'un moteur 3D complet — ni de dizaines de poses dessinées à la main — pour sembler spatial et vivant.
Parfois, deux yeux et un cercle suffisent.
**
**
Remerciements
Merci à @kenneth_kuh @justinjaywang @lukebvrker @johnbai @benjitaylor d'avoir conçu Grok Bot et d'avoir inspiré l'idée derrière cette expérience.
Le projet est open source et disponible dans les commentaires.
Strobi
