Auteur: Theodore
Essayer en direct À propos de ce projet
ANOMALY est une archive de seize animaux réels, chacun articulé autour d’une structure qui semble défier les lois du vivant : le dôme transparent rempli de liquide au-dessus du crâne du poisson à tête transparente, la frappe à bulle de cavitation de la crevette-mante, la nageoire caudale absente du poisson-lune. Chaque fiche, de A-001 à A-016, possède son propre modèle Tripo, qu’il est possible de faire pivoter, de zoomer et de réinitialiser.
La collection est classée selon l’anomalie elle-même plutôt que par taxonomie — transparence, vision, bioluminescence, camouflage, prédation, gigantisme et plan d’organisation corporelle, auxquels s’ajoute un filtre transversal consacré aux grands fonds —, et un même spécimen peut relever de plusieurs catégories à la fois : le dôme du poisson à tête transparente et ses yeux tubulaires rotatifs constituent deux anomalies distinctes chez un seul animal. C’est pourquoi chaque fiche met d’abord en avant la structure anatomique, et non le nom de l’espèce. Tout tient sur un seul écran : choisir une catégorie, une carte du carrousel ou un résultat de recherche remplace le contenu sur place, avec la plaque d’archive, les observations et une note de terrain repliable à gauche, la scène 3D au centre, puis les données de l’espèce et sa carte de répartition à droite.
Points forts
- Choisissez l’une des seize fiches, 01–16, dans le rail inférieur : la scène et les deux panneaux latéraux remplacent leur contenu sur place. Faites glisser pour tourner, utilisez le défilement pour zoomer ; chaque changement réinitialise la caméra afin que les seize spécimens soient présentés à une taille comparable
- Un clic sur la plaque d’archive la fait passer de sa propre miniature à un caisson d’observation rétroéclairé — le halo provient de la lumière qui s’échappe par les bords de la plaque ; grossissement jusqu’à 3.2× et déplacement par glisser.
- Filtrer selon l’anomalie elle-même — transparence, vision, bioluminescence, camouflage, prédation, gigantisme, plan d’organisation corporelle —, avec en plus un filtre transversal sur les grands fonds fondé sur l’habitat ; un même spécimen peut relever de plusieurs catégories à la fois, et la recherche couvre les noms d’espèces, les noms latins, les structures et les identifiants des spécimens
- Pendant le téléchargement d’un modèle, GSAP trace trait par trait la planche de mesure du spécimen tandis qu’un pied à coulisse parcourt sa règle — le plan technique précède le corps, puis se fond dans la construction 3D ; même pour un modèle en cache, la planche reste affichée 1.5 seconde afin de ne jamais disparaître avant d’avoir pu être lue
Analyse technique
Ressources 3D · Porter les modèles high-poly de Tripo sur le Web
Les seize modèles de spécimens sont générés avec Tripo ; les originaux pèsent chacun ~60 MB pour ~1.9M triangles — une densité de niveau sculpture impossible à livrer. Une pipeline gltf-transform meshopt ramène la géométrie à 2.4–11 MB : sommets soudés, simplification avec une tolérance d’erreur de 0.0002, élagage et compression meshopt. Les textures restent volontairement en 4K plutôt que d’être sous-échantillonnées — le downsampling apportait peu et constituait la principale cause du manque de netteté —, tandis que tout fichier livré en 8K est ramené à 4K, faisant passer la VRAM d’environ 358 MB à 89 MB par texture de couleur de base, sans perte visible à la taille affichée à l’écran.
Chaque spécimen dispose de sa propre chaîne de fallback : GLB → image fixe → détourage → planche au trait réalisée à la main. Une grille de dessin reste présente même derrière une planche manquante, de sorte qu’aucun fichier absent ne peut laisser la scène vide.
Scène des spécimens · Cadrage automatique et protection du contexte
Les seize modèles n’ont pas été créés selon une convention commune et aucun n’est transformé à la main : chacun est mesuré au chargement par rapport à sa propre matrice racine — une mesure en world space relit l’échelle déjà appliquée et réduit le modèle à chaque nouvelle mesure. La mesure utilise des limites par percentiles plutôt qu’une Box3 brute : plusieurs de ces animaux possèdent des antennes et des filaments qui ne regroupent qu’une infime fraction des vertices, mais qui définiraient malgré tout la boîte et réduiraient le corps ; écarter les extrêmes permet d’encadrer la masse de l’animal, afin que les seize présentent un poids visuel comparable. L’ajustement automatique oriente le plus long axe horizontal en travers de l’écran, le centre et remplit la zone de rendu — un nouveau spécimen peut être ajouté au catalogue et se cadre de lui-même, avec tout au plus une légère correction propre à chaque spécimen (une palourde se présente comme un couvercle, pas comme un profil).
Le Canvas n’est pas keyed sur le spécimen : cela détruirait puis reconstruirait le contexte WebGL à chaque changement, et les navigateurs abandonnent le plus ancien contexte actif. Seule la Scene interne reçoit une key. Le primitive exige également dispose={null} — le cache GLTF de drei partage la géométrie entre les clones ; laisser R3F la libérer au démontage détruirait des buffers encore utilisés.
Éclairage · Éclairé comme une vitrine, pas comme un statif de reproduction
Une lumière principale de modelage, deux liserés rasants par l’arrière et aucun rebond lumineux au sol — la plupart de ces animaux sont sombres, et c’est le contour qui détache un corps sombre d’un fond sombre : tout le rôle des liserés est là. L’environment map est précalculée sur place à partir de lumières surfaciques placées dans la scène (Environment se trouve hors de la Scene associée à une key, de sorte qu’un changement de spécimen ne la recalcule jamais), sans téléchargement HDRI ni requête externe.
Rééclairer ne suffisait pas à détacher les spécimens les plus sombres — un calmar brun-rouge foncé et un fond brun chaud ont réellement des valeurs tonales très proches — ; le spécimen se tient donc dans une douce nappe de lumière, dans laquelle l’ombre de contact mord pour ouvrir la silhouette. Le tone mapping utilise Khronos PBR Neutral avec une exposition de 1.34 plutôt que la valeur ACES par défaut, qui assombrit fortement les tons moyens — exactement ce qui enfouissait ces spécimens.
Chargement · Un indicateur de progression qui refuse de mentir
useProgress de drei compte les fichiers, pas les octets : un GLB autonome ne représente qu’un seul élément ; la barre reste donc à zéro pendant tout le téléchargement, puis bondit à cent à la fin — ce chiffre ment. Le loader n’affiche donc aucun pourcentage : DrawSVGPlugin trace trait par trait la planche de mesure du spécimen pendant qu’un pied à coulisse parcourt sa règle, indiquant seulement qu’un travail est en cours sans prétendre savoir ce qu’il en reste.
Une fois le modèle prêt, la planche se fond dans la construction 3D ; même pour un modèle en cache, elle reste affichée au moins 1.5 seconde, sans quoi elle disparaîtrait avant d’avoir pu être lue. Avec prefers-reduced-motion, l’animation décorative s’arrête et la durée minimale d’affichage est supprimée — réduire les mouvements doit supprimer du mouvement, pas des fonctions, et ne jamais ajouter d’attente.
