Esculpindo um atleta digital: capturando Stefanos Tsitsipas além da quadra | Codrops

Ao projetar um site em torno de uma pessoa e não de um produto, o desafio vai além do visual. A experiência deve capturar quem eles são e o que as pessoas associam a eles.

Para Stefanos Tsitsipas, isso significou primeiro compreender seu mundo antes de traduzi-lo em uma experiência interativa. Nosso objetivo era representar sua personalidade da forma mais autêntica possível para sua comunidade e fãs.

História do projeto

Stefanos Tsitsipas é um dos nomes mais reconhecidos do tênis. Além de suas atuações em quadra, ele também é um rosto conhecido em campanhas de marcas internacionais. Desde o início queríamos que a experiência reflectisse ambos os lados da sua identidade: o atleta de elite e a personalidade para além do jogo.

Pipeline de produção

O pipeline de produção 3D contou com Cinema 4D, Redshift, Blender e Marvelous Designer para criação de ativos, animação e simulação de tecidos.

Fotogrametria

O primeiro passo foi capturar uma varredura de 360 ​​graus de Stefanos usando fotogrametria. A OFF+BRAND fez parceria com um estúdio francês para realizar o scan, pois o processo requer cerca de 70 câmeras e um setup altamente especializado.

Pedimos a Stefanos que ficasse em pose A ou T para fazer rigging em Mixamo mais fácil.

Solicitamos duas configurações distintas: uma para a versão dentro de quadra e outra para a versão fora de quadra. Para a versão em quadra, precisávamos que o traje de tênis, o cabelo com bandana e as pulseiras fossem incluídos no exame. Para a versão fora da quadra, exigimos o cabelo sem faixa e sem acessórios adicionais.

O estúdio entregou duas versões do Stefanos, cada uma com três níveis de detalhe (LODs), variando de modelos de alta definição a versões otimizadas de baixo polígono.

Cada parte do corpo tinha sua própria textura – braços, pernas, cabeça e torso. Esta configuração não era adequada para WebGL, pois não estava nada otimizada.

Otimização UV

O primeiro passo foi consolidar todas as oito texturas em um único conjunto de texturas otimizado. Para conseguir isso, usamos as ferramentas de remapeamento de textura do Blender. Duplicamos os UVs, criando o UV1 a partir do modelo original e o UV2, que foi remapeado para agrupar todas as oito texturas em um único layout UV. Em seguida, transferimos os dados de textura de UV1 para UV2, pois as texturas originais já haviam sido incorporadas ao layout UV1.

Rigging

Depois que reduzimos o modelo para uma única textura, precisamos rigá-lo. Após vários testes, descobrimos um problema em uma das mãos, então ajustamos os dedos para garantir que estavam devidamente separados, permitindo que o Mixamo interpretasse corretamente a topologia.

Como não precisávamos de uma animação do Mixamo, apenas baixamos o modelo recém-equipado de Stefanos em T-pose.

Posando o personagem

Em seguida, importamos o modelo manipulado para o Cinema 4D e ajustamos sua pose para dar a Stefanos uma postura forte e poderosa. Tanto a versão dentro quanto fora da quadra precisavam compartilhar a mesma pose, por isso escolhemos uma em que ele segura a raquete enquanto cruza os braços. Criamos dois quadros-chave para cada osso animado: um mantendo a pose A, que precisaríamos mais tarde, e um segundo, alguns quadros depois, com os braços cruzados.

Quando ficamos satisfeitos com a pose, exportamos como um arquivo Alembic para que a animação pudesse ser importada para o Marvelous Designer.

Simulação de roupas

O cronograma inicial para todo o processo de produção 3D foi estimado em cinco a oito dias, mas no final das contas levou 14 dias para ser concluído. Dado o calendário apertado, decidimos usar looks prontos do Marvelous Designer Marketplace.

Abrimos os looks no Marvelous Designer e importamos os arquivos do Alembic do Stefanos.

Embora as duas primeiras versões de Stefanos na página inicial não fossem animadas, ainda precisávamos que elas começassem em pose A para que a camiseta pudesse caber corretamente entre os braços e o torso. Caso contrário, colocar a camiseta corretamente teria sido muito mais difícil, pois os braços teriam atrapalhado o processo.

