{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "shader-uebergang-dissolve",
 "name": "Shader- und Dissolve-Übergang (Noise, Displacement, Pixel)",
 "name_en": "WebGL shader transition / render-target compositing / WebGL displacement / shader slide transition / Pixel / noise dissolve transition / Pixel / grid block page transition",
 "kurz": "Projekt-Slider eines Markenateliers: Bilder verbrennen mit Glutkante, fließen per Displacement mit RGB-Shift oder zerfallen in Pixelblöcke, alles in einem Shader.",
 "kategorie": "3D & WebGL",
 "kategorie_slug": "3d-webgl",
 "kategorie_nr": 11,
 "bau_chat": "C5",
 "prioritaet": "A",
 "trendstatus": "etabliert",
 "belegstatus": "belegt",
 "website_belege": 2,
 "stimmung": [
  "ruhig",
  "präzise",
  "luxuriös",
  "filmisch",
  "verspielt",
  "laut",
  "experimentell"
 ],
 "stimmung_roh": [
  "experimentell",
  "technisch",
  "filmisch",
  "laut",
  "flüssig",
  "luxuriös",
  "digital",
  "retro",
  "verspielt"
 ],
 "technik": [
  "webgl-shader",
  "three",
  "ogl",
  "gsap",
  "barba",
  "canvas",
  "css"
 ],
 "technik_gruppen": [
  "css",
  "gsap",
  "webgl",
  "canvas"
 ],
 "leistungskosten": "hoch",
 "steckbrief": {
  "beschreibung": "Alte und neue Ansicht liegen als Texturen vor: Bilder und Videos direkt, ganze Szenen über Render-Targets. Ein Vollbild-Quad mit Fragment-Shader mischt beide anhand von uProgress (0 bis 1). Die Mischung ist kein linearer Fade, sondern eine Maske: Noise mit smoothstep() oder step(), ein diagonaler Verlauf oder Pixelblöcke. Dazu kommen Displacement (UV-Verschiebung) und RGB-Shift, die zur Mitte des Übergangs am stärksten sind (parabola über progress). GSAP oder ein eigener Tween treibt die Uniform.",
  "warum_es_wirkt": "Der Übergang wird zum Material: Das Bild verbrennt, zerfließt oder zerfällt. Mit DOM und CSS ist das nicht erreichbar, deshalb wirkt es sofort hochwertig und handwerklich stark. Farbe der Glut, Maskenform und Rhythmus lassen sich markenspezifisch einstellen.",
  "wann_einsetzen": "Bei Vollbild-Medienwechseln: Hero- und Projekt-Slider, Galerien, Portfolios mit Video, Detailwechsel in Portfolios. Besonders auf Seiten, die ohnehin eine WebGL-Ebene haben. Die Pixel-Variante passt zu Tech-, Gaming- und Kreativseiten mit Retro-Ästhetik.",
  "wann_nicht": "Auf textlastigen oder sachlichen Seiten ohne WebGL, weil der Aufwand nicht im Verhältnis steht. Bei Bildern mit viel Text, weil Verzerrung die Lesbarkeit zerstört. Wenn das Performance-Budget knapp ist oder kein Fallback gebaut wird. Bei ruhigen Luxus- und Editorial-Marken wirkt es zu laut, und bei häufiger Navigation nerven lange Übergänge.",
  "varianten": [
   "Noise-Dissolve mit Glutkante: step bzw. smoothstep gegen Noise, die Kante leuchtet wie Brennen.",
   "Displacement mit chromatischer Aberration: Eine Noise- oder Graustufentextur verschiebt die UVs, die Farbkanäle laufen auseinander.",
   "Pixel-Mosaik mit Block-Reveal: Die Pixelgröße wächst zur Mitte und schrumpft wieder, Blöcke wechseln per step() gegen Zufall (uNoisePixelSize).",
   "Radiale Welle oder Kreis-Reveal ab Klickposition.",
   "Tinte, Spirale, Dithering oder Partikel (Interlude-Shader).",
   "Pixel-Sortierung entlang einer Hilbert-Kurve nach Helligkeit (Codrops Demo 20).",
   "Datamosh-Glitch über ein Feedback-Render-Target mit Bewegungsvektoren.",
   "Composite Rendering: DOM-Ansichten werden in eine gemeinsame Szene gerendert und dort überblendet, der Canvas bleibt über Seitenwechsel bestehen (Barba, Astro ClientRouter).",
   "Ohne WebGL: Kachelraster per GSAP oder Canvas2D (drawImage mit imageSmoothingEnabled=false)."
  ],
  "umsetzung": "Three.js oder OGL mit einem einzigen Vollbild-Quad, dessen Vertex-Shader direkt im Clip-Space ausgibt (gl_Position = vec4(position.xy, 0.0, 1.0)). Uniforms: uProgress, uFrom, uTo, Bild- und Canvasgröße (für object-fit cover im Shader), dazu Stärken wie uDisplace oder uRGBShift. Kern der Noise-Variante: float m = smoothstep(p − w, p + w, noise); vec2 d = uv + (noise − 0.5) * uDisplace * parabola(p, 2.0); mix(texture(uFrom, d), texture(uTo, d), m). Die globale Zeit kann linear oder mit power2.inOut laufen, die Form entsteht pro Pixel. Für ganze Seiten werden beide Ansichten in Render-Targets gerendert und Passes in einem Composite-Shader gebündelt. Texturen vorladen und auf Mobilgeräten auf 2048 px begrenzen, Kontextverlust abfangen, Render-Loop nur während des Übergangs laufen lassen.",
  "mobil": "Pixelratio auf 1 bis 1,5 begrenzen, Render-Targets in halber Auflösung. Kürzere Dauer, bei der Pixel-Variante größere Zellen. Ein einzelner Vollbild-Pass ist meist unproblematisch. Auf schwachen Geräten auf Crossfade oder Clip-Path-Wipe zurückfallen.",
  "reduzierte_bewegung": "Kein Displacement, kein RGB-Shift, keine Pixel. Nur eine weiche Überblendung von höchstens 300 ms oder ein harter Schnitt.",
  "barrierefreiheit": "Der Canvas ist aria-hidden, Bilder und Texte bleiben echt im DOM. Bedienung wie bei einem normalen Slider: Knöpfe, Pfeiltasten, Ansage des neuen Projekts per aria-live. Nach einem Seitenwechsel den Fokus korrekt setzen. Nicht mehr als drei Blitze pro Sekunde (WCAG 2.3.1), Pixelblöcke also nur einmal wechseln lassen und nicht flackern."
 },
 "messwerte": {
  "easing": "global none, Formgebung im Shader (smoothstep); alternativ power2.inOut auf progress",
  "dauer_ms": "1200–2600 (Demo 20: 2600)",
  "stagger_ms": "über Maskenversatz im Shader",
  "distanz": "Displacement-Stärke typisch 0,1–0,3 UV-Einheiten",
  "sonstiges": "SPREAD 0,6 / FLIGHT 0,4 / BANDS 12 (Demo 20)",
  "herkunft": "beobachtet",
  "quelle": "https://raw.githubusercontent.com/codrops/SlideshowAnimations/main/js/demo20/slideshow.js",
  "aus_eintrag": [
   "webgl-slider-uebergang"
  ]
 },
 "kurve": {
  "bezier": [
   0.65,
   0,
   0.35,
   1
  ],
  "css": "cubic-bezier(0.65, 0, 0.35, 1)",
  "name": "power2.inOut",
  "dauer_ms": 1200
 },
 "gesehen_bei": [
  {
   "seite": "Thibault Guignand Portfolio (Video-Karussell)",
   "url": "https://www.thibaultguignand.com/",
   "auszeichnung": "",
   "beobachtung": "OGL-Shader mit progress 0–1 per GSAP-Timeline und parabola(progress, 2.), Peak bei 50%. Uniforms uNoisePixelSize, uDisplaceIntensity und uRGBShift, Block-Reveal per step() gegen Noise-Textur.",
   "art": "website",
   "browser_gemessen": true
  },
  {
   "seite": "Aircord",
   "url": "https://aircord.co.jp",
   "auszeichnung": "",
   "beobachtung": "Laut Codrops-Artikel Vorbild für das Schichten mehrerer Szenen zu nahtlosen Seitenübergängen (der Autor kennt die Technik aus einem Garden-Eight-Artikel). Domain aus dem Artikel, Seite selbst nicht geöffnet.",
   "art": "website-ungeprueft"
  },
  {
   "seite": "Active Theory (Lively Principle) und Slosh Seltzer",
   "url": "https://activetheory.net",
   "auszeichnung": "",
   "beobachtung": "Im Composite-Rendering-Artikel als Beispiele für Scrollen und Übergänge zwischen Szenen genannt. Selbst nicht geöffnet.",
   "art": "website-ungeprueft",
   "browser_gemessen": true
  },
  {
   "seite": "Interlude Demo",
   "url": "https://interlude.crnacura.workers.dev/",
   "auszeichnung": "",
   "beobachtung": "Shader-Kategorie mit dither, dissolve, ink, spiral, velvet, particles und channel, Three.js auf Astro ClientRouter.",
   "art": "demo"
  },
  {
   "seite": "Codrops Demo – Slideshow Animations (Demo 20, WebGL)",
   "url": "http://tympanus.net/Development/SlideshowAnimations/",
   "auszeichnung": "",
   "beobachtung": "Quellcode demo20: Uniform progress 0 → 1 in 2,6 s mit ease none; Shader-Timing über SPREAD 0,6, FLIGHT 0,4, BANDS 12; Pixel wandern helligkeitsgleich entlang einer Hilbert-Kurve; Lücken füllt ein geblurrter Mix; Fallback Crossfade.",
   "art": "demo"
  },
  {
   "seite": "Codrops – Composite Rendering: The Brilliance Behind Inspiring WebGL Transitions (02/2026)",
   "url": "https://tympanus.net/codrops/2026/02/23/composite-rendering-the-brilliance-behind-inspiring-webgl-transitions/",
   "auszeichnung": "",
   "beobachtung": "Nur Titel/URL gesehen (Artikeltext nicht abrufbar).",
   "art": "artikel"
  },
  {
   "seite": "Codrops – Real-Time Datamosh Effect",
   "url": "https://tympanus.net/codrops/2026/09/02/breaking-the-frame-building-a-real-time-datamosh-effect-with-three-js/",
   "auszeichnung": "",
   "beobachtung": "Laut Feed: Shader und codec-artige Techniken erzeugen Datamosh-Glitch in Echtzeit.",
   "art": "artikel"
  },
  {
   "seite": "Codrops: Ideas for Pixel Page Transitions",
   "url": "https://tympanus.net/codrops/2023/04/05/ideas-for-pixel-page-transitions",
   "auszeichnung": "",
   "beobachtung": "Laut Tag-Übersicht pixelbasierte Seitenübergänge, inspiriert von einer Animation von Niccolò Miranda.",
   "art": "artikel"
  },
  {
   "seite": "Osmo Page Transition Course",
   "url": "https://www.osmo.supply/product/page-transition-course",
   "auszeichnung": "",
   "beobachtung": "Vorlagen 'Pixelated Wave' und 'Basic Pixelated'.",
   "art": "demo"
  },
  {
   "seite": "Immersive Garden",
   "url": "https://immersive-g.com/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft 31.10.2026 (HTML/Bundle per curl abgerufen): Seitenwechsel als Vollbild-Shader: vorherige und neue Ansicht als Texturen (tPrevViewBg/Ui, tView1Bg/Ui, tView2Bg/Ui) mit Alpha-Uniforms, Übergangsmaske aus Rauschen + smoothstep (tAboutViewMaskNoise, uAboutViewMaskTransition).",
   "art": "website",
   "browser_gemessen": true
  }
 ],
 "tutorials": [
  {
   "titel": "Composite Rendering: The Brilliance Behind Inspiring WebGL Transitions (Codrops, 02/2026)",
   "url": "https://tympanus.net/codrops/2026/02/23/composite-rendering-the-brilliance-behind-inspiring-webgl-transitions/"
  },
  {
   "titel": "Building a Scroll-Revealed WebGL Gallery with GSAP, Three.js, Astro and Barba.js (Codrops, 02/2026)",
   "url": "https://tympanus.net/codrops/2026/02/02/building-a-scroll-revealed-webgl-gallery-with-gsap-three-js-astro-and-barba-js/"
  },
  {
   "titel": "From Shader Uniforms to Clip-Path Wipes (Codrops, 05/2026)",
   "url": "https://tympanus.net/codrops/2026/05/06/from-shader-uniforms-to-clip-path-wipes-how-gsap-drives-my-portfolio/"
  },
  {
   "titel": "Codrops: WebGL Rotating Image Gallery using OGL and GLSL",
   "url": "https://tympanus.net/codrops/2024/12/03/how-to-create-a-webgl-rotating-image-gallery-using-ogl-and-glsl-shaders/"
  },
  {
   "titel": "GitHub: codrops/SlideshowAnimations",
   "url": "https://github.com/codrops/SlideshowAnimations"
  },
  {
   "titel": "Breaking the Frame: Building a Real-Time Datamosh Effect with Three.js",
   "url": "https://tympanus.net/codrops/2026/09/02/breaking-the-frame-building-a-real-time-datamosh-effect-with-three-js/"
  },
  {
   "titel": "Ideas for Pixel Page Transitions (Codrops)",
   "url": "https://tympanus.net/codrops/2023/04/05/ideas-for-pixel-page-transitions"
  }
 ],
 "kombinierbar_mit": [
  "seitenwechsel-kamerafahrt",
  "vt-shared-element-morph",
  "webgl-ladeszene-fortschritt",
  "slideshow-innere-gegenparallaxe",
  "token-filmisch-shader",
  "token-kinetisch-inout",
  "ascii-dither-pixel-stil",
  "webgl-bildverzerrung",
  "boot-sequenz-intro",
  "scramble-decode"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/3d-webgl/shader-uebergang-dissolve/",
  "meta": "https://cecodesign.de/lab/fundus/3d-webgl/shader-uebergang-dissolve/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/3d-webgl/shader-uebergang-dissolve/demo"
 },
 "herkunft": {
  "quelldateien": [
   "uebergaenge.json",
   "galerien_stile.json",
   "material3d.json",
   "patch-belege-2.json"
  ],
  "pruefnotizen": [
   "patch-belege-2.json: Zusammen mit Thibault Guignand jetzt 2 Produktionsbelege. Aircord und Active Theory nicht verifizierbar (Aircord-Bundle zeigt nur Filter-Feature-Erkennung, Active Theory lädt per SPA ohne auswertbare Bundles)."
  ],
  "zusammengelegt_aus": [
   "webgl-shader-uebergang",
   "webgl-slider-uebergang",
   "pixel-dissolve-uebergang",
   "pixel-raster-uebergang"
  ],
  "querverweis_kategorien": [
   "Seitenübergänge",
   "Galerien & Slider"
  ],
  "leistungskosten_spanne": "mittel–hoch (je nach Variante)"
 },
 "bau": {
  "status": "fertig",
  "kurz": "Projekt-Slider eines Markenateliers: Bilder verbrennen mit Glutkante, fließen per Displacement mit RGB-Shift oder zerfallen in Pixelblöcke, alles in einem Shader.",
  "demo": true,
  "abhaengigkeiten": [
   "three@0.186.0"
  ],
  "werte": {
   "progress": "uProgress 0 → 1 per eigenem Tween mit power2.inOut (= cubic-bezier(0.65, 0, 0.35, 1)); Formgebung pro Pixel im Shader (smoothstep bzw. step)",
   "parabola": "parabola(p, 2) = (4p(1 − p))², Spitze bei 50 %, steuert Warp, RGB-Shift und Pixelgröße",
   "noise_glut": "1800 ms; Maske fbm 5 Oktaven × 3.2 (smoothstep 0.18–0.82), 35 % Diagonale beigemischt; Kante 0.1, Schwelle e = p · 1.3 − 0.15; harte Kante smoothstep ±0.003; Verkohlen bis 0.9 · Kante; Glut #ff6a1f, Gauß-Breite 0.016, heißer Kern 0.0035; Warp 0.03 UV × parabola(p, 2)",
   "displacement_rgb": "1400 ms; Maske Diagonale + 45 % Noise, Breite 0.1; Displacement 0.2 UV × (0.6 p + 0.4 Maske) für die alte, gegenläufig für die neue Ansicht; Warp-Noise fbm × 2.4; RGB-Shift 0.008 UV × parabola(p, 2)",
   "pixel_bloecke": "1200 ms; Pixelgröße 1 → 48 px in 8er-Stufen × parabola(p, 2); Block-Reveal 40 px, step(t, p) mit t = 60 % Zufall + 40 % Diagonale",
   "richtung": "Diagonale 0.62 x + 0.38 y, bei „zurück“ gespiegelt; neuer Zufalls-Seed je Wechsel",
   "texte": "Titel, Leistung, Text: raus 30 % der Dauer (−60 %, opacity 0), rein 60 % der Dauer ab +80 ms, Versatz 40/60 ms, power2.inOut",
   "reduziert": "Überblendung 240 ms linear, kein Displacement, kein RGB-Shift, keine Pixel",
   "ui": "Umschalter und Knöpfe 150 ms linear",
   "bildanpassung": "object-fit cover im Shader über uRes und Bildgröße; Telefon nutzt Hochformatbilder 4:5",
   "pixelratio": "max. 2, Touch max. 1.5; Render-Loop nur während des Übergangs"
  },
  "ausloeser": "klick",
  "touch": "Tippen aufs Bild wechselt weiter, waagerechtes Wischen vor oder zurück, senkrecht scrollt die Seite (touch-action: pan-y). Hochformatbilder per <picture>, Pixelratio 1.5.",
  "reduziert": "Statt Shader-Effekt eine lineare Überblendung über 240 ms ohne Verzerrung. Texte blenden nur 200 ms ein, ohne Bewegung.",
  "korrekturen": {
   "beschreibung": "Alte und neue Ansicht liegen als Texturen vor: Bilder und Videos direkt, ganze Szenen über Render-Targets. Ein Vollbild-Quad mit Fragment-Shader mischt beide anhand von uProgress (0 bis 1). Die Mischung ist kein linearer Fade, sondern eine Maske: Noise mit smoothstep() oder step(), ein diagonaler Verlauf oder Pixelblöcke. Dazu kommen Displacement (UV-Verschiebung) und RGB-Shift, die zur Mitte des Übergangs am stärksten sind (parabola über progress). GSAP oder ein eigener Tween treibt die Uniform.",
   "warum_es_wirkt": "Der Übergang wird zum Material: Das Bild verbrennt, zerfließt oder zerfällt. Mit DOM und CSS ist das nicht erreichbar, deshalb wirkt es sofort hochwertig und handwerklich stark. Farbe der Glut, Maskenform und Rhythmus lassen sich markenspezifisch einstellen.",
   "wann_einsetzen": "Bei Vollbild-Medienwechseln: Hero- und Projekt-Slider, Galerien, Portfolios mit Video, Detailwechsel in Portfolios. Besonders auf Seiten, die ohnehin eine WebGL-Ebene haben. Die Pixel-Variante passt zu Tech-, Gaming- und Kreativseiten mit Retro-Ästhetik.",
   "wann_nicht": "Auf textlastigen oder sachlichen Seiten ohne WebGL, weil der Aufwand nicht im Verhältnis steht. Bei Bildern mit viel Text, weil Verzerrung die Lesbarkeit zerstört. Wenn das Performance-Budget knapp ist oder kein Fallback gebaut wird. Bei ruhigen Luxus- und Editorial-Marken wirkt es zu laut, und bei häufiger Navigation nerven lange Übergänge.",
   "varianten": [
    "Noise-Dissolve mit Glutkante: step bzw. smoothstep gegen Noise, die Kante leuchtet wie Brennen.",
    "Displacement mit chromatischer Aberration: Eine Noise- oder Graustufentextur verschiebt die UVs, die Farbkanäle laufen auseinander.",
    "Pixel-Mosaik mit Block-Reveal: Die Pixelgröße wächst zur Mitte und schrumpft wieder, Blöcke wechseln per step() gegen Zufall (uNoisePixelSize).",
    "Radiale Welle oder Kreis-Reveal ab Klickposition.",
    "Tinte, Spirale, Dithering oder Partikel (Interlude-Shader).",
    "Pixel-Sortierung entlang einer Hilbert-Kurve nach Helligkeit (Codrops Demo 20).",
    "Datamosh-Glitch über ein Feedback-Render-Target mit Bewegungsvektoren.",
    "Composite Rendering: DOM-Ansichten werden in eine gemeinsame Szene gerendert und dort überblendet, der Canvas bleibt über Seitenwechsel bestehen (Barba, Astro ClientRouter).",
    "Ohne WebGL: Kachelraster per GSAP oder Canvas2D (drawImage mit imageSmoothingEnabled=false)."
   ],
   "umsetzung": "Three.js oder OGL mit einem einzigen Vollbild-Quad, dessen Vertex-Shader direkt im Clip-Space ausgibt (gl_Position = vec4(position.xy, 0.0, 1.0)). Uniforms: uProgress, uFrom, uTo, Bild- und Canvasgröße (für object-fit cover im Shader), dazu Stärken wie uDisplace oder uRGBShift. Kern der Noise-Variante: float m = smoothstep(p − w, p + w, noise); vec2 d = uv + (noise − 0.5) * uDisplace * parabola(p, 2.0); mix(texture(uFrom, d), texture(uTo, d), m). Die globale Zeit kann linear oder mit power2.inOut laufen, die Form entsteht pro Pixel. Für ganze Seiten werden beide Ansichten in Render-Targets gerendert und Passes in einem Composite-Shader gebündelt. Texturen vorladen und auf Mobilgeräten auf 2048 px begrenzen, Kontextverlust abfangen, Render-Loop nur während des Übergangs laufen lassen.",
   "mobil": "Pixelratio auf 1 bis 1,5 begrenzen, Render-Targets in halber Auflösung. Kürzere Dauer, bei der Pixel-Variante größere Zellen. Ein einzelner Vollbild-Pass ist meist unproblematisch. Auf schwachen Geräten auf Crossfade oder Clip-Path-Wipe zurückfallen.",
   "reduzierte_bewegung": "Kein Displacement, kein RGB-Shift, keine Pixel. Nur eine weiche Überblendung von höchstens 300 ms oder ein harter Schnitt.",
   "barrierefreiheit": "Der Canvas ist aria-hidden, Bilder und Texte bleiben echt im DOM. Bedienung wie bei einem normalen Slider: Knöpfe, Pfeiltasten, Ansage des neuen Projekts per aria-live. Nach einem Seitenwechsel den Fokus korrekt setzen. Nicht mehr als drei Blitze pro Sekunde (WCAG 2.3.1), Pixelblöcke also nur einmal wechseln lassen und nicht flackern."
  },
  "geprueft": "31.10.2026",
  "notiz": "Erfundenes Markenatelier Ostwind mit sechs Arbeiten (Marken, Plakat, Packaging, Editorial) als Slider. Ein einziger Fragment-Shader auf einem Vollbild-Quad (Three.js) enthält drei Varianten, umschaltbar: Noise-Dissolve mit Glutkante, Displacement mit RGB-Shift, Pixel-Mosaik mit Block-Reveal. Die Bilder kommen direkt aus den DOM-<img> als Texturen, object-fit cover rechnet der Shader. Gerendert wird nur während des Übergangs. Ohne WebGL oder bei Kontextverlust blenden die <img> per CSS über. Live-Anzeige von uProgress. Die Vorführung klickt mit gedachtem Zeiger weiter und wechselt nach je zwei Bildern die Variante. Bilder 01.11.2026: eigene Bilder statt Portfolio. Zugang 02.11.2026: Varianten- und Pfeilknöpfe mit eigenem Fokusring (outline 2px Text, Abstand 3 px) statt outline none, Kontrastmodus: Knopfrahmen und Highlight-Fokus an der Bildfläche."
 }
}