{ "$schema": "../../schema.json", "schema": "fundus/1", "id": "seitenwechsel-kamerafahrt", "name": "Persistente 3D-Szene: Seitenwechsel als Kamerafahrt", "name_en": "Persistent WebGL canvas / camera-move page transitions / Multi-scene WebGL storytelling / render-target scene transitions", "kurz": "Ein Canvas bleibt stehen, nur der Inhalt wechselt: Jeder Klick wird zur Kamerafahrt in den nächsten Raum.", "kategorie": "Seitenübergänge", "kategorie_slug": "seitenuebergaenge", "kategorie_nr": 1, "bau_chat": "C3", "prioritaet": "A", "trendstatus": "aufsteigend", "belegstatus": "belegt", "website_belege": 2, "stimmung": [ "filmisch", "verspielt", "warm" ], "stimmung_roh": [ "immersiv", "räumlich", "verspielt", "handgemacht", "filmisch", "episch" ], "technik": [ "three", "webgpu", "gsap", "barba", "webflow", "splittext", "webgl-shader", "scrolltrigger" ], "technik_gruppen": [ "gsap", "webgl", "andere" ], "leistungskosten": "hoch", "steckbrief": { "beschreibung": "1) Ein einziger Three.js- oder WebGPU-Canvas liegt außerhalb des Bereichs, den der Router austauscht, und läuft über alle Seiten weiter. 2) Klick auf einen Link: Der alte DOM-Inhalt geht (Router-Leave). 3) Gleichzeitig fährt eine GSAP-Timeline die Kamera zur nächsten Station der Szene, etwa entlang der X-Achse. 4) Gegen Ende der Fahrt steigt der neue DOM-Inhalt auf. Die Website wirkt wie ein zusammenhängender Raum statt wie eine Folge getrennter Seiten.", "warum_es_wirkt": "Navigation wird zur Ortsveränderung. Die Szene lädt nicht neu, es gibt keine Ladepause. Das Auge sieht den Weg zwischen zwei Seiten und behält so die Orientierung. Das wirkt wie ein Film mit Kamerafahrten statt wie eine Website mit Abschnitten. Es ist der stärkste Immersionseffekt dieser Kategorie.", "wann_einsetzen": "Studio- und Portfolio-Seiten, die als Ort gedacht sind. Marken- und Produktwelten, Kampagnen, Launches und Jahresberichte mit wenigen, inszenierten Hauptseiten oder Kapiteln.", "wann_nicht": "Seiten mit vielen Unterseiten, SEO-lastige Informationsseiten, Shops mit Conversion-Fokus, kleine Budgets. Nicht mit nativen Cross-document View Transitions kombinierbar: Beim echten Seitenwechsel stirbt der Canvas. Das Muster braucht einen Client-Router wie Barba, Highway oder eine SPA.", "varianten": [ "Kamerafahrt zwischen Objekten entlang einer Achse (Mael Ruffini; in der Demo „Fahrt“)", "Schwenk: Stationen im Kreis, die Kamera dreht sich um die Raummitte (in der Demo „Schwenk“)", "Szene bleibt, nur Parameter morphen: Farbe, Form, Objekt (in der Demo „Parameter“)", "Szenenwechsel per Offscreen-Rendering und eigenem Shader in WebGPU (Codrops 06/2026)", "Mehrere geschichtete Szenen (Aircord-Ansatz)", "Mehrszenige Erzählung: Szenen werden selektiv gerendert und per Übergangs-Shader gemischt (The Monolith Project, 13 Szenen)", "Scroll-gesteuerte Kapitel statt Klicks (Shader.se)", "Übergänge mit Frost, chromatischer Aberration und Displacement (Igloo Inc)" ], "umsetzung": "Den Renderer einmal anlegen und außerhalb des ausgetauschten Bereichs mounten, also außerhalb von data-barba=\"container\". Routen auf Kamera-Ziele abbilden, z. B. const stops = { '/': { x: 0 }, '/arbeiten/roestkontor': { x: 12 } }. Im Leave-Hook den DOM ausblenden und parallel gsap.to(camera.position, { ...stops[next], duration: 1.2, ease: 'power3.inOut' }) starten. Den neuen Inhalt einblenden, sobald beide Promises fertig sind oder kurz davor. In der Demo läuft ein Fortschritt p linear von 0 bis 1 und die Kurve wird beim Rechnen angewendet. So entstehen Kameraweg, Bogen (die Kamera zieht in der Mitte zurück) und Raumfarbe aus demselben Wert. Nach dem Wechsel nur DOM-Listener neu binden, den Canvas nie neu erzeugen.\n\nFallstricke: Szenen, die nicht entsorgt werden, verursachen Speicherlecks (dispose für Geometrie, Material, Textur). Ein Direkteinstieg auf eine Unterseite setzt die Kamera ohne Fahrt ans Ziel. Zurück-Navigation fährt in Gegenrichtung. Bei vielen Szenen hilft ein Szenen-Manager mit Lebenszyklus (init, enter, update, leave, dispose), der nur ein bis zwei Szenen gleichzeitig rendert. Assets kapitelweise nachladen, Shader im Hintergrund kompilieren. Für Shader-Übergänge zwischen zwei Render-Targets: mix(texA, texB, smoothstep(p - 0.1, p + 0.1, noise(uv))).", "mobil": "Szene vereinfachen: weniger Polygone, DPR 1 bis 1,5, kleinere Render-Targets. Auf schwachen Geräten ein statisches Bild oder Video statt der Szene. Im Hochformat die Station oben mittig zeigen, den Text darunter. Wischen als zusätzliche Navigation.", "reduzierte_bewegung": "Die Kamera springt ohne Fahrt ans Ziel (duration 0), der DOM wechselt per kurzer Überblendung. Kein Displacement, kein Leerlauf, keine Parallaxe.", "barrierefreiheit": "Canvas mit aria-hidden. Alle Inhalte stehen als HTML im DOM. Navigation über echte Links oder Buttons, Pfeiltasten als Abkürzung. Nach dem Wechsel Fokus auf die H1 und den Seitentitel per Live-Region ansagen. Ton nur nach Opt-in. Ohne WebGL ein einfacher Ersatz, hier ein Bildstreifen mit derselben Kurve." }, "messwerte": { "easing": "power3.inOut / expo.inOut", "dauer_ms": "1200–1800 Kamerafahrt", "stagger_ms": "", "distanz": "eine Objekt-Station", "sonstiges": "", "herkunft": "typisch", "quelle": "", "aus_eintrag": [ "persistente-3d-szene-kamerafahrt" ] }, "kurve": { "bezier": [ 0.76, 0, 0.24, 1 ], "css": "cubic-bezier(0.76, 0, 0.24, 1)", "name": "power3.inOut", "dauer_ms": 1200 }, "gesehen_bei": [ { "seite": "Page Transitions Webflow GSAP Three.js (Mael Ruffini, Rhumb Studio)", "url": "https://page-transitions-webflow-gsap-threejs.webflow.io/", "auszeichnung": "", "beobachtung": "Laut Abduzeedo: Ein einziger Three.js-Canvas außerhalb des Barba-Swap-Zyklus. Beim Klick blendet Barba den DOM aus und eine GSAP-Timeline fährt die Kamera auf der X-Achse zum nächsten Blender-Modell (Stift, Tasse, Suzanne). Handgemalte UVs, Papiertextur im Multiply-Modus, SplitText für die Typo.", "art": "demo" }, { "seite": "Codrops: Building Persistent Page Transitions with WebGPU and Vanilla JavaScript (Ben Paine)", "url": "https://tympanus.net/codrops/2026/06/30/building-persistent-page-transitions-with-webgpu-and-vanilla-javascript/", "auszeichnung": "", "beobachtung": "Laut Codrops-Telegram-Teaser WebGPU-Übergänge in Vanilla JS mit Offscreen-Rendering und eigenen Shadern, die über Seiten hinweg bestehen bleiben. Der Artikel selbst war nicht abrufbar.", "art": "artikel" }, { "seite": "Rhumb Studio", "url": "https://rhumb.studio", "auszeichnung": "", "beobachtung": "Studio von Mael Ruffini. Codrops-Spotlight 04/2026: 'websites designed as places'. Ob die eigene Seite das Muster nutzt, ist ungeprüft.", "art": "website-ungeprueft" }, { "seite": "Igloo Inc", "url": "https://www.igloo.inc/", "auszeichnung": "Awwwards Site of the Year 2024", "beobachtung": "Drei per Scroll navigierte Abschnitte; Übergänge kombinieren chromatische Aberration, Tech-Displacement und Frost-Effekt; Intro in Echtzeit gerendert (Case Study).", "art": "website", "browser_gemessen": true }, { "seite": "Shader.se", "url": "https://www.shader.se/", "auszeichnung": "", "beobachtung": "Laut Codrops-Feed scroll-gesteuerte WebGPU-Pipeline mit selektivem Szenen-Rendering und nahtlosen Übergängen im 80er-Business-Tech-Look.", "art": "website-ungeprueft" }, { "seite": "The Monolith Project (Codrops Case Study)", "url": "https://tympanus.net/codrops/2025/11/29/building-the-monolith-composable-rendering-systems-for-a-13-scene-webgl-epic/", "auszeichnung": "", "beobachtung": "Laut Feed: komponierbare Materialien, Partikel und Übergänge für 13 Szenen.", "art": "artikel" }, { "seite": "Shopify Editions", "url": "https://www.shopify.com/editions/winter2026", "auszeichnung": "", "beobachtung": "Im Three.js-Showcase gelistet; Codrops-Case-Study zur Spring-'26-Edition beschreibt Rendering-Architektur, eigenes Tooling und Performance-Techniken. Abgerufene Winter-Seite zeigte im Text nur Screenshots/Videos – WebGL-Anteil dort unklar.", "art": "website-ungeprueft" }, { "seite": "Unseen Studio", "url": "https://unseen.co/", "auszeichnung": "", "beobachtung": "Live geprüft (theme.js): persistenter WebGL-Singleton (Gl.renderer, cssRenderer, Composer, PerspectiveCamera z 1500) läuft über den Highway-Router (data-router-view) hinweg; ein transitionPass-Shader (u_time) steuert den Wechsel. Die Kamerafahrt selbst ist im minifizierten Code nicht einzeln belegt.", "art": "website", "browser_gemessen": true } ], "tutorials": [ { "titel": "Building Seamless 3D Transitions with Webflow, GSAP, and Three.js (Codrops, 03/2026)", "url": "https://tympanus.net/codrops/2026/03/18/building-seamless-3d-transitions-with-webflow-gsap-and-three-js/" }, { "titel": "Mael Ruffini's Webflow 3D Page Transitions Feel Like One World (Abduzeedo)", "url": "https://abduzeedo.com/node/89192" }, { "titel": "Building Persistent Page Transitions with WebGPU and Vanilla JavaScript (Codrops, 06/2026)", "url": "https://tympanus.net/codrops/2026/06/30/building-persistent-page-transitions-with-webgpu-and-vanilla-javascript/" }, { "titel": "80s Business Tech and Seamless Scene Transitions: Inside Shader.se's Scroll-Driven WebGPU Pipeline", "url": "https://tympanus.net/codrops/2026/05/19/80s-business-tech-seamless-scene-transitions-inside-shader-ses-scroll-driven-webgpu-pipeline/" }, { "titel": "Building The Monolith: Composable Rendering Systems for a 13-Scene WebGL Epic", "url": "https://tympanus.net/codrops/2025/11/29/building-the-monolith-composable-rendering-systems-for-a-13-scene-webgl-epic/" }, { "titel": "Engineering the Web Experience Behind Shopify's Spring '26 Edition", "url": "https://tympanus.net/codrops/2026/06/26/engineering-the-web-experience-behind-shopifys-spring-26-edition-everywhere/" } ], "kombinierbar_mit": [ "shader-uebergang-dissolve", "webgl-ladeszene-fortschritt", "parallel-crossfade-preload", "partikel-punktwolke", "glas-transmission-3d", "nachbearbeitung-filmlook", "webgpu-tsl-compute", "scroll-3d-kamerafahrt" ], "urls": { "detail": "https://cecodesign.de/lab/fundus/seitenuebergaenge/seitenwechsel-kamerafahrt/", "meta": "https://cecodesign.de/lab/fundus/seitenuebergaenge/seitenwechsel-kamerafahrt/meta.json", "demo": "https://cecodesign.de/lab/fundus/seitenuebergaenge/seitenwechsel-kamerafahrt/demo" }, "herkunft": { "quelldateien": [ "uebergaenge.json", "material3d.json", "patch-belege-3.json" ], "pruefnotizen": [ "patch-belege-3.json: Zweiter Beleg nur teilweise (persistente Szene + Shader-Übergang, Kamerafahrt nicht explizit). Igloo Inc bleibt Hauptbeleg." ], "zusammengelegt_aus": [ "persistente-3d-szene-kamerafahrt", "szenen-uebergaenge-webgl" ], "querverweis_kategorien": [ "3D & WebGL" ] }, "bau": { "status": "fertig", "kurz": "Ein Canvas bleibt stehen, nur der Inhalt wechselt: Jeder Klick wird zur Kamerafahrt in den nächsten Raum.", "demo": true, "abhaengigkeiten": [ "gsap@3.15.0", "three@0.186.0" ], "werte": { "easing": "Fahrt power3.inOut cubic-bezier(0.76, 0, 0.24, 1) · Schwenk expo.inOut cubic-bezier(0.87, 0, 0.13, 1) · Parameter power3.inOut", "dauer_ms": "Kamera: Fahrt 1200 · Schwenk 1600 · Parameter 1200", "ablauf": "0 ms Inhalt aus · 100 ms Kamera startet · 630 ms DOM-Tausch · Einblenden ab 100 ms + 68 % der Kameradauer", "inhalt_aus": "Zeilen yPercent 0 → −120 aus der Maske, 450 ms power3.in, Versatz 35 ms; Knopf Deckkraft 300 ms", "inhalt_ein": "Zeilen yPercent 120 → 0, 900 ms expo.out, Versatz 60 ms; Knopf y 18 px → 0", "distanz": "Fahrt 12 Einheiten je Station auf X · Schwenk 90° je Station, Radius 14 · Parameter Kamera fest", "bogen": "Fahrt: Kamera zieht um 2,8 × sin(π·e) zurück, hebt sich 0,45, Blick eilt 1,4 in Fahrtrichtung voraus · Schwenk: 3 zurück, 0,4 hoch · Parameter: 1,2 zurück", "parameter": "altes Objekt schrumpft in den ersten 45 % (power3.in) und sinkt 0,6; neues wächst ab 35 % (expo.out)", "kamera": "FOV 30°; Abstand quer ≥ 10,5, hoch ≥ 11 Einheiten; Blick 13 % des Abstands von oben; Station quer bei 70 % der Breite, hoch oben mittig", "raumfarben": "#ebe6dc · #efe4d5 · #dfe6e1 · #e0e4ef, nach Kameraposition gemischt; Nebel 16–44", "leerlauf": "Maus-Parallaxe bis ±0,25 / ±0,125 Einheiten, Atmen 0,06 / 0,04, Objekte drehen langsam", "renderer": "DPR höchstens 2 (Touch 1,5), eine Schattenkarte 1024 px, PCF, Boden nur ShadowMaterial 0,16" }, "ausloeser": "klick", "touch": "Tippen auf Navigation oder Knopf, waagerecht wischen (über 50 px) wechselt den Raum. Keine Parallaxe, DPR höchstens 1,5. Station oben mittig, Text darunter.", "reduziert": "Kamera springt ohne Fahrt ans Ziel, Raumfarbe wechselt sofort, Inhalt blendet 150 ms aus und 200 ms ein. Kein Leerlauf, keine Parallaxe.", "korrekturen": { "beschreibung": "1) Ein einziger Three.js- oder WebGPU-Canvas liegt außerhalb des Bereichs, den der Router austauscht, und läuft über alle Seiten weiter. 2) Klick auf einen Link: Der alte DOM-Inhalt geht (Router-Leave). 3) Gleichzeitig fährt eine GSAP-Timeline die Kamera zur nächsten Station der Szene, etwa entlang der X-Achse. 4) Gegen Ende der Fahrt steigt der neue DOM-Inhalt auf. Die Website wirkt wie ein zusammenhängender Raum statt wie eine Folge getrennter Seiten.", "warum_es_wirkt": "Navigation wird zur Ortsveränderung. Die Szene lädt nicht neu, es gibt keine Ladepause. Das Auge sieht den Weg zwischen zwei Seiten und behält so die Orientierung. Das wirkt wie ein Film mit Kamerafahrten statt wie eine Website mit Abschnitten. Es ist der stärkste Immersionseffekt dieser Kategorie.", "wann_einsetzen": "Studio- und Portfolio-Seiten, die als Ort gedacht sind. Marken- und Produktwelten, Kampagnen, Launches und Jahresberichte mit wenigen, inszenierten Hauptseiten oder Kapiteln.", "wann_nicht": "Seiten mit vielen Unterseiten, SEO-lastige Informationsseiten, Shops mit Conversion-Fokus, kleine Budgets. Nicht mit nativen Cross-document View Transitions kombinierbar: Beim echten Seitenwechsel stirbt der Canvas. Das Muster braucht einen Client-Router wie Barba, Highway oder eine SPA.", "varianten": [ "Kamerafahrt zwischen Objekten entlang einer Achse (Mael Ruffini; in der Demo „Fahrt“)", "Schwenk: Stationen im Kreis, die Kamera dreht sich um die Raummitte (in der Demo „Schwenk“)", "Szene bleibt, nur Parameter morphen: Farbe, Form, Objekt (in der Demo „Parameter“)", "Szenenwechsel per Offscreen-Rendering und eigenem Shader in WebGPU (Codrops 06/2026)", "Mehrere geschichtete Szenen (Aircord-Ansatz)", "Mehrszenige Erzählung: Szenen werden selektiv gerendert und per Übergangs-Shader gemischt (The Monolith Project, 13 Szenen)", "Scroll-gesteuerte Kapitel statt Klicks (Shader.se)", "Übergänge mit Frost, chromatischer Aberration und Displacement (Igloo Inc)" ], "umsetzung": "Den Renderer einmal anlegen und außerhalb des ausgetauschten Bereichs mounten, also außerhalb von data-barba=\"container\". Routen auf Kamera-Ziele abbilden, z. B. const stops = { '/': { x: 0 }, '/arbeiten/roestkontor': { x: 12 } }. Im Leave-Hook den DOM ausblenden und parallel gsap.to(camera.position, { ...stops[next], duration: 1.2, ease: 'power3.inOut' }) starten. Den neuen Inhalt einblenden, sobald beide Promises fertig sind oder kurz davor. In der Demo läuft ein Fortschritt p linear von 0 bis 1 und die Kurve wird beim Rechnen angewendet. So entstehen Kameraweg, Bogen (die Kamera zieht in der Mitte zurück) und Raumfarbe aus demselben Wert. Nach dem Wechsel nur DOM-Listener neu binden, den Canvas nie neu erzeugen.\n\nFallstricke: Szenen, die nicht entsorgt werden, verursachen Speicherlecks (dispose für Geometrie, Material, Textur). Ein Direkteinstieg auf eine Unterseite setzt die Kamera ohne Fahrt ans Ziel. Zurück-Navigation fährt in Gegenrichtung. Bei vielen Szenen hilft ein Szenen-Manager mit Lebenszyklus (init, enter, update, leave, dispose), der nur ein bis zwei Szenen gleichzeitig rendert. Assets kapitelweise nachladen, Shader im Hintergrund kompilieren. Für Shader-Übergänge zwischen zwei Render-Targets: mix(texA, texB, smoothstep(p - 0.1, p + 0.1, noise(uv))).", "mobil": "Szene vereinfachen: weniger Polygone, DPR 1 bis 1,5, kleinere Render-Targets. Auf schwachen Geräten ein statisches Bild oder Video statt der Szene. Im Hochformat die Station oben mittig zeigen, den Text darunter. Wischen als zusätzliche Navigation.", "reduzierte_bewegung": "Die Kamera springt ohne Fahrt ans Ziel (duration 0), der DOM wechselt per kurzer Überblendung. Kein Displacement, kein Leerlauf, keine Parallaxe.", "barrierefreiheit": "Canvas mit aria-hidden. Alle Inhalte stehen als HTML im DOM. Navigation über echte Links oder Buttons, Pfeiltasten als Abkürzung. Nach dem Wechsel Fokus auf die H1 und den Seitentitel per Live-Region ansagen. Ton nur nach Opt-in. Ohne WebGL ein einfacher Ersatz, hier ein Bildstreifen mit derselben Kurve." }, "geprueft": "31.10.2026", "notiz": "Die Demo simuliert den Router: Vier