Quando ficamos satisfeitos com a pose, reexportamos o modelo vestido de Stefanos como um FBX para que pudesse ser importado para a próxima ferramenta. Para a pose de braços cruzados, refinamos ainda mais no Cinema 4D, ampliando sutilmente o tronco e os braços para dar-lhe uma presença ainda mais forte.

Abaixo está uma comparação entre a pose inicial e a iteração final. A diferença de energia é imediatamente perceptível. Como queríamos mostrar a personalidade de Stefanos ao mesmo tempo que evocamos a presença de uma estátua grega, prestamos muita atenção a estes detalhes, pois faziam uma diferença significativa.

Para a versão animada, exportamos o modelo novamente como um arquivo Alembic para preservar a animação.

Assim como no modelo original de Stefanos, cada roupa veio com seu próprio conjunto UV. Portanto, os consolidamos em um único conjunto de texturas.

Usamos duas abordagens diferentes para as texturas.

Para as poses estáticas, preparamos as sombras. Configuramos a iluminação em Cinema 4D usando Redshift, posicionando a luz principal para vir do lado esquerdo de Stefanos. Também preparamos a oclusão de ambiente (AO) para adicionar mais realismo à estátua.

Desenvolvimento de textura

Para a versão animada, usamos apenas oclusão de ambiente e mapas difusos. Nós os exportamos do Substance Painter caso mais tarde precisássemos de mapas de rugosidade e metalidade, pois eles não estão incluídos no passe de beleza.

Para a estátua animada de Stefanos, o principal desafio foi escolher o ângulo certo para evitar a introdução excessiva de oclusão ambiental nas roupas. Para resolver isso, criamos duas texturas AO de momentos diferentes da animação e as combinamos. Em seguida, refinamos o resultado com ajustes adicionais no Photoshop.

Para a versão pintada, a imagem de referência — criada com ferramentas de IA — era um retrato pintado de Stefanos. No WebGL, isso significava a textura necessária para incorporar um estilo de sombreamento pictórico.

Executamos vários testes no Substance Painter, mas finalmente descobrimos que a renderização WebGL por si só já fornecia uma aparência suficientemente pictórica.

Prop Optimization

Para simplificar a geometria da raquete, usamos uma textura alfa para criar o cordas. Em seguida, aplicamos o PNG a uma malha quadrada simples.

Escultura de cabelo

Para o cabelo e a barba, queríamos que se parecessem com uma estátua grega, então eles precisavam ser esculpidos. Usamos o ZBrush para esculpir cada fio individualmente.

Animação de personagens

Para a animação, Stefanos tem um movimento de serviço muito distinto, que precisávamos replicar com a maior precisão possível. Usamos vídeos de referência encontrados online e trabalhamos quadro a quadro para combinar com o movimento.

O principal desafio era que o artista 3D não era especialista em animação de personagens e não estava profundamente familiarizado com tênis, tornando difícil julgar se a pose era precisa ou realista para um jogador profissional. Felizmente, nosso gerente de projeto, Matt, conhece muito bem o tênis e forneceu feedback valioso durante todo o processo. Sua contribuição valeu a pena, pois a equipe de Stefanos forneceu muito pouco feedback sobre a animação 3D.

Outro desafio foi exportar um modelo animado otimizado com simulação de tecido. Nosso desenvolvedor, Adrian, encontrou uma solução removendo os quadros-chave selecionados das chaves de forma.

A princípio, o resultado parecia completamente quebrado, mas era simplesmente uma questão de entender como o sistema funcionava. Cada chave de forma está vinculada a um quadro-chave específico: no quadro 1, a chave de forma 1 é definida como 1 enquanto todas as outras são definidas como 0.

No entanto, se a chave de forma 1 for definida como 1 no quadro 1 e nenhum novo valor for gravado posteriormente, ele permanecerá em 1 nos quadros subsequentes. Portanto, ao remover quadros-chave para reduzir o tamanho do arquivo, também precisávamos reajustar os valores das chaves de forma, excluindo chaves desnecessárias e regravando as restantes.

Da fotogrametria à otimização WebGL, cada etapa do pipeline foi cuidadosamente elaborada para criar uma experiência digital que reflete a personalidade de Stefanos Tsitsipas dentro e fora da quadra.