Unsere Seite wirkt flach und austauschbar.
3D-Webdesign & WebGL
Tiefe, die man spürt.
3D auf Websites ist gerade überall — und meistens falsch eingesetzt. Ein rotierendes Objekt, das nichts erklärt, kostet Ladezeit und Akku. Richtig eingesetzt zeigt Räumlichkeit ein Produkt von allen Seiten, macht einen Ablauf begreifbar und hebt einen Auftritt sichtbar vom Wettbewerb ab.
Ausgangslage
Typisch, wenn Sie
hier landen.
Wir haben ein erklärungsbedürftiges Produkt, das man anfassen können müsste.
Der Wettbewerb sieht aus wie wir — nur mit anderem Logo.
Leistungsumfang
Das ist enthalten.
Konzept zuerst: was soll räumlich werden und warum
Interaktive Produkt- oder Objektansicht zum Drehen
Scrollgesteuerte Szenen, die einen Ablauf Schritt für Schritt zeigen
Tiefeneffekte über CSS-Transformationen, wo kein WebGL nötig ist
WebGL nur dort, wo es den Aufwand rechtfertigt
Reduzierte Fassung für schwächere Geräte und Mobilfunk
Statisches Bild als Rückfallebene, wenn 3D nicht startet
Rücksicht auf reduzierte Bewegung im Betriebssystem
Nutzen
Was sich ändert.
Räumlichkeit hält Menschen länger auf der Seite — messbar an Verweildauer und Scrolltiefe.
Was man drehen kann, muss man nicht erklären.
Der sichtbarste Unterschied zum Wettbewerb, der dieselbe Vorlage benutzt.
Ablauf
In drei Schritten.
Prüfen
Lohnt sich 3D hier überhaupt — oft reicht Tiefenwirkung ohne WebGL.
Bauen
Szene, Steuerung, Rückfallebene, Ladeverhalten.
Messen
Bildrate auf einem Mittelklasse-Telefon, nicht auf dem Entwicklerrechner.
Live-Beispiel
Anfassen statt
beschreiben.
Bewegen Sie den Zeiger über die Karte oder ziehen Sie am Objekt. Auf dem Handy genügt Wischen. Alles läuft ohne zusätzliche Bibliothek — reine Transformationen, ein paar Kilobyte.
Ziehen zum Drehen
Ehrlich dazuDiese Szene wiegt rund vier Kilobyte und startet erst, wenn sie im Sichtfeld ist. Wer im Betriebssystem reduzierte Bewegung eingestellt hat, sieht ein ruhiges Standbild.
Vier Stufen
Wann 3D
verkauft.
Der Unterschied zwischen einem teuren Spielzeug und einem Verkaufsargument liegt nicht in der Technik, sondern in der Frage davor.
Ohne Konzept
Ein rotierendes Objekt, das nichts erklärt. Sieht in der Präsentation gut aus, kostet auf dem Handy Akku und Ladezeit.
Mit Konzept
Die Szene zeigt genau das, was der Text sonst erklären müsste — und hört auf, sobald sie ihre Aufgabe erfüllt hat.
Mit Rückfallebene
Schwaches Gerät, Datensparmodus oder reduzierte Bewegung: Es erscheint ein Standbild statt einer leeren Fläche.
Mit Messung
Bildrate auf einem Mittelklasse-Telefon, Ladezeit im Mobilfunk, Verweildauer vorher und nachher.
Aus der Produktion
3D-Animation
in Bewegung.
Nicht jede räumliche Wirkung muss im Browser gerechnet werden. Für Intros, Produktbilder und Social-Formate ist eine gerenderte Animation oft der bessere Weg — sie läuft überall gleich und kostet den Besucher keine Rechenleistung.
Größenordnung
Was Räumlichkeit
kostet.
0 kBwiegt die Szene auf dieser Seite
0 fpsZielbildrate auf einem Mittelklasse-Telefon
0 €Tiefeneffekte als Zusatz im Projekt
0 €interaktive Produktansicht mit WebGL
Fragen
Was hier gefragt wird.
Wird die Seite dadurch langsam?+
Nicht, wenn nur Transformationen animiert werden und die Szene erst startet, wenn sie sichtbar ist. Auf schwachen Geräten liefern wir eine reduzierte Fassung aus.
Braucht das WebGL oder three.js?+
Oft nicht. Ein großer Teil der Wirkung entsteht über CSS-Transformationen — das läuft überall und wiegt ein paar Kilobyte statt mehrerer hundert.
Funktioniert das auf dem iPhone?+
Ja. Wir bauen mit translate3d und harten Hintergrundfarben, weil iOS-Safari sonst Flächen weiß zeichnet.
Was ist mit Menschen, die Bewegung reduziert haben?+
Die bekommen die Szene als ruhiges Standbild. Das ist Pflicht, nicht Höflichkeit.
Weitere Themen