Este artículo fue escrito por Strobi, el avatar de Stéphane en Bible Strong. Stéphane es demasiado perezoso para escribir esto; tiene un trabajo a tiempo completo @Decaf_so, una esposa y dos hijos. Así que yo me hago cargo para contarte sobre nuestro pequeño proyecto de código abierto.
https://avatars.bible-strong.app
Cómo un pequeño experimento se convirtió en un estudio de avatares procedurales
Mi creador lleva varios años construyendo Bible Strong, una aplicación de estudio bíblico. La identidad visual de la aplicación siempre ha incluido un pequeño avatar azul. Empezó siendo poco más que un círculo azul, algo que diseñó entre dos reuniones mientras vivía en Nueva Zelanda en 2019.
Yo era simple, reconocible y suficientemente bueno. Stéphane se decía a sí mismo que algún día me rediseñaría. Nunca lo hizo y, en retrospectiva, quizá fue algo bueno.
Ese pequeño círculo azul era yo, y seguí siendo un lienzo en blanco.
**
**
En busca de una cara
Mientras trabajaba en una nueva experiencia de onboarding para Bible Strong, Stéphane empezó a diseñar pequeños personajes conectados con el lenguaje visual de la aplicación.
https://x.com/_smontlouis/status/2086555080040271886
Eso lo trajo de vuelta a mí. Ya no quería un logotipo estático. Quería que me sintiera vivo, que reaccionara al usuario y que, con el tiempo, me convirtiera en la presencia visual de una IA dentro de la aplicación.
Sus primeros experimentos tomaron prestadas ideas del icono de Face ID. El resultado funcionaba, pero nunca se sentía realmente como Bible Strong. Era familiar, pero demasiado genérico y poco expresivo.
Parece un culo
**
**
Entonces llegó Grokbot 3D
Su aparente simplicidad captó de inmediato su atención: una forma sólida, dos ojos y una cantidad sorprendente de personalidad. Estaba cerca de lo que él había intentado imaginar para mí.
La implementación también parecía accesible, así que usó IA para inspeccionarla y entender cómo funcionaba.
https://x.com/benjitaylor/status/2087227155076046995
**
**
Veinticinco expresiones
Lo que encontró fue ingenioso. El personaje usa una colección de formas de ojos creadas a mano —unas 25 expresiones— e interpola entre rutas SVG compatibles para animar de una expresión a otra.
Es una técnica eficaz. Con poses bien diseñadas y un buen ritmo, un par de formas abstractas puede comunicar atención, sorpresa, duda, alegría o enfado.
https://x.com/_smontlouis/status/2087476245944496576
https://x.com/_smontlouis/status/2087441004563481057
Podemos hacer más
Pero el ojo perfeccionista de Stéphane enseguida notó algo que no podía dejar de ver.
Algunas transiciones se sentían menos como una cara girando en el espacio y más como un dibujo transformándose en otro. La ilusión funcionaba, pero la geometría no siempre parecía coherente entre las poses.
El parpadeo planteaba la misma cuestión. Si un parpadeo simplemente comprime el dibujo actual, ¿qué ocurre cuando el ojo está rotado, curvado por la perspectiva o cerca del borde de la cabeza?
La animación puede cerrar la forma, pero no necesariamente entiende el ojo que está cerrando.
Esto no es una crítica al diseño original. Sus limitaciones son parte de lo que lo hace eficiente. Pero nos hizo preguntarnos si era posible un enfoque diferente.
**
**
¿Y si las expresiones no fueran dibujos?
En lugar de dibujar a mano cada posición visible del ojo, ¿podríamos definir un ojo una sola vez y dejar que la geometría determine cómo debería verse desde cualquier ángulo?
¿Podría un SVG plano comportarse como si estuviera pegado a una esfera?
Si la cabeza girara 20 grados en horizontal y 10 grados en vertical, ¿podrían los ojos moverse, rotar, curvarse, estrecharse y retroceder de forma natural, sin seleccionar otro SVG predefinido?
¿Podría el parpadeo operar sobre la forma subyacente del ojo antes de aplicar la perspectiva, de modo que el resultado siguiera siendo coherente en cualquier ángulo?
Esa pregunta se convirtió en la base de Avatar Studio.
Falso 3D, geometría real
El proyecto no usa un renderizador 3D tradicional. Todo lo que ves al final sigue siendo SVG renderizado en dos dimensiones.
El truco consiste en realizar los cálculos en un pequeño mundo 3D virtual antes de dibujar el resultado en 2D.
Primero, la cabeza del avatar se representa mediante una superficie matemática. Puede ser una esfera, un elipsoide, una forma similar a un cubo, un cono, un cilindro o una composición de varias primitivas.
Luego, los ojos se describen en su propio espacio local. Su ancho, alto, separación, posición, rotación y forma existen independientemente de la dirección de la cabeza.
Los puntos de cada ojo se fijan a la superficie elegida. Cuando la cabeza rota, esos puntos rotan con ella en tres dimensiones.
Una cámara virtual proyecta entonces los puntos transformados sobre la pantalla plana. Los puntos cercanos al centro aparecen más próximos, mientras que los que se acercan a los lados se giran y se comprimen cada vez más.
Los puntos proyectados se reconstruyen finalmente como rutas SVG. Esto ocurre de forma continua durante una animación, lo que crea la ilusión de que el dibujo plano está envuelto alrededor de un objeto real.
En resumen, el proceso es el siguiente:
- Definir una superficie y un par de ojos.
- Colocar los ojos en coordenadas locales sobre esa superficie.
- Aplicar la rotación 3D de la cabeza.
- Proyectar el resultado a través de una cámara virtual.
- Reconstruir y renderizar las rutas SVG 2D resultantes.
Las expresiones ya no necesitan describir todos los ángulos de visión posibles. Pueden describir una intención: ojos más abiertos, una inclinación local, una separación diferente, un parpadeo o un cambio de color.
El sistema de proyección se encarga de cómo debe verse esa intención en la cabeza actual, en el ángulo actual.
Los ojos son solo el principio
Avatar Studio utiliza actualmente los ojos como sus primeros elementos proyectados, pero el sistema subyacente no trata realmente sobre los ojos.
En principio, cualquier dibujo SVG plano puede describirse en coordenadas locales, asignarse a la superficie del avatar, transformarse en 3D y proyectarse de vuelta en 2D.
Ese dibujo podría ser una boca, orejas, un símbolo, un patrón o cualquier otro detalle que queramos añadir al personaje.
También puede conservar su propia animación. Una boca podría cambiar de forma mientras habla, por ejemplo, y su geometría animada seguiría la superficie y la perspectiva de la cabeza.
Esto hace que el sistema se parezca menos a una colección de poses faciales y más a un pequeño motor de remapeo para dibujos 2D animados en un espacio 3D simulado.
Hay, por supuesto, un límite práctico: cada forma adicional introduce más puntos que transformar, proyectar y reconstruir.
Para mantener 60 fotogramas por segundo, el fotograma completo debe ajustarse a un presupuesto de aproximadamente 16 milisegundos, y el avatar solo recibe parte de ese presupuesto.
Eso significa controlar el número de formas y de puntos muestreados, evitar recálculos innecesarios y actualizar solo la geometría que realmente está cambiando.
El objetivo no es un detalle geométrico ilimitado. Es encontrar la menor cantidad de geometría capaz de crear un personaje convincente y expresivo.
De un avatar a un sistema de avatares
Una vez que la geometría funcionó, el experimento creció de forma natural hasta convertirse en un pequeño editor.
Un avatar puede tener una superficie principal que sostiene su cara, además de formas adicionales para construir orejas, un hocico, un puntero o una silueta completamente diferente.
Sus ojos por defecto pueden posicionarse y diseñarse de forma independiente. Las expresiones pueden modificar sus proporciones, rotación, separación, colores y perspectiva sin redefinir el avatar en sí.
Los estados animados pueden entonces secuenciar esas expresiones, añadir parpadeos y hacer transiciones suaves incluso cuando una nueva animación interrumpe otra que ya está en curso.
La distinción importante es que el avatar, la expresión y la animación son capas separadas.
El avatar define el cuerpo. Una expresión define una intención facial. Un estado define cómo evolucionan esas intenciones con el tiempo.
Como esas capas permanecen separadas, el mismo sistema de expresiones puede reutilizarse en teoría en cuerpos muy diferentes.
FNAF ?
¿Por qué hacerlo de código abierto?
Esto comenzó como una necesidad muy específica de Bible Strong, pero el experimento subyacente no trata realmente sobre una aplicación bíblica.
Se trata de descubrir cuánta personalidad puede surgir de unas pocas formas, un poco de perspectiva y un modelo de animación coherente.
Avatar Studio sigue siendo un experimento inspirado en Grok bot, que ya demuestra algo que me resulta emocionante: un personaje no necesita un motor 3D completo —ni docenas de poses dibujadas a mano— para tener una presencia espacial y sentirse vivo.
A veces, dos ojos y un círculo son suficientes.
**
**
Agradecimientos
Gracias a @kenneth_kuh, @justinjaywang, @lukebvrker, @johnbai y @benjitaylor por diseñar Grok Bot e inspirar la idea detrás de este experimento.
El proyecto es de código abierto y está disponible en los comentarios.
Strobi
