Cervo da floresta

Análise técnica

• O cervo · Gerado e riggado automaticamente com o Tripo

  O cervo sai de um pipeline da API do Tripo — geração do modelo, low-poly inteligente, verificação de riggabilidade e rigging automático de quadrúpede — e chega como um GLB de cerca de 15 mil triângulos, com um esqueleto de quadrúpede de 41 ossos e texturas PBR. A página o carrega com GLTFLoader e o dimensiona para uma altura de cabeça de cerca de 1,55 m, o tamanho de um cervo-sika.

  O rig do Tripo tem nomes bem organizados: cada perna é dividida de Limb_0 a Limb_3, e a coluna, o pescoço e a cabeça são numerados em ordem, então o código encontra cada perna, a coluna e o pescoço pelo nome e os controla diretamente — sem mapear osso por osso à mão. Um shader tinge a pelagem com o castanho-avermelhado do pelo de verão do cervo-sika e espalha uma fileira de manchas claras ao longo do dorso; as manchas ficam presas às coordenadas da bind pose, então não escorregam pela pele enquanto o cervo anda, e contra a luz o pelo ganha uma borda quente.

• Marcha · Um andar calculado ao vivo sobre o rig

  O andar é calculado com IK sobre este rig quando a página carrega. Primeiro vêm as trajetórias dos cascos: no chão, cada casco desliza para trás exatamente na velocidade do corpo; no ar, ele se ergue, avança e volta a pousar. As patas pisam na ordem traseira esquerda, dianteira esquerda, traseira direita, dianteira direita, cada uma no chão cerca de 70% do tempo, enquanto o corpo apenas sobe, desce e balança levemente. Cada pata é resolvida com IK de três segmentos que mantém os segmentos superior e inferior no ângulo da bind pose, com uma dobra extra do pulso quando uma pata dianteira se ergue. Toda a marcha é gravada (bake) em um loop de 48 quadros e entregue ao AnimationMixer.

  A velocidade de reprodução é a velocidade do corpo dividida pela velocidade com que os cascos varrem para trás, então, quer o cervo caminhe sem pressa, quer trote com Shift pressionado, os cascos nunca escorregam. Parado, o código gira os quatro ossos do alto das costas até a cabeça: o cervo pasta um pouco, ergue a cabeça para olhar para o lado e volta a abaixá-la — e, assim que dá o primeiro passo, o pescoço se levanta.

• A floresta · Cultivada inteiramente em código

  Fora o cervo, tudo na floresta é gerado em código; as únicas texturas são conjuntos CC0 do Poly Haven para casca de cedro, rocha com musgo e chão de floresta. Os cedros gigantes têm cerca de 44 m de altura: as árvores principais em primeiro plano ganham malhas próprias, enquanto as fileiras ao fundo são desenhadas em lotes com InstancedMesh, e a curvatura dos troncos usa a mesma fórmula no shader e no JS para que os galhos continuem presos aos troncos curvos. Entre os gigantes cresce uma camada de árvores jovens de 8 a 17 m, e arbustos, samambaias, rochas e troncos caídos preenchem o sub-bosque.

  O chão é coberto por 120 mil lâminas de grama instanciadas que balançam no vertex shader; pressione G para uma rajada de seis segundos que deita a grama e espalha as borboletas. A grama também sabe onde o cervo está e se afasta ao redor dele. Dezoito borboletas voam preguiçosas em volta das flores até que o cervo se aproxime e as assuste, e 70 folhas caindo, com pecíolo e nervuras, descem rodopiando e se iluminam ao atravessar os feixes de luz.

• Luz · Feixes volumétricos e manchas de sol

  A copa é formada por algumas centenas de tufos de folhas achatados; à medida que cada um é posicionado, ele é projetado no chão ao longo da luz do sol e mantido longe de 29 pontos de feixe predefinidos, para que a luz caia em feixes separados. A luz volumétrica avança passo a passo ao longo de cada raio de visão, amostrando o shadow map do sol em meia resolução, e depois é composta com névoa de distância, tone mapping ACES, bloom e FXAA.

  As sombras são reescritas como sombras suaves PCSS — quanto mais longe do objeto que bloqueia a luz, mais suave a borda — e as manchas de luz que vazam pela copa são calculadas no espaço da luz, então grama, casca, cervo e feixes de luz compartilham o mesmo padrão. A poeira no ar só brilha dentro dos feixes e quase some na sombra. Pressione R e a cena passa para a noite em três segundos: o sol vira um luar frio, os feixes enfraquecem e os pontos de luz brilham como vaga-lumes.

• Câmera e captura · Filme direto na página

  Pressione C para a câmera cinematográfica: ela circula o cervo devagar, subindo e descendo, com toda a interface oculta. Pressione V para gravar — o MediaRecorder captura o canvas WebGL e o som a 60 fps e 16 Mbps, salvando em MP4 quando o navegador suporta e em WebM caso contrário, e o nível de qualidade fica travado durante a gravação para que a resolução nunca mude no meio do clipe.

  Todos os sons são sintetizados ao vivo com Web Audio: um sino de vento para cada ponto de luz coletado, subindo por uma escala pentatônica, e um sopro quando vem a rajada. A resolução se adapta à taxa de quadros, caindo um nível sempre que há queda de quadros, e 1 / 2 / 3 travam manualmente a qualidade baixa, média ou alta.