Devlog

Devlog

Anotações sobre como construímos as pequenas cenas interativas deste site — animação procedural, 3D em tempo real e os truques que fazem tudo parecer vivo.

Atualizado em Por ShengyuStudio

Animando um boneco de palito com IK de dois ossos

Animação procedural no canvas HTML: um solver de IK de dez linhas a partir da lei dos cossenos, ciclos de marcha, pés que não escorregam, trilhas de quadros-chave com easing, squash and stretch e cabelo com Verlet.

Ler o post →

Um oceano em tempestade no three.js

Um mar feito de soma de senos como única fonte da verdade, normais por diferenças finitas, espuma nas cristas via onBeforeCompile, um navio que sobe, arfa e joga sem física, e a névoa, a chuva e os raios que vendem a tempestade.

Ler o post →

Como fizemos uma floresta 3D explorável em three.js

Terreno procedural escavado em torno de um riacho sinuoso, uma fita de água refrativa, 25.000 folhas de grama instanciadas com um patch de vento no onBeforeCompile, árvores de cartões de folhas, clique para andar com raycast no chão, e bloom mais correção de cor.

Ler o post →

Todos os posts falam de cenas com que você pode brincar aqui no site: a página do boneco de palito (que virou o Stickman Spear Run, um jogo de corrida em que você pula e dá estocadas com a lança, com o laboratório de movimento como segundo modo), a Tempestade à proa e o Passeio na floresta. Para listas por gênero e indicações, veja os nossos guias.