Cada peça 3D dos nossos remakes de Antes & agora começou a vida como um arquivo Python. Superman, Batman, Wolverine, Homem-Aranha, Homem de Ferro, Hulk, R2-D2 e o Game & Watch são construídos, cada um, por um script que controla o Blender, exporta um modelo e o entrega a uma página que o ilumina ao vivo com three.js. Nada foi esculpido com o mouse.
Parece truque de festa. Acabou sendo a decisão mais prática do projeto.
Por que construir 3D com código
Um modelo feito à mão é um objeto acabado. Um modelo feito por script é uma receita, e receitas podem mudar. Quando o feedback sobre o Hulk foi "os punhos dele parecem luvas", não reabrimos um arquivo para empurrar vértices; mudamos a forma como o punho era construído e rodamos de novo. Quando os antebraços ficaram curtos demais, ou uma capa precisava cair por cima dos ombros em vez de atrás deles, a correção eram algumas linhas, e o modelo inteiro era reconstruído em minutos.
Isso também significa que cada peça é reproduzível. Os scripts ficam no repositório, ao lado do site, e um kit compartilhado cuida das partes que todo busto precisa: o torso, o pedestal, a pintura das cores e a exportação.
Rostos são difíceis, então não começamos do zero
Nossas primeiras cabeças foram construídas a partir de primitivas e deformadas por matemática. Pareciam cabeças, mas não pessoas. Rostos são onde o olho menos perdoa, e nenhum ruído engenhoso conserta um nariz um pouco comprido demais.
Então mudamos de abordagem. A Blender Studio publica um conjunto de malhas humanas base sob CC0, livres para qualquer pessoa usar. Agora começamos cada rosto a partir dessa cabeça realista e a remodelamos por script: sobrancelhas mais pesadas e mandíbula mais larga para o Hulk, mandíbula quadrada e queixo partido para o Superman, um rosnado para o Wolverine. As mãos vêm do mesmo conjunto, posicionadas por script em uma pegada, uma palma aberta ou um punho.
Pequenos detalhes que levaram mais tempo
Algumas lições que passaríamos a quem fizer o mesmo:
- Estanque ou nada. Remalhar partes juntas e depois reduzir o resultado para economizar tamanho de arquivo pode dobrar a superfície sobre si mesma, e dobras aparecem como buracos escuros. Nosso build agora se recusa a terminar se um modelo não for uma superfície fechada e válida.
- Um material por malha. O exportador glTF do Blender mantém as cores de vértice só no primeiro material de uma malha, então cada parte pintada é a sua própria malha.
- Bocas fechadas até serem necessárias. O Hulk e o Wolverine mantêm os lábios fechados em repouso; o rugido e o rosnado são mudanças de forma que só acontecem enquanto você segura, com os dentes escondidos até a boca abrir.
- Versione cada modelo. Os navegadores guardam modelos em cache com força, então cada arquivo é carregado com uma etiqueta de versão que muda quando o modelo muda.
A luz é metade do modelo
Na página, cada peça é iluminada em tempo real com three.js. O Homem de Ferro e o Superman ganham bloom, um efeito de brilho para os olhos, o reator arc, o repulsor e a visão de calor. Exigiu ajustes. Nosso primeiro Homem de Ferro brilhava tanto que o capacete sumia, então agora o bloom começa pequeno e só se abre enquanto você carrega um disparo.
Cada peça também ganha o seu próprio cenário: um telhado chuvoso em Gotham, o entardecer sobre Nova York, os sóis gêmeos de Tatooine, uma escrivaninha de nogueira para os portáteis.
Mantendo tudo rápido
É fácil deixar o 3D lento. Algumas regras mantêm o nosso utilizável no celular:
- Os modelos carregam depois que a página fica ociosa, nunca antes do texto.
- As cenas são montadas uma de cada vez, em pequenos pedaços, para que a página nunca trave enquanto prepara os gráficos.
- A configuração gráfica roda em segundo plano antes de o primeiro quadro ser desenhado.
- Aparelhos sem um chip gráfico utilizável recebem uma imagem estática em vez de uma página travada.
A prateleira de museu no topo de Antes & agora mostra as oito peças ao mesmo tempo, então usa versões leves de cada modelo: simplificadas, comprimidas e carregadas só quando necessário.
Para onde isso vai
As técnicas por trás desses bustos vão direto para o trabalho com clientes: configuradores de produto, explicações interativas, momentos de destaque que carregam rápido e respondem ao toque. Construí-los em código significa que podem mudar tão rápido quanto o produto ao lado do qual estão.
Enquanto isso, vá deixar o Hulk bravo.