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 sobre 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 aplicativo sempre incluiu um pequeno avatar azul. Tudo começou como 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 me redesenharía um dia. Ele nunca o fez, e, em retrospecto, talvez isso tenha sido uma coisa boa.
Aquele pequeno círculo azul era eu, e eu permaneci uma tela em branco.
Procurando um rosto
Enquanto trabalhava em uma nova experiência de onboarding para o Bible Strong, Stéphane começou a desenhar personagens pequenos conectados à linguagem visual do aplicativo.
https://x.com/_smontlouis/status/2086555080040271886
Isso o trouxe de volta a mim. Ele não queria mais um logotipo estático. Ele queria que eu parecesse vivo, reagisse ao usuário e, com o tempo, me tornasse a presença visual de uma IA dentro do aplicativo.
Suas primeiras experiências pegaram emprestadas ideias do ícone do Face ID. O resultado funcionava, mas nunca realmente pareceu com o Bible Strong. Era familiar, porém genérico demais e não especialmente expressivo.
Parece uma bunda
Então o Grokbot de 3 dias chegou
Sua aparente simplicidade chamou sua atenção imediatamente: uma forma sólida, dois olhos e uma quantidade surpreendente de personalidade. Era próximo do que ele estava 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 cuidadosamente 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 olho perfeccionista de Stéphane rapidamente notou algo que ele não conseguia desver.
Algumas transições pareciam menos com um rosto girando no espaço e mais com um desenho se transformando em outro. A ilusão funcionava, mas a geometria nem sempre parecia consistente entre as poses.
Piscar levantou a mesma questão. Se uma piscada 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.
Isto não é uma crítica ao design original. Suas restrições fazem parte do que o torna eficiente. Mas nos fez perguntar se uma abordagem diferente era possível.
E se as expressões não fossem desenhos?
Em vez de desenhar manualmente cada posição visível do olho, poderíamos definir um olho uma vez e deixar a geometria determinar como ele deveria parecer de qualquer ângulo?
Um SVG plano poderia se comportar como se estivesse fixado a uma esfera?
Se a cabeça girasse 20 graus horizontalmente e 10 graus verticalmente, os olhos poderiam se mover, girar, curvar, estreitar e recuar naturalmente—sem selecionar outro SVG pré-criado?
A piscada poderia operar na forma subjacente do olho antes que a perspectiva fosse aplicada, para que o resultado permanecesse coerente em todos os ângulos?
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ê finalmente vê ainda é SVG renderizado em duas dimensões.
O truque é realizar 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. Pode ser uma esfera, um elipsoide, uma forma cúbica, 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. Sua largura, altura, espaçamento, posição, rotação e forma existem independentemente da direção da cabeça.
Pontos ao longo de cada olho são fixados à superfície escolhida. Quando a cabeça gira, esses pontos giram com ela em três dimensões.
Uma câmera virtual projeta então os pontos transformados de volta à 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á envolta em um objeto real.
Em resumo, o pipeline funciona assim:
- Defina uma superfície e um par de olhos.
- Posicione os olhos em coordenadas locais na superfície.
- Aplique a rotação 3D da cabeça.
- Projete o resultado através de uma câmera virtual.
- Reconstrua e renderize os caminhos SVG 2D resultantes.
As expressões não precisam mais descrever todos os ângulos de visão possíveis. Elas podem descrever intenção: olhos mais abertos, uma inclinação local, um espaçamento diferente, uma piscada 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 para 2D.
Essa arte poderia ser uma boca, orelhas, um símbolo, um padrão ou qualquer outro detalhe que quisermos 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 ainda seguiria a superfície e a perspectiva da cabeça.
Isso torna o sistema menos como uma coleção de poses faciais e mais como um pequeno mecanismo de remapeamento para arte 2D animada em espaço 3D simulado.
Existe, é 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 caber dentro de um orçamento de aproximadamente 16 milissegundos—e o avatar só recebe 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 é detalhe 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
Uma vez que a geometria funcionou, o experimento naturalmente cresceu para um pequeno editor.
Um avatar pode ter uma superfície principal que carrega seu rosto, além de formas adicionais usadas para construir orelhas, um focinho, um ponteiro ou uma silhueta completamente diferente.
Seus olhos padrão podem ser posicionados e estilizados independentemente. As expressões podem modificar suas proporções, rotação, espaçamento, cores e perspectiva sem redefinir o avatar em si.
Estados animados podem então sequenciar essas expressões, adicionar piscadas e fazer transições suaves mesmo quando uma nova animação interrompe uma 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 teoricamente ser reutilizado em corpos muito diferentes.
FNAF ?
Por que torná-lo open-source?
Isto 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—ou de dezenas de poses desenhadas manualmente—para parecer espacial e vivo.
Às vezes, dois olhos e um círculo são suficientes.
Agradecimentos
Obrigado a @kenneth_kuh @justinjaywang @lukebvrker @johnbai @benjitaylor por projetar o Grok Bot e inspirar a ideia por trás deste experimento.
O projeto é open-source e está disponível nos comentários.
Strobi
