Autore: Theodore
Provalo dal vivo Su questo progetto
ANOMALY è un archivio di sedici animali reali, ciascuno incentrato su una struttura che sembra non poter funzionare: la cupola trasparente piena di fluido sopra il cranio del pesce dagli occhi a botte, il colpo del gambero mantide che genera una bolla di cavitazione, la pinna caudale mancante del pesce luna. Ogni scheda, da A-001 ad A-016, include il proprio modello Tripo, che è possibile trascinare, ingrandire e reimpostare.
La collezione è catalogata in base all'anomalia stessa anziché alla tassonomia — trasparenza, vista, bioluminescenza, mimetismo, predazione, gigantismo e piano corporeo, più un filtro trasversale indipendente dedicato agli abissi — e uno stesso esemplare può appartenere contemporaneamente a più categorie: la cupola del pesce dagli occhi a botte e i suoi occhi tubolari rotanti sono due anomalie distinte nello stesso animale. È per questo che ogni scheda si apre con la struttura anatomica invece che con il nome della specie. Tutto è racchiuso in un'unica schermata: la scelta di una categoria, di una scheda del carosello o di un risultato di ricerca sostituisce i contenuti sul posto, con la tavola d'archivio, le osservazioni e una nota di campo richiudibile a sinistra, lo stage 3D al centro e i dati della specie con la mappa di distribuzione a destra.
Punti salienti
- Seleziona una qualsiasi delle sedici schede, 01–16, dalla barra inferiore: lo stage e i due pannelli laterali cambiano contenuto sul posto; trascina per ruotare, scorri per ingrandire e a ogni cambio la camera viene reimpostata, così tutti i sedici esemplari sono presentati a dimensioni comparabili
- Fai clic sulla tavola d'archivio: dalla propria miniatura si trasforma in un visore retroilluminato — l'alone è la luce che filtra oltre il bordo della tavola; ingrandisci fino a 3.2× e trascina per spostare la vista
- Filtra in base all'anomalia stessa — trasparenza, vista, bioluminescenza, mimetismo, predazione, gigantismo, piano corporeo — oltre a un filtro trasversale indipendente per gli abissi associato all'habitat; uno stesso esemplare può appartenere contemporaneamente a più categorie e la ricerca copre nomi delle specie, nomi latini, strutture e ID degli esemplari
- Durante il download di un modello, GSAP traccia tratto dopo tratto la tavola di misurazione dell'esemplare mentre un calibro percorre il proprio righello — il progetto tecnico arriva prima del corpo, poi sfuma nella costruzione 3D; anche con un modello in cache la tavola rimane visibile per 1.5 secondi, così non passa mai troppo in fretta per essere letta
Analisi tecnica
Asset 3D · Portare sul web i modelli high-poly di Tripo
I modelli dei sedici esemplari sono generati con Tripo; gli originali pesano ~60 MB e contano ~1.9M triangoli ciascuno — una densità da scultura impossibile da distribuire. Una pipeline gltf-transform meshopt porta la geometria a 2.4–11 MB: vertici saldati, semplificazione con una tolleranza d'errore di 0.0002, ripulitura e compressione meshopt. Le texture restano volutamente in 4K anziché essere sottocampionate — il downsampling faceva risparmiare poco ed era la causa principale della perdita di nitidezza —, mentre tutto ciò che arriva in 8K viene portato a 4K, riducendo la VRAM da circa 358 MB a 89 MB per ogni mappa colore di base senza perdite visibili alle dimensioni su schermo.
Ogni esemplare segue una catena di fallback indipendente, GLB → immagine fissa → cutout → tavola lineare realizzata a mano; anche in assenza di una tavola, sullo sfondo rimane una griglia da disegno, quindi nessun file mancante può lasciare vuoto lo stage.
Stage dell'esemplare · Inquadratura automatica e protezione del contesto
I sedici modelli non sono stati creati secondo una convenzione comune e nessuno viene trasformato a mano: ciascuno viene misurato durante il caricamento rispetto alla propria matrice radice — misurare nello spazio globale restituisce la scala già applicata, rimpicciolendo il modello a ogni nuova misurazione. La misurazione usa limiti percentili anziché una Box3 grezza: molti di questi animali hanno antenne e filamenti che comprendono una frazione minima dei vertici, ma che definirebbero comunque il box e rimpicciolirebbero il corpo; eliminando gli estremi, il box racchiude la massa dell'animale, così tutti e sedici hanno un peso visivo comparabile. L'adattamento automatico orienta sullo schermo l'asse orizzontale più lungo, lo centra e riempie il canvas — un nuovo esemplare entra nel catalogo e si inquadra da solo, con al massimo una piccola correzione specifica per esemplare (una vongola è un coperchio, non un profilo).
Il Canvas non usa l'esemplare come key: in caso contrario, a ogni cambio il contesto WebGL verrebbe smontato e ricostruito e i browser eliminerebbero il contesto attivo meno recente. Solo la Scene interna usa una key. Anche primitive richiede dispose={null} — la cache GLTF di drei condivide la geometria tra i cloni e lasciare che R3F esegua il dispose durante l'unmount distrugge buffer ancora in uso.
Illuminazione · Illuminato come una vetrina, non come uno stativo da riproduzione
Una luce principale di modellazione, due luci radenti di contorno da dietro e nessun rimbalzo dal pavimento — la maggior parte di questi animali è scura, e a separare un corpo scuro da uno sfondo scuro è il bordo: è questo l'intero compito delle luci di contorno. La environment map viene precalcolata sul posto a partire da luci area all'interno della scena (Environment si trova fuori dalla Scene associata a una key, quindi il cambio di esemplare non la ricalcola mai), senza scaricare un HDRI e senza richieste esterne.
La sola reilluminazione non bastava a separare gli esemplari più scuri — un calamaro rosso-bruno scuro e uno sfondo marrone caldo hanno davvero valori tonali molto simili —, quindi l'esemplare si trova in una morbida pozza di luce, entro cui incide l'ombra di contatto, aprendo così la silhouette. Il tone mapping usa Khronos PBR Neutral con esposizione 1.34 anziché l'impostazione predefinita ACES, che comprime pesantemente i mezzitoni — proprio ciò che nascondeva questi esemplari.
Caricamento · Uno stato di avanzamento che si rifiuta di mentire
useProgress di drei conta i file, non i byte: un GLB autosufficiente è un solo elemento, quindi la barra resta a zero per l'intero download e alla fine salta a cento — quel numero è falso. Per questo il loader non mostra percentuali: DrawSVGPlugin traccia tratto dopo tratto la tavola di misurazione dell'esemplare mentre un calibro percorre il proprio righello, limitandosi a comunicare che il lavoro è in corso senza fingere di sapere quanto ne resta.
Quando il modello è pronto, la tavola sfuma nella costruzione 3D; anche con un modello in cache rimane visibile per almeno 1.5 secondi, altrimenti passerebbe troppo in fretta per essere letta. Con prefers-reduced-motion l'animazione decorativa si interrompe e la durata minima viene eliminata — ridurre il movimento dovrebbe rimuovere il movimento, non le funzioni, e non aggiungere mai attesa.
