Autor: Theodore
Experimente ao vivo Sobre este projeto
ANOMALY é um arquivo de dezasseis animais reais, cada um centrado numa estrutura que parece não dever funcionar: a cúpula transparente cheia de fluido sobre o crânio do peixe-de-olhos-tubulares, o golpe do camarão-louva-a-deus que gera uma bolha de cavitação, a barbatana caudal ausente do peixe-lua. Cada registo, de A-001 a A-016, inclui o seu próprio modelo Tripo, que pode ser arrastado, ampliado e reposto.
A coleção é organizada pela própria anomalia e não pela taxonomia —transparência, visão, bioluminescência, camuflagem, predação, gigantismo e plano corporal, mais um filtro transversal independente dedicado ao mar profundo—, e um espécime pode pertencer a várias categorias ao mesmo tempo: a cúpula do peixe-de-olhos-tubulares e os seus olhos tubulares rotativos são duas anomalias distintas no mesmo animal. Por isso, cada registo começa pela estrutura anatómica e não pelo nome da espécie. Tudo está concentrado num único ecrã: escolher uma categoria, um cartão do carrossel ou um resultado de pesquisa substitui o conteúdo no mesmo lugar, com a placa de arquivo, as observações e uma nota de campo recolhível à esquerda, o palco 3D ao centro e os dados da espécie com um mapa de distribuição à direita.
Destaques
- Escolha qualquer um dos dezasseis registos, 01–16, na barra inferior: o palco e os dois painéis laterais trocam de conteúdo no mesmo lugar; arraste para rodar, desloque para ampliar e cada troca repõe a câmara, para que os dezasseis espécimes sejam apresentados com um tamanho comparável
- Clique na placa do arquivo: a partir da própria miniatura, transforma-se numa caixa de visualização retroiluminada — o halo é a luz que escapa pela margem da placa; amplie até 3.2× e arraste para deslocar a vista
- Filtre pela própria anomalia —transparência, visão, bioluminescência, camuflagem, predação, gigantismo e plano corporal—, mais um filtro transversal independente para o mar profundo, associado pelo habitat; um espécime pode pertencer a várias categorias ao mesmo tempo, e a pesquisa abrange nomes das espécies, nomes latinos, estruturas e IDs dos espécimes
- Enquanto um modelo é transferido, o GSAP desenha traço a traço a placa de desenho cotado do espécime enquanto um paquímetro percorre a respetiva régua — o desenho técnico chega antes do corpo e depois funde-se com a construção 3D através de um cross-fade; até um modelo em cache mantém a placa durante 1.5 segundos, para que nunca passe num instante sem se conseguir ler
Análise técnica
Recursos 3D · Levar os modelos high-poly da Tripo para a Web
Os dezasseis modelos de espécimes são gerados com Tripo; os originais têm ~60 MB e ~1.9M triângulos cada — uma densidade digna de escultura que não pode ser distribuída. Uma pipeline gltf-transform meshopt reduz a geometria para 2.4–11 MB: soldada, simplificada com uma tolerância de erro de 0.0002, podada e comprimida com meshopt. As texturas permanecem deliberadamente em 4K, em vez de sofrerem downsampling — o downsampling poupava pouco e era a principal causa da perda de nitidez —, enquanto tudo o que é entregue em 8K é reduzido para 4K, diminuindo a VRAM de cerca de 358 MB para 89 MB por mapa de cor base, sem perda visível ao tamanho apresentado no ecrã.
Cada espécime segue uma cadeia de fallback independente, GLB → imagem fixa → recorte → placa de linhas criada à mão, com uma grelha de desenho mesmo quando a placa está em falta, pelo que nenhum ficheiro ausente pode deixar o palco vazio.
Palco do espécime · Enquadramento automático e proteção do contexto
Os dezasseis modelos não foram criados segundo uma convenção comum e nenhum é transformado manualmente: cada um é medido durante o carregamento em relação à própria matriz raiz — medir no espaço global devolve a escala já aplicada, encolhendo o modelo em cada nova medição. A medição usa limites por percentis em vez de um Box3 bruto: vários destes animais têm antenas e filamentos que reúnem uma fração minúscula dos vértices, mas que ainda assim definiriam a caixa e encolheriam o corpo; recortar os extremos faz a caixa envolver a massa do animal, para que os dezasseis sejam apresentados com um peso visual comparável. O ajuste automático roda o maior eixo horizontal através do ecrã, centra-o e preenche o canvas — um novo espécime entra no catálogo e enquadra-se sozinho, com, no máximo, um pequeno ajuste por espécime (uma amêijoa é uma tampa, não um perfil).
O Canvas não usa o espécime como key: isso desmontaria e reconstruiria o contexto WebGL a cada troca, e os browsers descartam o contexto ativo mais antigo. Só a Scene interior usa key. A primitive também exige dispose={null} — a cache GLTF do drei partilha geometria entre clones, e deixar o R3F executar dispose ao desmontar destrói buffers ainda em uso.
Iluminação · Iluminado como uma vitrina, não como uma estativa de reprodução
Uma luz principal de modelação, duas luzes de recorte rasantes vindas de trás e nenhum rebatimento do chão — a maioria destes animais é escura, e uma aresta é o que separa um corpo escuro de um fundo escuro; essa é toda a função das luzes de recorte. O mapa de ambiente é gerado no local a partir de luzes de área dentro da cena (Environment fica fora da Scene com key, pelo que trocar de espécime nunca volta a gerá-lo), sem transferir qualquer HDRI nem fazer pedidos externos.
A mudança de iluminação, por si só, não conseguia separar os espécimes mais escuros — uma lula castanho-avermelhada escura e um fundo castanho quente têm valores tonais verdadeiramente próximos —, por isso o espécime fica numa suave poça de luz e a sombra de contacto recorta essa poça, abrindo a silhueta. O tone mapping usa Khronos PBR Neutral com exposição de 1.34 em vez do ACES predefinido, que reduz fortemente os meios-tons — exatamente o que ocultava estes espécimes.
Carregamento · Um estado de progresso que se recusa a mentir
O useProgress do drei conta ficheiros, não bytes: um GLB autónomo é um único item, pelo que a barra fica em zero durante toda a transferência e salta para cem no fim — o número é uma mentira. Por isso, o loader não mostra qualquer percentagem: o DrawSVGPlugin desenha traço a traço a placa de desenho cotado do espécime enquanto um paquímetro percorre a respetiva régua, afirmando apenas que o trabalho está em curso sem fingir saber quanto falta.
Quando o modelo fica pronto, a placa faz um cross-fade para a construção 3D; até um modelo em cache mantém a placa durante pelo menos 1.5 segundos, caso contrário passaria num instante sem se conseguir ler. Com prefers-reduced-motion, a animação decorativa para e o tempo mínimo de permanência é eliminado — reduzir movimento deve eliminar movimento, não funcionalidade, e nunca acrescentar espera.
