Wann Three.js eine Marketing-Website verbessert
Räumliche Interaktion verdient ihren Platz, wenn sie ein Angebot klarer, ein System erkundbarer oder einen Übergang erinnerbarer macht.
HTML bleibt die Quelle der Wahrheit
Kernbotschaften, Links und Belege bleiben serverseitig gerendert. WebGL erweitert das Interface, es ist nie der einzige Ort, an dem Bedeutung existiert. Der praktische Test ist einfach: JavaScript abschalten und prüfen, ob die Seite ihr Argument noch macht. Wenn nicht, hat die Website ihre Sichtbarkeit gegen einen Effekt getauscht — und betroffen sind nicht nur Suchmaschinen, denn genau das bekommt auch ein Besucher mit schlechter Verbindung.
Motion braucht eine Aufgabe
Kamerabewegung soll Hierarchie zeigen, Shader sollen einen Übergang tragen, ein 3D-Objekt soll das Thema verkörpern. Bridge Consult setzt beim Öffnen seiner Case Study eine Brücke zusammen, FIDIC blättert einen Vertragsatlas auf. Keines ist ein Modal, keines ist Dekoration — jedes ist das Thema der Seite in Bewegung. Was nicht beantworten kann, wofür es da ist, fliegt raus; auf dieser Website war das der größte Teil des ersten Entwurfs.
Performance ist Art Direction
DPR-Caps, Texture-Budgets, adaptive Frameraten, Pause bei verborgenem Tab und isolierte Rendering-Layer prägen die Ästhetik genauso wie Materialien. Schwache Geräte werden ganz ausgenommen: Save-Data, zwei Gigabyte Speicher oder zwei Hardware-Threads bekommen den CSS-Hintergrund statt eines WebGL-Kontexts — also das, was ihnen ein WebGL-Fehler ohnehin hinterließe. Es gibt keinen zweiten Codepfad zu pflegen.
Die Handy-GPU ist ein anderes Budget
Eine am Desktop bequeme Szene kann auf einem Telefon unbrauchbar sein, aus Gründen, die im lokalen Test nie auftauchen. Diese Website renderte im Archiv jeden Frame doppelt — die Szene in ein Render-Target, dann ein Vollbild-Composite für Korn und Vignette — und auf einer Handy-GPU ist diese Speicherbandbreite das gesamte Budget. Jetzt wird direkt auf den Bildschirm gezeichnet, das Composite läuft nur während eines Übergangs.
Reduced Motion ist kein Ausschalter
prefers-reduced-motion zu respektieren heißt verlangsamen, nicht einfrieren. Diese Website hielt ihr Preloader-Objekt mit animation-play-state an, und auf jedem Telefon mit aktiviertem Reduce Motion las sich das als kaputte Seite — ein stillstehender Würfel. Jetzt dreht er sich langsam, statt zu sterben. Accessibility-Einstellungen beschreiben eine Vorliebe zu Bewegung, nicht den Wunsch nach einem angehaltenen Interface.
Spät laden — oder gar nicht
Die three.js-Runtime ist rund 132 KB komprimiert und ein halbes Megabyte zum Parsen — wann sie lädt, zählt so viel wie ob. Auf dieser Website beginnt der Download nach etwa drei Sekunden, weit nach dem Fenster, das den LCP bestimmt. Weiterzugehen ist nicht automatisch besser: Die naheliegende nächste Optimierung machte das Bundle größer — so etwas verrät nur eine Messung.