3D-Webseiten mit WebGL: Wann sie sich wirklich lohnen

Eine 3D-Webseite lohnt sich, wenn der Raum, das Produkt oder das Erlebnis selbst die Botschaft ist: ein Weingut mit seinen Lagen, eine Ferienregion, ein Produkt, das man drehen möchte. Für reine Informationsseiten ist 3D meist Ballast. Entscheidend ist, dass der Inhalt normales HTML bleibt, die Szene am Handy flüssig läuft und es für ältere Geräte einen Rückfall gibt.

WebGL und Three.js in zwei Sätzen

WebGL ist eine Schnittstelle, über die Webseiten direkt die Grafikkarte nutzen, ohne Plugin, in allen gängigen Browsern. Three.js ist eine freie Bibliothek, die darauf aufbaut und Szenen, Kameras, Licht und 3D-Modelle handhabbar macht.

Der Nachfolger WebGPU ist laut web.dev inzwischen in allen großen Browsern angekommen, aber noch nicht auf jedem Gerät und Betriebssystem. Für Webseiten, die bei allen funktionieren sollen, bleibt WebGL deshalb die sichere Basis.

Wann sich 3D lohnt

3D ist dann stark, wenn es etwas zeigt, das ein Foto nicht zeigen kann: Raum, Form, Bewegung, Zusammenhang.

Branche	Typischer Einsatz	Was 3D hier leistet
Produkte (Möbel, Technik, Schmuck)	drehbare Produktansicht, Farben und Varianten	Kunden sehen das Produkt von allen Seiten, bevor sie kaufen
Tourismus und Regionen	begehbare Landschaft, Wanderrouten, Panoramen	Lust auf den Ort, bevor man dort ist
Weingüter	Lagen als Landschaft, Weg der Traube bis zur Flasche	Herkunft wird sichtbar statt nur behauptet
Immobilien	Gebäudemodell, Wohnungen im Haus, Lage im Viertel	Orientierung, lange bevor der Bau steht
Marken und Kampagnen	Erlebnis rund um ein Produkt oder einen Launch	Eine Seite, über die man spricht und die man teilt

Wann eher nicht

Ehrlich gesagt: oft. 3D passt schlecht, wenn

• Besucher schnell eine Information brauchen, etwa Öffnungszeiten einer Ordination oder Formulare einer Behörde
• die Szene nur Dekoration wäre, ohne etwas zu erzählen
• es keine guten 3D-Modelle gibt und das Budget für deren Erstellung fehlt
• der Termin so knapp ist, dass für Tests auf echten Geräten keine Zeit bleibt

In solchen Fällen bringen gute Fotos, klare Texte und dezente Animationen mehr. Eine schnelle, schöne Seite ohne 3D ist besser als eine langsame mit.

Typische Bausteine

Partikel

Tausende kleine Punkte, die sich zu Formen zusammensetzen, auseinanderfliegen und neu ordnen. Partikel wirken leicht und modern und brauchen keine aufwendigen 3D-Modelle. Ein Beispiel ist unsere eigene Startseite: Beim Scrollen formen Partikel erst den Schriftzug, dann einen Globus mit Verbindungen rund um die Welt und schließlich ein Browserfenster. Wer „Bewegung reduzieren“ eingestellt hat, sieht eine ruhige, statische Fassung.

Scroll-Animation

Die Szene folgt dem Scrollen: Die Kamera fährt durch eine Landschaft, ein Produkt zerlegt sich in seine Teile. Werkzeuge wie GSAP ScrollTrigger koppeln die Animation an die Scrollposition. Wichtig: Das normale Scrollen bleibt erhalten. Seiten, die das Scrollen „kapern“, fühlen sich schnell zäh an.

3D-Produktansicht

Ein Modell, das man mit Finger oder Maus dreht und zoomt. Das Standardformat ist glTF, das die Khronos Group selbst „das JPEG für 3D“ nennt. Für einfache Fälle gibt es mit model-viewer eine fertige Komponente von Google, die auf vielen Handys auch eine Ansicht im eigenen Raum (AR) anbietet.

wimmer-webservices.com/3d-modell

Shader-Hintergründe

Fließende Farben, Licht oder Struktur hinter dem Inhalt, direkt auf der Grafikkarte berechnet. Dezent eingesetzt geben sie einer Seite Tiefe, ohne vom Text abzulenken.

Motion Graphics

Animierte Logos, Schrift und Kennzahlen als kurze, gestaltete Sequenz: im Code gebaut statt als Video. Das bleibt in jeder Größe gestochen scharf, wiegt nur wenige Kilobyte und lässt sich jederzeit anhalten. Gute Motion-Graphics arbeiten mit denselben Regeln wie ein Trickfilm – Ausholen, Nachschwingen, versetzte Einsätze –, damit Bewegung natürlich wirkt und das Auge führt.

wimmer-webservices.com/motion

Motion Graphics gibt es bei uns auch als eigene Leistung – Logo-Animationen, Launch-Filme und Social-Clips, als Video gerendert. Beispiele zeigt unsere Seite Motion Graphics; was die einzelnen Formate leisten und kosten, steht im Artikel Motion Graphics für Unternehmen.

Performance auf dem Handy

Am Entwicklerrechner läuft fast alles flüssig. Die Wahrheit zeigt ein drei Jahre altes Mittelklasse-Handy. Darauf achten wir:

