Autor: Theodore
Live ausprobieren Über dieses Projekt
ANOMALY ist ein Archiv von sechzehn realen Tieren, die jeweils eine Struktur besitzen, die eigentlich nicht funktionieren dürfte: die transparente, flüssigkeitsgefüllte Kuppel über dem Schädel des Glaskopffischs, der durch eine Kavitationsblase verstärkte Schlag des Fangschreckenkrebses, die fehlende Schwanzflosse des Mondfischs. Jeder Eintrag von A-001 bis A-016 besitzt ein eigenes Tripo-Modell, das sich drehen, zoomen und zurücksetzen lässt.
Die Sammlung ist nach der Anomalie selbst geordnet, nicht nach Taxonomie — Transparenz, Sehen, Biolumineszenz, Tarnung, Prädation, Gigantismus und Körperbau, ergänzt um einen quer dazu liegenden Tiefsee-Filter —, und ein Exponat kann gleichzeitig mehreren Kategorien angehören: Die Kuppel des Glaskopffischs und seine drehbaren Röhrenaugen sind zwei getrennte Anomalien an ein und demselben Tier. Deshalb beginnt jeder Eintrag mit der anatomischen Struktur statt mit dem Artnamen. Alles bleibt auf einen einzigen Bildschirm beschränkt: Die Auswahl einer Kategorie, einer Karussellkarte oder eines Suchergebnisses tauscht die Inhalte direkt an Ort und Stelle aus — links Archivtafel, Beobachtungen und eine einklappbare Feldnotiz, in der Mitte die 3D-Bühne, rechts Artendaten und Verbreitungskarte.
Highlights
- Einen der sechzehn Einträge, 01–16, in der unteren Leiste auswählen, und Bühne sowie beide Seiten-Panels tauschen ihre Inhalte direkt an Ort und Stelle aus; ziehen zum Drehen, scrollen zum Zoomen. Bei jedem Wechsel wird die Kamera zurückgesetzt, sodass alle sechzehn Exponate in vergleichbarer Größe erscheinen
- Ein Klick auf die Archivtafel lässt sie aus ihrem eigenen Thumbnail zu einem hinterleuchteten Sichtkasten morphen — der Lichtschein entsteht durch Licht, das an den Kanten der Tafel austritt; bis zu 3.2× vergrößern und per Ziehen verschieben.
- Nach der Anomalie selbst filtern — Transparenz, Sehen, Biolumineszenz, Tarnung, Prädation, Gigantismus, Körperbau —, ergänzt um einen quer dazu liegenden Tiefsee-Filter auf Basis des Lebensraums; ein Exponat kann gleichzeitig mehreren Kategorien angehören, und die Suche erfasst Artnamen, lateinische Namen, Strukturen und Exponat-IDs
- Während ein Modell geladen wird, zeichnet GSAP die vermessene Linientafel des Exponats Strich für Strich, während ein Messschieber an seiner Skala entlangfährt — der Blueprint erscheint vor dem Körper und blendet anschließend per Crossfade in den 3D-Aufbau über; selbst bei einem gecachten Modell bleibt die Tafel 1.5 Sekunden stehen, damit sie nie ungelesen vorbeiblitzt
Technische Analyse
3D-Assets · Tripo-High-Poly-Modelle fürs Web optimieren
Die sechzehn Exponatmodelle wurden mit Tripo erzeugt; die Originale liegen jeweils bei ~60 MB und ~1.9M Dreiecken — eine Dichte auf Skulptur-Niveau, die sich nicht ausliefern lässt. Eine gltf-transform meshopt-Pipeline reduziert die Geometrie auf 2.4–11 MB: Vertices werden verschweißt, mit einer Fehlertoleranz von 0.0002 vereinfacht, bereinigt und mit meshopt komprimiert. Die Texturen bleiben bewusst in 4K, statt heruntergerechnet zu werden — Downsampling sparte wenig und war die Hauptursache für Unschärfe —, während alles in 8K auf 4K reduziert wird; dadurch sinkt der VRAM-Bedarf pro Basisfarbkarte von ungefähr 358 MB auf 89 MB, ohne sichtbaren Verlust bei der Bildschirmgröße.
Jedes Exponat besitzt eine unabhängige Fallback-Kette: GLB → Standbild → Freisteller → handgezeichnete Linientafel. Selbst hinter einer fehlenden Tafel liegt ein Zeichenraster, sodass keine fehlende Datei die Bühne leer lassen kann.
Exponatbühne · Automatische Einpassung und Kontextschutz
Die sechzehn Modelle wurden nicht nach einer gemeinsamen Konvention erstellt, und keines wird von Hand transformiert: Jedes wird beim Laden relativ zu seiner eigenen Root-Matrix vermessen — eine Messung im World Space liest die bereits angewendete Skalierung zurück und verkleinert das Modell bei jeder erneuten Messung. Für die Messung werden Perzentilgrenzen statt einer rohen Box3 verwendet: Mehrere dieser Tiere besitzen Antennen und Filamente, auf die nur ein winziger Anteil der Vertices entfällt, die aber dennoch die Box bestimmen und den Körper verkleinern würden; durch das Abschneiden der Extremwerte umfasst die Box die Masse des Tiers, sodass alle sechzehn mit vergleichbarem visuellem Gewicht erscheinen. Die automatische Einpassung richtet die längste horizontale Achse über den Bildschirm aus, zentriert sie und füllt die Zeichenfläche — ein neues Exponat wird in den Katalog aufgenommen und rahmt sich selbst ein, höchstens mit einer kleinen Korrektur pro Exponat (eine Muschel ist ein Deckel, kein Profil).
Der Canvas wird nicht über das Exponat gekeyt: Andernfalls würde der WebGL-Kontext bei jedem Wechsel ab- und neu aufgebaut, und Browser verwerfen den ältesten aktiven Kontext. Nur die innere Scene erhält einen Key. Das Primitive benötigt außerdem dispose={null} — der GLTF-Cache von drei teilt Geometrie zwischen Klonen; würde R3F sie beim Unmount entsorgen, würden noch verwendete Buffer zerstört.
Beleuchtung · Wie eine Vitrine ausgeleuchtet, nicht wie ein Reprostativ
Ein modellierendes Hauptlicht, zwei von hinten streifende Kantenlichter und keine Bodenaufhellung — die meisten dieser Tiere sind dunkel, und erst eine Kante trennt einen dunklen Körper von einem dunklen Grund; genau das ist die Aufgabe der Kantenlichter. Die Environment Map wird direkt aus Flächenlichtern innerhalb der Szene gebacken (Environment liegt außerhalb der über einen Key gesteuerten Scene, sodass sie beim Wechsel des Exponats nie neu gebacken wird), ohne HDRI-Download und ohne externe Anfrage.
Allein durch eine neue Ausleuchtung ließen sich die dunkelsten Exponate nicht absetzen — ein dunkel rotbrauner Kalmar und ein warmbrauner Grund liegen im Helligkeitswert tatsächlich sehr nah beieinander —, daher steht das Exponat in einem weichen Lichtpool, in den sich der Kontaktschatten einschneidet und so die Silhouette öffnet. Für das Tone Mapping kommt Khronos PBR Neutral mit einer Belichtung von 1.34 statt des ACES-Standards zum Einsatz, der die Mitteltöne stark absenkt — genau das hatte diese Exponate versinken lassen.
Laden · Ein Fortschrittsstatus, der nicht lügt
useProgress von drei zählt Dateien, nicht Bytes: Ein eigenständiges GLB ist ein einzelnes Element, daher bleibt der Balken während des gesamten Downloads bei null und springt am Ende auf hundert — diese Zahl lügt. Darum zeigt der Loader keine Prozentangabe: DrawSVGPlugin zeichnet die vermessene Linientafel des Exponats Strich für Strich, während ein Messschieber an seiner Skala entlangfährt; so signalisiert der Loader lediglich, dass gearbeitet wird, ohne vorzugeben, zu wissen, wie viel noch aussteht.
Sobald das Modell bereit ist, blendet die Tafel per Crossfade in den 3D-Aufbau über; selbst bei einem gecachten Modell bleibt die Tafel mindestens 1.5 Sekunden stehen, sonst würde sie ungelesen vorbeiblitzen. Unter prefers-reduced-motion stoppt die dekorative Animation und die Mindesthaltezeit entfällt — weniger Bewegung sollte Bewegung entfernen, nicht Funktion, und niemals zusätzliche Wartezeit verursachen.
