Construindo um mundo aberto no navegador, parte 25: Um esqueleto, todos os trajes
Por Oleg Sidorkin, CTO e cofundador da Cinevva
Chegou agora? Consulte o guia da série. Ele explica o que é um spike e reúne links para todas as partes.
A Parte 24 tornou o mundo persistente e deu movimento de vento à vegetação. Esta parte volta a tratar das pessoas que vivem nele, mas pelo lado do guarda-roupa: um criador consegue escolher um corpo-base, trocar de roupa, selecionar um penteado e reproduzir qualquer animação usando apenas um pacote gratuito de assets, sem criar rigs nem animações? Construir um rig personalizado não é o risco que precisamos eliminar. A pergunta que vale a pena responder é se um pacote CC0 consegue dar conta de tudo.
Um pacote criado para funcionar em conjunto
Abrir o Spike 50 em uma nova aba ↗ · Ver código-fonte
A Quaternius oferece quatro assets que se encaixam quase bem demais: o Universal Base Characters, com corpos masculino e feminino, além de oito penteados e dois conjuntos de sobrancelhas; o Modular Character Outfits, dividido em partes para corpo, braços, pernas e pés, com acessórios como ombreiras e capuz; e os pacotes um e dois da Universal Animation Library, com 262 clipes no total abrangendo locomoção, combate, escalada, agricultura, pesca, poses ociosas e movimentos sociais. A inspeção dos arquivos glTF revelou por que eles se encaixam: cada uma das malhas nos quatro pacotes usa intencionalmente o mesmo esqueleto de 65 articulações no estilo UE5, com os mesmos nomes de articulações e as mesmas poses de vinculação, passando pela raiz, pelve e coluna até a cabeça, além de braços espelhados com quinze articulações de dedos de cada lado e pernas espelhadas. Nenhum redirecionamento é necessário. Isso é exatamente o oposto do problema de redirecionamento entre três esqueletos do Spike 35, no qual um rig facial de 213 ossos precisava se comunicar com um rig Mixamo de 65 ossos. Aqui, os quatro pacotes foram criados intencionalmente sobre o esqueleto da biblioteca de animações, e a correspondência é exata.
Isso transformou o spike em um exercício de vinculação, em vez de um problema de pipeline de animação. A camada-base carrega o glTF de um corpo, clona a cena com SkeletonUtils.clone para que cada personagem receba uma nova instância do esqueleto, em vez de propagar mutações dos ossos para a cena armazenada em cache pelo carregador, e guarda em cache esse esqueleto de 65 ossos como o esqueleto canônico, junto com o objeto de armadura que serve como raiz da animação.
Reassociando um casaco a um corpo
O truque que faz tudo funcionar é que não basta simplesmente mudar a malha de um traje para outro pai na cena, pois ela ainda referencia os ossos de seu próprio glTF, que ficam em uma subárvore diferente. Cada parte modular — o corpo de um camponês ou as pernas de um patrulheiro — chega como sua própria SkinnedMesh, com seu próprio clone da mesma armadura. A vinculação percorre os ossos do esqueleto de origem na ordem original, procura cada um pelo nome no esqueleto canônico e constrói um novo Skeleton com esses ossos reassociados, reutilizando as matrizes inversas de vinculação da origem. Em seguida, chama SkinnedMesh.bind com a matriz de vinculação identidade da origem. Após a vinculação, a malha se desacopla da cena de origem e passa a ter diretamente a raiz do personagem como pai. Como a matriz de vinculação captura a transformação global no momento da vinculação e a raiz permanece na identidade, a transformação global da própria malha nunca afeta a saída, e o skinning acontece inteiramente por meio dos ossos agora compartilhados.
Cabelos e sobrancelhas também são slots, e eles corrigiram uma suposição equivocada. A estrutura de pastas dizia “vinculado ao osso da cabeça”, o que sugeria que o cabelo seria uma malha estática associada à cabeça como filha, com um deslocamento pré-calculado. Não é. Cada arquivo de cabelo é uma SkinnedMesh com pesos distribuídos entre todas as 65 articulações. No cabelo comprido, os pesos se estendem à parte superior da coluna e ao pescoço, permitindo que ele caia naturalmente quando o personagem olha para baixo. Portanto, o cabelo segue o mesmo processo de reassociação por nome que qualquer parte de traje. O único caso especial é o slot de corpo do traje: quando ele é anexado, a malha do corpo-base é ocultada para evitar que atravesse o traje, enquanto braços, pernas, pés e acessórios apenas se sobrepõem, pois o pacote foi criado para que coexistam com o corpo-base visível nas áreas em que a roupa deixa a pele exposta.
262 animações gratuitas
Depois que o esqueleto é compartilhado, a animação chega a ser anticlimática. Os dois arquivos glb da biblioteca são carregados, seus clipes são reunidos em uma única lista identificada por nomes, e os nomes das trilhas nesses clipes referenciam os nomes exatos das articulações por meio de bone.position, bone.quaternion e bone.scale. Um AnimationMixer cuja raiz é a armadura do personagem encontra esses ossos pelo nome e os controla diretamente, fazendo uma transição suave ao trocar de animação. O painel direito do visualizador apresenta uma lista filtrável com todos os 262 clipes e um marcador de origem. Assim, pesquisar “fish” exibe todas as animações de pesca das duas bibliotecas. A iluminação padrão de três pontos, com sombras suaves, uma grade polar sob os pés e mapeamento de tons ACES, mantém as texturas-base estilizadas legíveis sem apagar os detalhes das sombras do traje escuro.
Isso reduz consideravelmente os riscos para o produto. O recurso de personalização de avatares pode ser lançado usando um pacote CC0, sem nenhum trabalho de rigging nem criação de animações: basta adicionar os quatro pacotes, conectar uma interface de guarda-roupa e você terá, de imediato, cerca de seis trajes vezes oito penteados vezes dois sexos vezes 262 animações de variação. O esqueleto de 65 articulações é pequeno o suficiente para que o custo do skinning na GPU seja desprezível, e o trabalho de skinning em lote do Spike 45 já comporta mais de 200 avatares em um rig desse tamanho. A licença CC0 não impõe restrições de uso, portanto o uso comercial em uma plataforma paga para criadores é permitido. A questão ainda em aberto são os trajes enviados pelos próprios usuários, um problema da Fase 3 que pode ser resolvido redirecionando-os, durante o upload, para esse esqueleto canônico — o inverso do redirecionamento em tempo de execução do Spike 35. Os assets ocupam cerca de 147 MB em disco como PNGs 2K brutos e arquivos glb de animação não compactados. Em produção, esse volume seria reduzido para aproximadamente 30 MB com compressão de texturas KTX2 e uma etapa de processamento com gltf-transform.
Tecnologias mencionadas neste capítulo
Um único esqueleto canônico em todo o pacote. Quatro pacotes da Quaternius — corpos-base, trajes modulares e duas bibliotecas de animação — usam o mesmo esqueleto de 65 articulações no estilo UE5, com nomes de articulações e poses de vinculação idênticos. Portanto, combiná-los não exige redirecionamento. Clonar a base com SkeletonUtils.clone fornece a cada personagem uma nova instância do esqueleto, em vez de modificar a cena armazenada em cache pelo carregador.
Reassociação de esqueleto por nome. Cada parte modular traz sua própria SkinnedMesh, que referencia sua própria armadura. A reassociação percorre os ossos de origem em ordem, mapeia cada um pelo nome para o esqueleto canônico, constrói um novo Skeleton reutilizando as matrizes inversas de vinculação da origem e chama SkinnedMesh.bind com a matriz de vinculação identidade. Em seguida, define a raiz compartilhada do personagem como pai da malha, para que o skinning seja executado inteiramente pelos ossos compartilhados. O slot de corpo do traje oculta o corpo-base para evitar interseções; os demais slots são sobrepostos.
Cabelo como slot com skinning. O cabelo não é um acessório estático associado ao osso da cabeça, mas uma SkinnedMesh com pesos distribuídos entre todas as 65 articulações. Cabelos compridos também recebem pesos na parte superior da coluna e no pescoço, para que caiam naturalmente quando o personagem olha para baixo. Eles seguem o mesmo processo de reassociação das partes de traje.
Redirecionamento gratuito de animações baseado em nomes. Os clipes da Animation Library referenciam as articulações pelos nomes exatos. Assim, um AnimationMixer cuja raiz é a armadura compartilhada controla diretamente todos os 262 clipes com transições suaves, sem redirecionamento individual por clipe. A licença CC0 permite uso comercial, e o baixo número de articulações mantém o skinning na GPU leve o suficiente para reutilizar o processamento em lote do Spike 45. Consulte LOD controlado pela GPU.
Parte 25 de 29. Anterior: Parte 24 — Salvando um mundo e tornando o vento visível Próxima: Parte 26 — Água convincente em qualquer escala Guia da série: /pt-BR/blog/2026-02-25-open-world-browser-series-guide