{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "nachbearbeitung-filmlook",
 "name": "Post-Processing-Filmlook",
 "name_en": "Post-processing: chromatic aberration, bloom, film grain, glitch",
 "kurz": "Eine Echtzeit-Szene am nächtlichen Steg bekommt den Kino-Look: Bloom, Aberration am Rand, Korn, Vignette und Grading in einem Pass, dazu Glitch nur beim Schnitt.",
 "kategorie": "3D & WebGL",
 "kategorie_slug": "3d-webgl",
 "kategorie_nr": 11,
 "bau_chat": "C5",
 "prioritaet": "C",
 "trendstatus": "etabliert",
 "belegstatus": "belegt",
 "website_belege": 2,
 "stimmung": [
  "präzise",
  "filmisch"
 ],
 "stimmung_roh": [
  "filmisch",
  "dunkel",
  "technisch"
 ],
 "technik": [
  "three",
  "postprocessing",
  "webgl-shader"
 ],
 "technik_gruppen": [
  "webgl"
 ],
 "leistungskosten": "mittel",
 "steckbrief": {
  "beschreibung": "Die Szene rendert in ein Render-Target. Danach läuft eine Effektkette: Bloom nur auf hellen Bereichen, chromatische Aberration zum Bildrand hin, Vignette, Filmkorn, leichte Linsenverzerrung und Farbgrading. Ereignisse lösen weitere Effekte aus, etwa ein Glitch beim Schnitt oder Aberration, die mit der Scrollgeschwindigkeit wächst. Alles läuft in einem kombinierten Pass.",
  "warum_es_wirkt": "Es hebt Echtzeit-3D vom Look einer Spiele-Engine zum Kino-Look und verbindet die 3D-Szene mit der Korn-Ästhetik der übrigen Seite.",
  "wann_einsetzen": "Bei jeder ambitionierten 3D-Szene, dezent dosiert.",
  "wann_nicht": "Wenn es übertrieben wird: Dauer-Aberration und starker Bloom wirken billig und anstrengend.",
  "varianten": [
   "Dezenter Kino-Look",
   "Aberration nach Geschwindigkeit",
   "Glitch beim Übergang",
   "Datamosh",
   "CRT-Look"
  ],
  "umsetzung": "pmndrs/postprocessing mit EffectComposer und EffectPass, der mehrere Effekte in einem Shader vereint. Bloom über luminanceThreshold statt Layer-Auswahl, wo es geht. Auf dem Telefon die Bloom-Auflösung halbieren. Ohne Bibliothek: Szene in ein HalfFloat-Target, Bloom als Dual-Filter-Kette, alles andere in einem Abschluss-Shader.",
  "mobil": "Effekte reduzieren, etwa nur Vignette und Korn oder Bloom in halber Auflösung.",
  "reduzierte_bewegung": "Keine Glitch-Bursts, kein Flackern, stehendes Korn.",
  "barrierefreiheit": "Flackern unter 3 Hz halten oder ganz vermeiden (Photosensitivität, WCAG 2.3.1). Glitch-Bursts mit Mindestabstand und ohne Helligkeitsblitze."
 },
 "messwerte": {
  "easing": "",
  "dauer_ms": "Glitch-Bursts 150–400",
  "stagger_ms": "",
  "distanz": "Aberration-Offset 0.001–0.004 uv",
  "sonstiges": "Igloo: Bloom levels 6, luminanceThreshold 0–0.2, intensity 1, radius 0.85, Film-Grain-Pass im Composite-Shader (Shader-Kommentar); Lusion: haloWidth 0.6, Kamera-Shake rotationSpeed 0.3. Typisch Grain 0.03–0.08.",
  "herkunft": "beobachtet",
  "quelle": "https://www.igloo.inc/assets/App3D-d68cb154.js"
 },
 "kurve": null,
 "gesehen_bei": [
  {
   "seite": "Igloo Inc",
   "url": "https://www.igloo.inc/",
   "auszeichnung": "Awwwards Site of the Year 2024",
   "beobachtung": "Chromatische Aberration auf Elementen und Materialien sowie in Szenenübergängen (Case Study).",
   "art": "website",
   "browser_gemessen": true
  },
  {
   "seite": "Codrops – Datamosh",
   "url": "https://tympanus.net/codrops/2026/09/02/breaking-the-frame-building-a-real-time-datamosh-effect-with-three-js/",
   "auszeichnung": "",
   "beobachtung": "Laut Feed: Echtzeit-Datamosh per Shader.",
   "art": "artikel"
  },
  {
   "seite": "Lusion",
   "url": "https://lusion.co/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft 31.10.2026 (HTML/Bundle per curl abgerufen): Postprocessing-Kette im Bundle: GTAO, Bloom (bloomAmount/Radius/Threshold/SmoothWidth/Saturation), cameraMotionBlur, screenPaintDistortion, Halo (haloWidth .6) und Kamera-Shake-Parameter.",
   "art": "website",
   "browser_gemessen": true
  }
 ],
 "tutorials": [
  {
   "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/"
  }
 ],
 "kombinierbar_mit": [
  "seitenwechsel-kamerafahrt",
  "grain-noise-overlay",
  "ascii-dither-pixel-stil"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/3d-webgl/nachbearbeitung-filmlook/",
  "meta": "https://cecodesign.de/lab/fundus/3d-webgl/nachbearbeitung-filmlook/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/3d-webgl/nachbearbeitung-filmlook/demo"
 },
 "herkunft": {
  "quelldateien": [
   "material3d.json",
   "patch-belege-2.json"
  ],
  "pruefnotizen": [
   "patch-belege-2.json: Mit Igloo jetzt 2 Produktionsbelege, Bloom-Werte beobachtet."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Eine Echtzeit-Szene am nächtlichen Steg bekommt den Kino-Look: Bloom, Aberration am Rand, Korn, Vignette und Grading in einem Pass, dazu Glitch nur beim Schnitt.",
  "demo": true,
  "abhaengigkeiten": [
   "three@0.186.0"
  ],
  "werte": {
   "bloom": "Dual-Filter, 6 Stufen (Telefon 4 bei halber Auflösung), Schwelle 0.2 mit Weiche 0.1 auf Luminanz, Stärke 1, Radius 0.85 (Gewichte wie UnrealBloom: mix(f, 1.2 − f, radius))",
   "aberration": "radial, am Bildrand 0.0015 uv (Kino); Tempo: 0.001 → 0.004 uv, voll ab 2 px/ms Zeiger- oder Scrollgeschwindigkeit, Abklingen 12 % je Bild; Telefon aus",
   "verzerrung": "Tonne 0.05 (Telefon aus)",
   "vignette": "Dunkel 0.55 ab Radius 0.35",
   "korn": "0.05, neu mit 24 Bildern/s, in Schatten stärker",
   "grading": "ACES, Lift (0.006, 0.014, 0.024) kühl, Gain (1.05, 1.0, 0.94) warm, Sättigung 0.92",
   "glitch": "Burst 300 ms, Spitze bei 35 %, 18 Bänder, Versatz ≤ 0.06 uv, Bänder wechseln alle 60 ms, Abstand ≥ 3 s; der Schnitt fällt auf die Spitze",
   "blende": "Wechsel der Einstellung in Kino/Tempo: 300 ms auf Schwarz, Schnitt, 300 ms auf, cubic-bezier(0.455, 0.03, 0.515, 0.955)",
   "vergleich": "Teiler Roh | Filmlook, Vorführung wischt von 92 % auf 40 % in 2400 ms cubic-bezier(0.455, 0.03, 0.515, 0.955)",
   "ui": "Opazität und Farbe 200 ms cubic-bezier(0.455, 0.03, 0.515, 0.955), Bildunterschrift 350 ms",
   "parallaxe": "Lerp 0.05 je Bild, Ausschlag 0.08 (Kino) bzw. 0.32 (Tempo)",
   "szene": "Render-Target HalfFloat, MSAA 4 (aus bei Software-Rendering), Pixelratio max. 1.5; Steg aus drei InstancedMesh, Wasser-Shader mit 18 Lichtspiegelungen",
   "vorfuehrung": "Runde 17 s: 5 s Kino mit Vergleich, 5 s Tempo mit gedachtem Zeiger, 7 s Schnitt mit drei Bursts"
  },
  "ausloeser": "dauer",
  "touch": "Wischen über die Szene und Seitenscroll liefern das Tempo für die Aberration. Auf dem Telefon nur Bloom (4 Stufen, halbe Auflösung), Vignette, Korn und Grading; Aberration und Verzerrung aus. Steuerung klappt ein, Pfeile zum Blättern 44 px groß.",
  "reduziert": "Kamera und Korn stehen, kein Glitch, kein Flackern der Laterne. Einstellungen wechseln hart ohne Abblende. Der Look selbst (Bloom, Grading, Vignette) bleibt als Standbild.",
  "korrekturen": {
   "beschreibung": "Die Szene rendert in ein Render-Target. Danach läuft eine Effektkette: Bloom nur auf hellen Bereichen, chromatische Aberration zum Bildrand hin, Vignette, Filmkorn, leichte Linsenverzerrung und Farbgrading. Ereignisse lösen weitere Effekte aus, etwa ein Glitch beim Schnitt oder Aberration, die mit der Scrollgeschwindigkeit wächst. Alles läuft in einem kombinierten Pass.",
   "warum_es_wirkt": "Es hebt Echtzeit-3D vom Look einer Spiele-Engine zum Kino-Look und verbindet die 3D-Szene mit der Korn-Ästhetik der übrigen Seite.",
   "wann_einsetzen": "Bei jeder ambitionierten 3D-Szene, dezent dosiert.",
   "wann_nicht": "Wenn es übertrieben wird: Dauer-Aberration und starker Bloom wirken billig und anstrengend.",
   "varianten": [
    "Dezenter Kino-Look",
    "Aberration nach Geschwindigkeit",
    "Glitch beim Übergang",
    "Datamosh",
    "CRT-Look"
   ],
   "umsetzung": "pmndrs/postprocessing mit EffectComposer und EffectPass, der mehrere Effekte in einem Shader vereint. Bloom über luminanceThreshold statt Layer-Auswahl, wo es geht. Auf dem Telefon die Bloom-Auflösung halbieren. Ohne Bibliothek: Szene in ein HalfFloat-Target, Bloom als Dual-Filter-Kette, alles andere in einem Abschluss-Shader.",
   "mobil": "Effekte reduzieren, etwa nur Vignette und Korn oder Bloom in halber Auflösung.",
   "reduzierte_bewegung": "Keine Glitch-Bursts, kein Flackern, stehendes Korn.",
   "barrierefreiheit": "Flackern unter 3 Hz halten oder ganz vermeiden (Photosensitivität, WCAG 2.3.1). Glitch-Bursts mit Mindestabstand und ohne Helligkeitsblitze."
  },
  "geprueft": "01.11.2026",
  "notiz": "Welt: Rezept fotograf-film-bild-zuerst (Film-Variante, Grund #0e0e0e, Instrument Serif nur für Namen und Titel, Instrument Sans, Fragment Mono für Zähler und Bildunterschrift, easeInOutQuad), erfundene Produktionsfirma „Kaltlicht“ aus Potsdam-Babelsberg zeigt die Previs ihres Films „Nachtfähre“: Steg am Griebnitzsee bei Nacht mit Laterne, Figur, Boot, Mond und Ufer-Lichtern. Auf der angefangenen Demo aufgebaut (Nachbearbeitungskette übernommen, Welt aus gastro-warm ersetzt, Abblende und Blättern per Pfeiltasten ergänzt). Interface in den Ecken, Zähler 01 / 03. Varianten Kino, Tempo, Schnitt und Vergleich Roh | Filmlook. Referenzen: bisous-production.com, bleed.com, baileywade.co.uk, dishoom.com. AD-Review 01.11.2026: Note 4. Zugang 02.11.2026: Vergleichs-Teiler inert, solange er ausgeblendet ist (Griff nicht fokussierbar); Knopf „Anhalten/Abspielen“ im Pult (aria-pressed, gleiche Pause wie FUNDUS_DEMO.pause(), Bild bleibt stehen), bei reduzierter Bewegung aus; Kontrastmodus-Rahmen für Knöpfe."
 }
}