Auf unserer Netzwerk-Seite schwebt eine kleine Insel mit Wald, Bach und Wasserfall, und auf der Startseite wächst ein Ginkgo. Beides ist kein Video und kein Bild, sondern eine 3D-Szene, die dein Browser in dem Moment selbst baut. Hier erzählen wir, wie sie entstanden ist.
Die Idee
Wir sagen gern, dass gute Websites tief wurzeln, damit Ideen wachsen können. Die Insel macht das sichtbar: oben ein Wald aus verschiedenen Bäumen, darunter Erdschichten von der Grasnarbe bis zum Grundgestein. Was über der Erde wächst, zieht seine Kraft aus dem, was darunter liegt. Jeder Baum steht für eine Art von Projekt, und die Farben der Website stammen aus genau diesen Bäumen.
Gebaut mit three.js
Die Szene läuft mit three.js, einer offenen JavaScript-Bibliothek für 3D im Browser. three.js spricht direkt mit WebGL, also mit der Grafikkarte deines Geräts. Wir verwenden eine fest eingebundene Version und liefern sie von unserem eigenen Server aus. So lädt die Seite nichts von fremden Servern nach, und es fallen keine Daten bei Dritten an.
Alles wird berechnet, nichts ist gemalt
Die Insel besteht aus keinem einzigen 3D-Modell und kaum aus Bilddateien. Fast alles entsteht beim Laden aus Code:
- Bäume: Sieben Baumarten, von Ginkgo über Eiche und Kirsche bis Tanne, wachsen nach Regeln. Ein Stamm teilt sich in Äste, die Äste in Zweige, und am Ende sitzen die Blätter. Ein fester Startwert für den Zufall sorgt dafür, dass jeder Baum bei jedem Besuch gleich aussieht.
- Texturen: Rinde, Gras, Blätter und Stein werden auf eine unsichtbare Zeichenfläche im Browser gemalt, auf ein Canvas. Dadurch braucht es keine großen Bilddateien.
- Gras: Rund 15.000 Grashalme sind ein einziges Objekt, das die Grafikkarte tausendfach wiederholt. Das nennt man Instancing, und es ist der Grund, warum so viel Gras flüssig läuft.
- Wind: Dass sich Gras und Kronen bewegen, macht ein kleines Programm direkt auf der Grafikkarte, ein Shader. Er verschiebt jeden Halm und jedes Blatt ein wenig, je nach Zeit und Höhe.
- Erde und Wasser: Die Form der Insel ist ein unregelmäßiger Kreis, die Erdschichten haben je eine eigene Farbe. Bach und Wasserfall bewegen sich ebenfalls über einen Shader.
Licht, Schatten und ein leichter Dunst in der Farbe der Seite lassen die Insel weich auf dem Hintergrund stehen. Wechselst du über die Blätter oben das Farbschema, färbt sich auch der Dunst mit.
Schnell trotz 3D
Eine 3D-Szene ist schwer. Die erste Fassung hat beim Testen mit Lighthouse, dem Messwerkzeug von Google, einen Performance-Wert von 49 von 100 bekommen. Damit die Seite trotzdem schnell ist, haben wir einiges umgebaut:
- Die Szene lädt erst, wenn der Rest der Seite steht. Text und Navigation sind sofort da.
- Der Aufbau passiert in zwölf kleinen Schritten mit Pausen dazwischen, damit der Browser zwischendurch auf Klicks und Scrollen reagieren kann.
- Am Handy gibt es weniger Gras und gröbere Schatten. Das fällt kaum auf, spart aber viel Rechenzeit.
- Ist die Szene nicht im Bild, pausiert sie und verbraucht keinen Strom.
In unserer Testumgebung lag der Wert für die Startseite danach bei 95 von 100.
Für alle bedienbar
Die Insel ist Dekoration, sie enthält keine Information, die es nicht auch als Text gibt. Sie hat eine kurze Beschreibung für Screenreader. Ist an deinem Gerät „Bewegung reduzieren“ eingestellt, bleibt alles still, und der Wald steht von Anfang an fertig da. Kann ein Browser kein 3D, erscheint stattdessen ein kurzer Hinweis.
Eingebaut in WordPress
Die Website ist ein eigenes WordPress-Block-Theme. Die Insel und der Ginkgo sind eigene Blöcke, die wir im Editor wie jeden anderen Baustein auf eine Seite setzen können. Den Rest erledigt das Theme: Es lädt three.js und die Szene nur auf den Seiten, auf denen sie gebraucht werden.
Transparenz
Die Insel ist in Zusammenarbeit mit Claude von Anthropic entstanden. Idee, Gestaltung und Entscheidungen kommen von uns, den Code haben wir gemeinsam mit dem Sprachmodell geschrieben, Schritt für Schritt getestet und angepasst. Mehr dazu auf unserer Seite Wie wir mit Sprachmodellen arbeiten.
Fragen dazu? Schreib uns.
