Autor: Theodore
Experimente ao vivo Sobre este projeto
Os seis painéis são geometria WebGL genuína dentro da cena — têm espessura e curvatura, ocultam a personagem e são ocultados por ela, e a sua ordem de profundidade mantém-se correta de qualquer ângulo. Não são cartões DOM a flutuar sobre um canvas.
Toda a interação assenta numa divisão de funções: o 3D serve para descobrir, o 2D para controlar. Os painéis tratam da exploração e seleção, pairando em torno da personagem e rodando com os gestos do utilizador; o controlo efetivo da reprodução pertence à interface estável no espaço do ecrã, na parte inferior. Selecionar uma faixa não é uma mudança de estado, mas uma passagem contínua — o próprio painel voa para baixo e transforma-se no leitor e, quando se escolhe outra faixa, o anterior regressa ao seu lugar 3D original.
Destaques
- Arraste no espaço vazio e os cartões musicais giram em torno da personagem, continuando por inércia ao serem largados; arraste a personagem e apenas ela roda, sem alterar a câmara nem os painéis. Ambos derivam lentamente em sentidos opostos — é esse movimento contrário que faz o conjunto parecer um corpo em órbita, e não um cenário de fundo
- Clique num painel: este liberta-se do espaço 3D, passa pela personagem e abre-se num leitor horizontal na parte inferior; escolha outro e haverá dois painéis no ar ao mesmo tempo — o anterior dobra-se de volta para a sua posição original exata enquanto o novo avança
- A roda do rato desloca a câmara em dolly entre 4.6 e 16 unidades do mundo: ao aproximar, os painéis em primeiro plano transbordam do enquadramento; ao afastar, todo o espaço se reúne numa única constelação musical vista de cima
- A moldura de quatro cantos do cursor personalizado fixa-se ao quad realmente projetado de cada painel — os marcadores assentam nos verdadeiros cantos em perspetiva e rodam com a inclinação do painel
Análise técnica
Recursos 3D · A exportação intacta da Tripo
Artist.glb é disponibilizado exatamente como foi exportado pela Tripo: 59 MB, 1.02M vértices, um mapa de cor base de 8192² — sem decimação, sem redimensionamento, com todo o detalhe criado. O custo está assumido (~350 MB de VRAM após a geração dos mipmap, um milhão de vértices redesenhados por frame) e duas decisões mantêm-no controlável: a mesh pesada fica excluída do raycasting — um milhão de triângulos por movimento do ponteiro bloquearia a thread principal — e é substituída por uma cápsula invisível dimensionada a partir dos limites do próprio modelo; além disso, como a exportação não inclui clips de animação, a personagem recebe uma animação idle ao nível do grupo (um balanço lento e um milímetro de respiração), em vez de um esqueleto inventado.
Uma pipeline meshopt em scripts/ reduz o mesmo ficheiro a 2.9 MB; o modelo é medido e normalizado durante o carregamento, pelo que trocar de build não exige alterações ao código.
Materiais · Simplificar o material volumétrico das exportações da Tripo
As exportações da Tripo marcam a mesh com KHR_materials_volume, que chega ao three.js como um MeshPhysicalMaterial com um caminho de transmission/thickness de que esta cena não precisa nem pode suportar. Durante o carregamento, cada material é convertido para MeshStandardMaterial, mantendo o conjunto completo de mapas PBR — o mesmo aspeto, sem o custo.
Os ShaderMaterial personalizados incluem explicitamente colorspace_fragment: sem isso, escrevem valores lineares diretamente num framebuffer sRGB e são renderizados quase pretos.
Painéis musicais · Geometria real sobre uma curva
Cada painel combina quatro tipos de geometria — uma face, uma faixa periférica extrudida para criar espessura real, uma placa traseira translúcida e hit quads invisíveis — todos a partilhar um único conjunto de buffers em cache; apenas a transformação do grupo varia entre cartões. Tudo é criado plano e envolvido num grande cilindro vertical: o sulco de progresso e o relógio são incorporados na mesma curva, em vez de ficarem como seus filhos, e o preenchimento do progresso é um cutoff UV injetado num MeshBasicMaterial — redimensionar uma mesh levantaria da curva a sua extremidade mais distante.
A arte dos painéis distribui-se por três canvas consoante a frequência de atualização: a face de 1320×680 é desenhada uma vez, a faixa de tempo é redesenhada quando muda o segundo apresentado e o ícone apenas quando muda o estado de reprodução — nada de dispendioso entra no render loop. Os seis painéis transparentes não fazem depth write e recebem, a cada frame, um renderOrder por bandas segundo a distância à câmara, mantendo a oclusão correta de qualquer ângulo.
Transição do 3D para o 2D · Um cartão aterra como leitor
Uma mesh WebGL não pode transformar-se num nó DOM, pelo que a continuidade é construída a partir de três factos: a cada frame, um projetor mantém atualizada a caixa de cada cartão no espaço do ecrã — incluindo os cartões ocultos, porque o voo de regresso precisa de um lugar onde aterrar; o primeiro frame do painel DOM é exatamente o bitmap do canvas já pintado para a textura WebGL do cartão, e não uma recriação em HTML que nunca ficaria perfeitamente alinhada; e o cartão oculta-se nesse mesmo frame — dois elementos no mesmo lugar, um deles invisível.
O alargamento só começa quando o voo vai em ~35% — esticar um cartão 2:1 para uma barra 11:1 a meio do voo deformaria a imagem — e o percurso segue uma curva de Bézier quadrática arqueada para o lado, para que um cartão vindo do canto superior esquerdo contorne o artista ao encaixar. O destino volta a ser lido a cada frame: a constelação continua a derivar e um rect obtido no lançamento faria o painel aterrar ao lado do respetivo cartão.
