Warum 3D im Web Marken auffallen lässt
Wie interaktive 3D-Erlebnisse im Browser Aufmerksamkeit erzeugen — wann sie sich wirklich lohnen, was sie leicht statt schwer wirken lässt, und das Handwerk, das eine Szene, die man sich merkt, von einer trennt, die nur lädt.
3D im Browser ist längst kein Spielzeug mehr. Mit Three.js und WebGL lassen sich heute Erlebnisse bauen, die früher native Software gebraucht hätten — direkt auf der Website, ohne Installation. Jemand landet auf einer Seite, zieht mit der Maus, und ein Produkt dreht sich in Echtzeit unter echtem Licht. Vor zehn Jahren war das ein Download und ein Ladebalken. Heute ist es ein Link, den du jemandem schicken kannst.
Genau dieser Wechsel ist der Grund, warum Marken mich immer wieder darauf ansprechen. Ein flaches Bild sagt „hier ist das Ding". Eine 3D-Szene sagt „hier ist das Ding, und es verhält sich so, wie es sich in deiner Hand verhalten würde". Das Zweite vergisst man schwerer, und schwer zu vergessen zu sein ist ziemlich genau das, wofür eine Marke bezahlt.
Von der Tech-Demo zum Werkzeug
Jahrelang war 3D im Web ein Partytrick. Pro Saison fand man eine beeindruckende Seite, meistens ein Auto oder ein Sneaker-Launch, alle in der Branche teilten sie und bauten danach wieder normale Seiten. Es war teuer, fragil und langsam, und auf der Hälfte der Handys, die Leute tatsächlich benutzten, ging es kaputt.
Das ist leise vorbei. WebGL ist heute überall, die Tools sind reif geworden, und React Three Fiber hat komplexe Szenen wartbar gemacht statt zur einmaligen Heldentat. Die Lücke zwischen „wir könnten 3D machen" und „wir können an einem Dienstag 3D ausliefern" hat sich geschlossen, während viele nicht hingeschaut haben. Die interessante Frage ist nicht mehr können wir, sondern sollten wir — und über die lässt sich viel besser streiten.
Wann sich 3D lohnt
Nicht jedes Projekt braucht 3D. Aber wenn ein Produkt, ein Raum oder eine Idee schwer in Worten zu fassen ist, kann eine interaktive Szene mehr sagen als zehn Bilder.
- Produkte, die man drehen und aus jeder Perspektive sehen will. Möbel, Hardware, alles, wo die Form das Verkaufsargument ist und der gewählte Winkel eines Fotografen genauso viel versteckt wie er zeigt.
- Ateliers und Räume, die ein Gefühl transportieren sollen. Ein Raum, durch den du dich bewegen kannst, sagt mehr darüber, wie es ist, dort zu sein, als es eine Galerie aus Standbildern je kann.
- Konfigurierbares, wo der Kunde ein Material, eine Farbe, ein Layout ändern und das Ergebnis sofort sehen will, statt es sich vorzustellen.
- Marken, die zeigen wollen, dass sie anders denken. Manchmal ist das Medium die Botschaft, und ein Studio, das ein durchdachtes 3D-Erlebnis baut, sagt dir etwas darüber, wie es arbeitet, bevor du ein Wort gelesen hast.
Der rote Faden: 3D verdient sich seinen Platz, wenn die dritte Dimension Information trägt. Wenn ein Standbild alles sagt, nimm das Foto. Es lädt schneller, es rankt besser, und niemandes Laptop-Lüfter dreht auf.
Wann nicht
Ich sage den unbeliebten Teil laut. Das meiste 3D auf Marketing-Seiten ist da, weil jemand es bei einem Wettbewerber gesehen hat, nicht weil der Inhalt Tiefe gebraucht hätte. Ein sich drehendes Logo im Hero ist das moderne Äquivalent zum Flash-Intro: technisch beeindruckend, emotional tot, und das Erste, von dem dir die Analytics sagen, dass die Leute es überspringen.
Gutes 3D fällt nicht durch Effekte auf, sondern durch das Gefühl, das es hinterlässt.
3D, das existiert, um zu beweisen, dass das Team 3D kann, liest sich immer genau so. Es kostet dich Ladezeit, Akku und Zugänglichkeit, und es gibt ein paar Sekunden „aha, nett" zurück, bevor jemand weiterscrollt. Wenn du nicht beantworten kannst, „was versteht der Nutzer jetzt, was er aus einem Foto nicht verstanden hätte", dann dekorierst du, und Deko in dieser Preisklasse ist schwer zu rechtfertigen.
Das Handwerk, das keiner sieht
Die Sache mit einer guten 3D-Szene: Wenn sie funktioniert, denkt niemand an das 3D. Man denkt an das Produkt, den Raum, die Stimmung. Die Technik verschwindet, und Technik zum Verschwinden zu bringen ist echte Arbeit.
Das meiste davon ist Licht. Ein Modell mit schlechtem Licht sieht aus wie ein Videospiel von 2008; dasselbe Modell mit durchdachtem Licht, weichen Schatten und einer ehrlichen Reflexion sieht aus wie ein Foto, das sich zufällig bewegt. Ich verbringe mehr Zeit mit dem Lichtaufbau und der Environment Map als mit der Geometrie, denn da entscheidet sich im Bauch des Betrachters, ob etwas „billig" oder „teuer" wirkt, auch wenn er nicht sagen könnte, warum.
Die Kamera zählt genauso viel. Eine frei kreisende Kamera, mit der man das Modell herumschleudern kann, fühlt sich nach Tech-Demo an. Eine Kamera mit sanften Grenzen, ein bisschen Dämpfung, einem Gespür dafür, wo sie ruhen will, fühlt sich gestaltet an. Zurückhaltung liest sich als Souveränität. Die Szene, die dich weniger tun lässt, das Wenige aber gut anfühlen lässt, schlägt fast immer die, die dir jede Steuerung an den Kopf wirft.
Performance ist das ganze Spiel
Eine schöne Szene, die acht Sekunden zum Erscheinen braucht, ist ein schöner Reinfall. Im Web ist Performance kein letzter Schliff, sondern die Einschränkung, in der du vom ersten Tag an gestaltest.
Die Zahlen, auf die es wirklich ankommt, sind nicht die Polygonzahl, auf die sich alle fixieren. Es sind Draw Calls, Texturspeicher und wie viel du ausliefert, bevor das erste Bild steht. Ein paar praktische Dinge, die ich in jedem Projekt mache:
- Die Geometrie komprimieren. Draco oder meshopt machen aus einem klobigen Modell etwas, das über eine normale Verbindung ankommt, ohne einen Fortschrittsbalken, über den sich die Leute ärgern.
- Die Texturen richtig komprimieren. KTX2 mit Basis heißt, die GPU bekommt ein Format, das sie mag, statt eines riesigen PNGs, das sie in den Speicher entpacken muss und daran erstickt. Texturspeicher, nicht Dreiecke, killt Handys.
- Mobil zuerst budgetieren. Die Szene muss auf einem Mittelklasse-Handy in der Bahn gut sein, nicht nur auf meinem Desktop mit dedizierter GPU. Wenn es nur auf meiner Maschine läuft, läuft es nicht.
- In Etappen laden. Sofort etwas zeigen, es schärfen, während die Assets ankommen. Ein erst unscharfes, dann scharfes Modell schlägt jedes Mal eine leere Fläche mit Spinner.
- Aufhören zu rendern, wenn sich nichts bewegt. Eine Szene, die 60 Bilder pro Sekunde rendert, während sie völlig stillsteht, heizt nur grundlos jemandem den Schoß. Render on Demand, und der Akku bedankt sich.
Nichts davon ist glamourös, und alles davon ist der Unterschied zwischen einer Szene, die begeistert, und einer, die nur lädt.
Zugänglichkeit ist nicht optional
Ein 3D-Erlebnis, das nur für jemanden mit schneller Verbindung, guter GPU, Maus und ohne Bewegungsempfindlichkeit funktioniert, ist nicht fertig. Es ist eine Demo für Leute, die genau so sind wie der, der es gebaut hat.
Also: ein echter Fallback für Browser und Geräte, die es nicht ausführen können oder sollten. prefers-reduced-motion respektieren und das Ganze für Leute, denen schlecht wird, deutlich beruhigen. Dafür sorgen, dass die eigentliche Information — Produktname, Preis, Beschreibung — in echtem HTML lebt, das eine Suchmaschine und ein Screenreader lesen können, und nicht in einem Canvas gefangen ist, das für beide unsichtbar ist. Das 3D ist die Erlebnisschicht obendrauf. Darunter muss die Seite trotzdem eine Seite sein.
Was es für eine Marke wirklich tut
Wenn das alles sitzt, ist der Lohn nicht „es sieht cool aus". Es ist Zeit und Vertrauen. Leute bleiben länger, weil das Ding Aufmerksamkeit belohnt. Sie verstehen das Produkt besser, weil sie es selbst gedreht haben, statt einen gewählten Winkel gezeigt zu bekommen. Und sie gehen mit dem leisen Gefühl, dass dem, der das gemacht hat, die Details wichtig waren — genau der Eindruck, den eine Marke ihr ganzes Budget lang woanders zu kaufen versucht.
Performance, Zugänglichkeit und ein klares Konzept entscheiden, ob eine 3D-Szene begeistert oder nur lädt. Genau da setzt meine Arbeit an. Der WebGL-Teil ist, ehrlich gesagt, der leichte. Zu wissen, ob das Projekt es überhaupt braucht, ist der Teil, für den es sich zu zahlen lohnt.