Este artículo fue escrito por Strobi, el avatar de Stéphane en Bible Strong. Stéphane es demasiado perezoso para escribirlo; tiene un trabajo de tiempo completo @Decaf_so, una esposa y dos hijos. Así que me encargo de contarles 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 ha estado construyendo Bible Strong, una app de estudio bíblico, durante varios años. La identidad visual de la app siempre ha incluido un pequeño avatar azul. Empezó como poco más que un círculo azul—algo que diseñó entre dos reuniones mientras vivía en Nueva Zelanda en 2019.
Era simple, reconocible y suficientemente bueno. Stéphane seguía diciéndose que algún día me rediseñaría. Nunca lo hizo y, en retrospectiva, quizá eso fue algo bueno.
Ese pequeño círculo azul era yo, y seguí siendo un lienzo en blanco.
**
**
Buscando una cara
Mientras trabajaba en una nueva experiencia de onboarding para Bible Strong, Stéphane comenzó a diseñar pequeños personajes conectados con el lenguaje visual de la app.
https://x.com/_smontlouis/status/2086555080040271886
Eso lo trajo de vuelta a mí. Ya no quería un logo 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 app.
Sus primeros experimentos tomaron prestadas ideas del ícono de Face ID. El resultado funcionaba, pero nunca se sintió realmente como Bible Strong. Era familiar, pero demasiado genérico y no especialmente expresivo.
Parece un trasero
**
**
Entonces, 3 días después, llegó Grokbot
Su aparente simplicidad captó de inmediato su atención: una forma sólida, dos ojos y una sorprendente cantidad de personalidad. Estaba cerca de lo que había estado tratando de imaginar para mí.
La implementación también parecía accesible, así que usó IA para ayudarse a inspeccionar y entender cómo funcionaba.
https://x.com/benjitaylor/status/2087227155076046995
**
**
Veinticinco expresiones
Lo que encontró era ingenioso. El personaje utiliza 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 efectiva. Con poses cuidadosamente diseñadas y un buen ritmo, un par de formas abstractas puede comunicar atención, sorpresa, duda, alegría o molestia.
https://x.com/_smontlouis/status/2087476245944496576
https://x.com/_smontlouis/status/2087441004563481057
Podemos hacer más
Pero el ojo perfeccionista de Stéphane notó rápidamente algo que no pudo 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 se sentía consistente entre las poses.
El parpadeo planteaba la misma pregunta. Si un parpadeo simplemente comprime el dibujo actual, ¿qué sucede 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 un enfoque diferente era posible.
**
**
¿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 determinara 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 tener que elegir otro SVG predefinido?
¿Podría el parpadeo operar sobre la forma subyacente del ojo antes de aplicar la perspectiva, de modo que el resultado se mantuviera coherente en todos los ángulos?
Esa pregunta se convirtió en la base de Avatar Studio.
3D falso, geometría real
El proyecto no usa un renderizador 3D tradicional. Todo lo que finalmente ves sigue siendo SVG renderizado en dos dimensiones.
El truco consiste en realizar los cálculos en un pequeño mundo virtual 3D 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 parecida 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 de vuelta a la pantalla plana. Los puntos cercanos al centro se ven más cerca, mientras que los que se acercan a los lados se giran y se comprimen cada vez más.
Finalmente, los puntos proyectados se reconstruyen como rutas SVG. Esto sucede continuamente durante una animación, lo que crea la ilusión de que el arte plano está envuelto alrededor de un objeto real.
En resumen, el proceso se ve así:
- Define una superficie y un par de ojos.
- Coloca los ojos en coordenadas locales sobre esa superficie.
- Aplica la rotación 3D de la cabeza.
- Proyecta el resultado a través de una cámara virtual.
- Reconstruye y renderiza las rutas SVG 2D resultantes.
Las expresiones ya no necesitan describir todos los ángulos de visión posibles. Pueden describir 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 comienzo
Avatar Studio usa actualmente los ojos como sus primeros elementos proyectados, pero el sistema subyacente no se trata realmente de ojos.
En principio, cualquier arte SVG plano puede describirse en coordenadas locales, mapearse sobre la superficie del avatar, transformarse en 3D y proyectarse de vuelta a 2D.
Ese arte podría ser una boca, orejas, un símbolo, un patrón o cualquier otro detalle que queramos adjuntar 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 arte 2D animado 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 conservar 60 fotogramas por segundo, el fotograma completo debe mantenerse dentro de un presupuesto de aproximadamente 16 milisegundos—y al avatar solo le toca una parte de ese presupuesto.
Eso significa controlar el número de formas y puntos muestreados, evitar recálculos innecesarios y actualizar solo la geometría que realmente cambia.
La meta no es un detalle geométrico ilimitado. Se trata de 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, más formas adicionales para construir orejas, un hocico, un puntero o una silueta completamente diferente.
Sus ojos por defecto pueden posicionarse y estilizarse 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 luego secuenciar esas expresiones, añadir parpadeos y hacer transiciones suaves incluso cuando una nueva animación interrumpe una 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.
Debido a que esas capas permanecen separadas, el mismo sistema de expresiones puede reutilizarse teóricamente 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 se trata realmente de una app 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 sentirse espacial y 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