• Inhalt zuerst: Text und Bilder laden sofort, die 3D-Szene danach. So bleibt die Ladezeit des Hauptinhalts im grünen Bereich der Core Web Vitals.
• Kleine Dateien: Modelle komprimiert, Polygone reduziert, Texturen im Format KTX2, das die Khronos Group für schlanke Grafikdaten entwickelt hat.
• Weniger auf schwächeren Geräten: weniger Partikel, niedrigere Auflösung, einfachere Effekte. Die Seite misst und passt sich an.
• Pausieren, wenn unsichtbar: Ist die Szene aus dem Bild gescrollt oder der Tab im Hintergrund, rechnet sie nicht weiter. Das schont Akku und verhindert heiße Handys.
• Auf echten Geräten testen: iPhone und Android, alt und neu, im Akkusparmodus.

Barrierefreiheit und reduzierte Bewegung

Bewegung ist nicht für alle angenehm. Menschen mit Gleichgewichtsstörungen kann starke Animation Schwindel oder Übelkeit verursachen, wie die W3C-Erläuterung zu WCAG 2.3.3 beschreibt.

• Reduzierte Bewegung respektieren: Wer im Betriebssystem „Bewegung reduzieren“ eingestellt hat, sendet das an den Browser (MDN: prefers-reduced-motion). Dann zeigen wir statische Zustände statt Kamerafahrten.
• Anhalten können: Läuft eine Animation von selbst länger als fünf Sekunden neben anderem Inhalt, braucht es eine Möglichkeit, sie zu stoppen. Das verlangt WCAG 2.2.2 schon auf der Grundstufe A.
• Screenreader: Eine 3D-Szene ist für Screenreader ein leeres Bild. Rein dekorative Szenen werden ausgeblendet, wichtige Inhalte gibt es zusätzlich als Text.
• Tastatur: Produktansichten lassen sich auch mit Pfeiltasten drehen, Knöpfe sind normale, fokussierbare Buttons.
• Kontrast: Text über bewegtem Hintergrund muss in jedem Moment lesbar bleiben.

Rückfall für ältere Geräte

Nicht jedes Gerät kann WebGL, und manchmal verliert der Browser die Verbindung zur Grafikkarte mitten im Betrieb (das Ereignis heißt webglcontextlost). Eine gute 3D-Seite rechnet damit:

• Die Seite prüft beim Start, ob WebGL verfügbar ist. Wenn nicht, erscheint ein ruhiges Standbild statt der Szene.
• Bricht die Szene ab, bleibt das Standbild stehen, ohne Fehlermeldung.
• Ohne JavaScript sind Überschrift, Texte und Links trotzdem vollständig da.

Was Besucher je nach Gerät sehen

• WebGL verfügbar, Bewegung erlaubtDie volle 3D-Szene
• „Bewegung reduzieren“ ist eingestelltEine ruhige, statische Fassung
• Kein WebGL oder die Szene bricht abEin Standbild, ohne Fehlermeldung
• JavaScript ist ausÜberschrift, Texte und Links als normales HTML

Auf unserer Startseite ist das genau so gelöst: Fällt WebGL aus, sehen Besucher einen statischen Hero, und alles andere funktioniert wie gewohnt.

SEO: Der Inhalt bleibt HTML

Was in eine 3D-Szene gezeichnet wird, sind für Suchmaschinen Pixel, kein Text. Google verarbeitet zwar JavaScript, empfiehlt aber weiterhin serverseitiges oder vorab erzeugtes HTML, weil es schneller ist und nicht jeder Crawler JavaScript ausführt (Google Search Central: JavaScript-SEO). Daraus folgt:

• Überschriften, Texte und Links stehen als echtes HTML auf der Seite, nicht im Canvas.
• Links sind normale Links mit Adresse, damit Google ihnen folgen kann.
• Die Hauptüberschrift ist sofort sichtbar, nicht erst nach einem Ladebildschirm.
• 3D kommt als Ergänzung oben drauf. Fällt es weg, bleibt eine vollständige Seite.

So gebaut, schadet 3D Ihrer Sichtbarkeit nicht. Eine Seite, die im Kopf bleibt, wird eher geteilt und verlinkt, und das hilft wiederum der Suche.

Woher die 3D-Modelle kommen

Eine Szene ist nur so gut wie ihr Material. Für Modelle gibt es drei typische Quellen:

• Vorhandene CAD-Daten: Hersteller haben ihre Produkte oft schon als technische 3D-Daten. Diese sind meist viel zu detailliert für das Web und werden vereinfacht und als glTF exportiert.
• 3D-Scan: Aus vielen Fotos eines Objekts oder Raums entsteht ein Modell. Das eignet sich für Weinkeller, Skulpturen oder Handwerksstücke.
• Neu modelliert: Ein 3D-Artist baut das Modell von Grund auf. Das ist am flexibelsten, braucht aber die meiste Zeit.

Partikel und Shader brauchen dagegen oft gar kein fertiges Modell. Darum sind sie ein guter Einstieg, wenn noch keine 3D-Daten da sind.

So gehen wir vor

Am Anfang steht die Frage, was die Szene erzählen soll. Erst dann entscheiden wir, ob Partikel, ein Modell oder eine Landschaft passt. Einen ersten Prototyp testen wir früh auf dem Handy, bevor Details ausgearbeitet werden. So zeigt sich schnell, ob die Idee trägt.

Wenn Sie überlegen, ob 3D zu Ihrem Produkt oder Ihrer Marke passt, finden Sie mehr auf unserer Seite zu 3D-Webseiten. Oder erzählen Sie uns über das Kontaktformular, was Sie zeigen möchten. Wir sagen Ihnen auch, wenn es ohne 3D besser geht.