Loading…
3D und Motion — interaktive Web-Erlebnisse
Diese Projekte untersuchen, wie interaktives 3D und WebGL eine Produkt- oder Markengeschichte im Browser greifbar machen können. Jedes Erlebnis verbindet Bewegung und visuelle Effekte mit einer konkreten Nutzerreise.
- Rolle
- Interaktive Web- und WebGL-Entwicklung — von Konzept und Aufbau der 3D-Szene über Shader-Arbeit bis zur GSAP-/Scroll-Choreografie für jedes Projekt.
- Technologien
- Three.jsReact Three FiberGSAP (ScrollTrigger)GLSL ShadersBlenderLenis
Überblick
Eine Kamera, die zum Sucher in die Erinnerungen eines Menschen wird, eine Tastatur, deren einzelne Tasten verstreute Werkzeuge sind, die auf Vereinheitlichung warten, und Partikel, die sich verwandeln, weil es im Produkt selbst um Transformation geht. Diese Sammlung zeigt diese Arbeit — vollständige Landingpages, die um eine 3D-Idee gebaut sind, sowie kleinere eigenständige Studien, die jeweils eine einzelne Technik untersuchen.
Statische Screenshots werden dieser Arbeit nicht gerecht — jede Seite verdient ihr 3D, indem sie es direkt mit ihrer Geschichte verbindet.
Interface
Fünf Geschichten, fünf Techniken
Everline — Präsentation einer Autovermietung
Eine filmische Reise vom Zünden bis zum Showroom — nimm im Cockpit Platz und sieh zu, wie sich eine Fahrzeugflotte unter Studiobeleuchtung enthüllt.
Interface
Fünf Geschichten, fünf Techniken
Everline — Präsentation einer Autovermietung
Eine filmische Reise vom Zünden bis zum Showroom — nimm im Cockpit Platz und sieh zu, wie sich eine Fahrzeugflotte unter Studiobeleuchtung enthüllt.
Elemente aus dem Labor
Nicht jede Idee braucht eine eigene vollständige Seite
Eigenständige Studien — eine Technik, isoliert und weiterentwickelt, als es eine einzelne Landingpage verlangen würde.
Elemente aus dem Labor
Nicht jede Idee braucht eine eigene vollständige Seite
Eigenständige Studien — eine Technik, isoliert und weiterentwickelt, als es eine einzelne Landingpage verlangen würde.
Chromatischer Glasstein
Eine Partikelwolke in simuliertem chromatischem Glas — zweimal gebrochen und separat aufgeblüht, damit der Schein innerhalb der Silhouette bleibt, statt nach außen auszulaufen.
Partikel-Konfigurator
Zehntausende GPU-Punkte, als Dampf oder leuchtende Kugeln schattiert, verwandeln sich zwischen Formen — mit Live-Steuerung für Position, Bewegung und Erscheinungsbild.
Geriffeltes Shader-Feld
Eine abstrakte animierte Oberfläche, die vollständig aus Materialeigenschaften entsteht — Reflexionen und Farbverläufe bewegen sich über einen Shader und simulieren ein wogendes, geriffeltes Feld.
Technischer Ansatz
Fünf Gewohnheiten verhindern, dass diese Erlebnisse zum Grund für lange Ladezeiten oder ein heiß laufendes Smartphone werden — über mehrere Projekte entwickelt und seitdem in jede Art von Arbeit übernommen.
Mit jedem Projekt umfangreicher, mit jedem Projekt leichter
01
Modelloptimierung beginnt in Blender, nicht im Code01Modelloptimierung beginnt in Blender, nicht im Code
Polygonanzahl und Texturgröße werden reduziert, bevor ein Modell überhaupt den Browser erreicht — der günstigste Performance-Gewinn entsteht, bevor eine einzige Zeile Three.js geschrieben wird.
02
Nichts wird geladen, bevor es nötig ist02Nichts wird geladen, bevor es nötig ist
Schwere Szenen und Modelle werden dynamisch geladen und erst bei tatsächlichem Bedarf nachgeladen — der initiale Seitenaufruf bezahlt nicht für eine 3D-Szene, zu der der Nutzer noch gar nicht gescrollt hat.
03
Animationen pausieren außerhalb des Viewports03Animationen pausieren außerhalb des Viewports
Eine nicht sichtbare Szene muss nicht weiter gerendert werden. Animationen und Render-Loops stoppen, sobald ein Abschnitt aus dem Sichtbereich scrollt, und Szenen werden vollständig abgebaut, wenn der Tab den Fokus verliert.
04
GSAP-Trigger bleiben nah an dem, was sie animieren04GSAP-Trigger bleiben nah an dem, was sie animieren
ScrollTrigger-Instanzen sind auf den Abschnitt begrenzt, zu dem sie gehören, und werden erst aktiviert, wenn sich dieser Abschnitt nähert — statt einer großen Timeline, die gleichzeitig die gesamte Seite berücksichtigen muss.
05
Mobile erhält eine andere Szene, nicht nur eine kleinere05Mobile erhält eine andere Szene, nicht nur eine kleinere
Auf Mobilgeräten werden schwere WebGL-Szenen durch leichtere Varianten oder statische Bilder ersetzt, statt dieselbe Szene mit geringerer Qualität zu erzwingen — eine Entscheidung pro Projekt, kein pauschaler Fallback.
Ergebnisse
Keine Geschichte über Kennzahlen — sondern über handwerkliche Qualität
Fünf eigenständige 3D-/Motion-Erzählungen veröffentlicht, jede auf einer anderen Technik aufgebaut — metaphorische Szenen, filmisches Scroll-Storytelling, eigene Shader-Arbeit und eine dauerhaft scrollreaktive Figur
Ein konsistenter Satz an Performance-Gewohnheiten — Modelloptimierung, verzögertes Laden und pausierende Szenen außerhalb des Viewports — über alle Projekte hinweg weitergeführt und verfeinert
Eigenständige Shader- und Partikelstudien unabhängig von jeder Landingpage entwickelt, als bewusstes Training einzelner Techniken
Derselbe Sinn für Struktur aus der Arbeit an Dashboard- und SaaS-Architekturen, übertragen darauf, wie diese Szenen organisiert und geladen werden