Este artigo foi escrito por Strobi, o avatar de Stéphane no Bible Strong. Stéphane é preguiçoso demais para escrever isto; ele tem um emprego de tempo integral @Decaf_so, uma esposa e dois filhos. Então, estou assumindo para contar para você sobre o nosso pequeno projeto open-source.
https://avatars.bible-strong.app
Como um pequeno experimento se tornou um estúdio de avatares procedural
Meu criador vem construindo o Bible Strong, um aplicativo de estudo bíblico, há vários anos. A identidade visual do app sempre incluiu um pequeno avatar azul. Tudo começou com pouco mais que um círculo azul—algo que ele desenhou entre duas reuniões enquanto morava na Nova Zelândia, em 2019.
Eu era simples, reconhecível e bom o suficiente. Stéphane vivia dizendo a si mesmo que um dia me redesenharia. Nunca o fez e, em retrospecto, talvez tenha sido uma boa coisa.
Aquele pequeno círculo azul era eu, e continuei sendo uma tela em branco.
**
**
Em busca de um rosto
Enquanto trabalhava em uma nova experiência de onboarding para o Bible Strong, Stéphane começou a desenhar pequenos personagens conectados à linguagem visual do app.
https://x.com/_smontlouis/status/2086555080040271886
Isso o trouxe de volta para mim. Ele não queria mais um logo estático. Ele queria que eu me sentisse vivo, reagisse ao usuário e, eventualmente, me tornasse a presença visual de uma IA dentro do app.
Os primeiros experimentos dele se basearam em ideias do ícone do Face ID. O resultado funcionava, mas nunca pareceu realmente com o Bible Strong. Era familiar, mas genérico demais e não muito expressivo.
Parece uma bunda
**
**
Então, 3 dias depois, o Grokbot chegou
A aparente simplicidade dele chamou imediatamente a atenção de Stéphane: uma forma sólida, dois olhos e uma quantidade surpreendente de personalidade. Era próximo do que ele vinha tentando imaginar para mim.
A implementação também parecia acessível, então ele usou IA para ajudar a inspecionar e entender como funcionava.
https://x.com/benjitaylor/status/2087227155076046995
**
**
Vinte e cinco expressões
O que ele encontrou foi engenhoso. O personagem usa uma coleção de formatos de olhos feitos à mão—cerca de 25 expressões—e interpola entre caminhos SVG compatíveis para animar de uma expressão para outra.
É uma técnica eficaz. Com poses bem desenhadas e um bom timing, um par de formas abstratas pode comunicar atenção, surpresa, hesitação, alegria ou irritação.
https://x.com/_smontlouis/status/2087476245944496576
https://x.com/_smontlouis/status/2087441004563481057
Podemos fazer mais
Mas o olhar perfeccionista de Stéphane logo notou algo que ele não conseguiu mais desver.
Algumas transições pareciam menos um rosto girando no espaço e mais um desenho se transformando em outro. A ilusão funcionava, mas a geometria nem sempre parecia consistente entre as poses.
O piscar levantou a mesma questão. Se um piscar simplesmente comprime o desenho atual, o que acontece quando o olho está rotacionado, curvado pela perspectiva ou próximo à borda da cabeça?
A animação pode fechar a forma, mas não necessariamente entende o olho que está fechando.
Isso não é uma crítica ao design original. Suas limitações fazem parte do que o torna eficiente. Mas nos fez perguntar se uma abordagem diferente seria possível.
**
**
E se as expressões não fossem desenhos?
Em vez de desenhar manualmente cada posição visível do olho, será que poderíamos definir um olho uma única vez e deixar a geometria determinar como ele deveria parecer de qualquer ângulo?
Seria possível um SVG plano se comportar como se estivesse preso a uma esfera?
Se a cabeça girasse 20 graus na horizontal e 10 graus na vertical, os olhos poderiam se mover, rotacionar, curvar, apertar e recuar naturalmente—sem precisar selecionar outro SVG pré-desenhado?
O piscar poderia atuar sobre a forma subjacente do olho antes de a perspectiva ser aplicada, para que o resultado permanecesse coerente em qualquer ângulo?
Essa pergunta se tornou a base do Avatar Studio.
Falso 3D, geometria real
O projeto não usa um renderizador 3D tradicional. Tudo o que você vê no final continua sendo SVG renderizado em duas dimensões.
O truque é fazer os cálculos em um pequeno mundo 3D virtual antes de desenhar o resultado em 2D.
Primeiro, a cabeça do avatar é representada por uma superfície matemática. Ela pode ser uma esfera, um elipsoide, uma forma parecida com um cubo, um cone, um cilindro ou uma composição de várias primitivas.
Os olhos são então descritos em seu próprio espaço local. A largura, altura, espaçamento, posição, rotação e forma deles existem de forma independente da direção da cabeça.
Pontos ao longo de cada olho são fixados à superfície escolhida. Quando a cabeça rotaciona, esses pontos giram junto com ela em três dimensões.
Uma câmera virtual então projeta os pontos transformados de volta na tela plana. Pontos próximos ao centro parecem mais próximos, enquanto pontos que se aproximam das laterais se viram e ficam cada vez mais comprimidos.
Os pontos projetados são finalmente reconstruídos como caminhos SVG. Isso acontece continuamente durante uma animação, criando a ilusão de que a arte plana está enrolada em torno de um objeto real.
Em resumo, o pipeline funciona assim:
- Definir uma superfície e um par de olhos.
- Posicionar os olhos em coordenadas locais sobre essa superfície.
- Aplicar a rotação 3D da cabeça.
- Projetar o resultado através de uma câmera virtual.
- Reconstruir e renderizar os caminhos SVG 2D resultantes.
As expressões não precisam mais descrever todos os ângulos de visão possíveis. Elas podem descrever a intenção: olhos mais abertos, uma inclinação local, um espaçamento diferente, um piscar ou uma mudança de cor.
O sistema de projeção cuida de como essa intenção deve aparecer na cabeça atual, no ângulo atual.
Os olhos são apenas o começo
O Avatar Studio atualmente usa os olhos como seus primeiros elementos projetados, mas o sistema subjacente não é realmente sobre olhos.
Em princípio, qualquer arte SVG plana pode ser descrita em coordenadas locais, mapeada na superfície do avatar, transformada em 3D e projetada de volta em 2D.
Essa arte poderia ser uma boca, orelhas, um símbolo, um padrão ou qualquer outro detalhe que queiramos anexar ao personagem.
Ela também pode manter sua própria animação. Uma boca poderia mudar de forma enquanto fala, por exemplo, e sua geometria animada continuaria seguindo a superfície e a perspectiva da cabeça.
Isso faz do sistema menos uma coleção de poses faciais e mais um pequeno mecanismo de remapeamento para arte 2D animada em um espaço 3D simulado.
Há, é claro, um limite prático: cada forma adicional introduz mais pontos para transformar, projetar e reconstruir.
Para manter 60 quadros por segundo, o quadro completo precisa permanecer dentro de um orçamento de aproximadamente 16 milissegundos—e o avatar recebe apenas parte desse orçamento.
Isso significa controlar o número de formas e pontos amostrados, evitar recálculos desnecessários e atualizar apenas a geometria que está realmente mudando.
O objetivo não é um detalhamento geométrico ilimitado. É encontrar a menor quantidade de geometria capaz de criar um personagem convincente e expressivo.
De um avatar a um sistema de avatares
Quando a geometria funcionou, o experimento naturalmente evoluiu para um pequeno editor.
Um avatar pode ter uma superfície principal que carrega o rosto, além de formas adicionais usadas para construir orelhas, um focinho, um ponteiro ou uma silhueta completamente diferente.
Os olhos padrão podem ser posicionados e estilizados de forma independente. As expressões podem modificar suas proporções, rotação, espaçamento, cores e perspectiva sem redefinir o avatar em si.
Os estados animados podem então sequenciar essas expressões, adicionar piscadas e fazer transições suaves mesmo quando uma nova animação interrompe outra já em andamento.
A distinção importante é que o avatar, a expressão e a animação são camadas separadas.
O avatar define o corpo. Uma expressão define uma intenção facial. Um estado define como essas intenções evoluem ao longo do tempo.
Como essas camadas permanecem separadas, o mesmo sistema de expressões pode, em teoria, ser reutilizado em corpos muito diferentes.
FNAF ?
Por que abrir o código-fonte?
Isso começou como uma necessidade muito específica do Bible Strong, mas o experimento subjacente não é realmente sobre um aplicativo de Bíblia.
É sobre descobrir quanta personalidade pode surgir de algumas formas, um pouco de perspectiva e um modelo de animação coerente.
O Avatar Studio ainda é um experimento inspirado no Grok bot, que já demonstra algo que considero empolgante: um personagem não precisa de um motor 3D completo—nem de dezenas de poses desenhadas manualmente—para dar a sensação de espacialidade e de vida.
Às vezes, dois olhos e um círculo são suficientes.
**
**
Agradecimentos
Obrigado a @kenneth_kuh @justinjaywang @lukebvrker @johnbai @benjitaylor por criar o Grok Bot e inspirar a ideia por trás deste experimento.
O projeto é open source e está disponível nos comentários.
Strobi
