{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "tiefenkarten-relighting",
 "name": "2.5D-Bilder mit Tiefenkarte",
 "name_en": "Depth-map parallax / image relighting",
 "kurz": "Ein Rosengarten-Panorama mit Tiefenkarte: Die Sonne folgt dem Zeiger, sinkt sie tief, glüht der Fels und im Tal gehen Lichter an.",
 "kategorie": "3D & WebGL",
 "kategorie_slug": "3d-webgl",
 "kategorie_nr": 11,
 "bau_chat": "C5",
 "prioritaet": "C",
 "trendstatus": "aufsteigend",
 "belegstatus": "quellenbelegt",
 "website_belege": 0,
 "stimmung": [
  "ruhig",
  "filmisch"
 ],
 "stimmung_roh": [
  "filmisch",
  "magisch",
  "ruhig"
 ],
 "technik": [
  "webgl-shader",
  "three",
  "tsl"
 ],
 "technik_gruppen": [
  "webgl"
 ],
 "leistungskosten": "mittel",
 "steckbrief": {
  "beschreibung": "Zu einem Foto gehört eine Tiefenkarte, heute meist per KI-Tiefenschätzung. Parallax: Der Shader verschiebt die uv abhängig von Tiefe und Zeiger oder Gyroskop, das Foto bekommt räumliche Tiefe. Relighting: Aus der Tiefenkarte entstehen Normalen, eine Lichtquelle am Zeiger beleuchtet das Bild mit Lambert, Glanz und Eigenschatten (Raymarching über die Tiefe). Optional als verschobenes Mesh in einer 3D-Szene.",
  "warum_es_wirkt": "Statische Fotos werden lebendig und räumlich, ohne 3D-Modell. Licht, das dem Zeiger folgt, wirkt magisch.",
  "wann_einsetzen": "Hero-Fotos, Porträts, Architektur, Landschaft, Produktfotos, Kunst.",
  "wann_nicht": "Bei Bildern mit feinen Kanten wie Haaren ohne saubere Tiefenkarte: Es entstehen Artefakte.",
  "varianten": [
   "Parallax per Zeiger",
   "Gyro-Parallax auf dem Telefon",
   "Licht am Zeiger mit Eigenschatten",
   "Verschobenes Mesh (Displacement)",
   "Tiefen-Scan (Variante scan): Eine Lichtfront läuft durch die Tiefenkarte von fern nach nah, mit heller Linie an der Front; der Zeiger stellt sie auf die Ebene darunter"
  ],
  "umsetzung": "Parallax klein halten (0.01–0.03 uv), sonst reißen Kanten; Ränder per Zoom 1.05 verdecken. Eigenschatten nur lokal rechnen: kurzer Strahl und nur kleine Höhensprünge, sonst werfen Vordergrund-Objekte Geisterschatten auf den fernen Hintergrund. Bild und Tiefenkarte in einer Textur-Auflösung, Normalen im Shader aus dem Gradienten. Aufnahme wegen handwerklicher Qualität und Aktualität (08/2026), weitere Award-Belege nicht verifiziert.",
  "mobil": "Gyroskop (auf iOS mit Erlaubnis) oder langsame Auto-Bewegung.",
  "reduzierte_bewegung": "Statisches Bild, Licht fest.",
  "barrierefreiheit": "alt-Text bzw. aria-label am Bild, das Motiv beschreibt das Original. Text liegt als HTML über dem Bild."
 },
 "messwerte": {
  "easing": "Lerp 0.05–0.1",
  "dauer_ms": "",
  "stagger_ms": "",
  "distanz": "Parallax 0.01–0.03 uv",
  "sonstiges": "",
  "herkunft": "typisch",
  "quelle": ""
 },
 "kurve": null,
 "gesehen_bei": [
  {
   "seite": "Codrops – Relighting Images with Depth Maps",
   "url": "https://tympanus.net/codrops/2026/08/19/relighting-images-with-depth-maps-and-three-js/",
   "auszeichnung": "",
   "beobachtung": "Laut Feed: Tiefenkarten mit TSL/WebGPU für dynamisches Licht und Self-Shadowing.",
   "art": "artikel"
  }
 ],
 "tutorials": [
  {
   "titel": "Relighting Images with Depth Maps and Three.js",
   "url": "https://tympanus.net/codrops/2026/08/19/relighting-images-with-depth-maps-and-three-js/"
  }
 ],
 "kombinierbar_mit": [
  "webgl-bildverzerrung",
  "webgpu-tsl-compute"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/3d-webgl/tiefenkarten-relighting/",
  "meta": "https://cecodesign.de/lab/fundus/3d-webgl/tiefenkarten-relighting/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/3d-webgl/tiefenkarten-relighting/demo"
 },
 "herkunft": {
  "quelldateien": [
   "material3d.json",
   "patch-belege-2.json"
  ],
  "pruefnotizen": [
   "patch-belege-2.json: Kein Produktionsbeleg (keine uDepth/depthMap-Shader in ~100 Bundles); bisher nur Codrops-Artikel. Herabstufung bis zum ersten Fund."
  ],
  "prioritaet_hinweis": "31.10.2026: B → C laut patch-belege-2.json (Kein Produktionsbeleg (keine uDepth/depthMap-Shader in ~100 Bundles); bisher nur Codrops-Artikel. Herabstufung bis zum ersten Fund.)"
 },
 "bau": {
  "status": "fertig",
  "kurz": "Ein Rosengarten-Panorama mit Tiefenkarte: Die Sonne folgt dem Zeiger, sinkt sie tief, glüht der Fels und im Tal gehen Lichter an.",
  "demo": true,
  "abhaengigkeiten": [
   "three@0.186.0"
  ],
  "werte": {
   "lerp_licht": "0.06 je Bild bei 60 Bildern/s, umgerechnet 1 − (1 − 0.06)^(dt·60)",
   "lerp_parallax": "0.08 je Bild",
   "parallax": "uv += Maus(−1..1) · Stärke · (Tiefe − 0.45), zwei Iterationen; Licht & Schatten 0.012 uv, Parallax und Tiefenkarte 0.026 uv",
   "zoom": "1.05 gegen Randrisse",
   "normalen": "aus dem Tiefengradienten über ±1.5 Texel, Differenz begrenzt auf ±0.02, Faktor 18",
   "licht": "Punktlicht an der Zeigerstelle, 0.3 vor der Bildebene; Tiefe 0..1 → Höhe 0.22",
   "eigenschatten": "24 Schritte über 0.09 Bildbreite zur Lampe, nur Höhensprünge 0.0015–0.016 zählen, weich ausgeblendet",
   "lichtfarbe": "Sonnenhöhe = 1 − (y − 0.1) · 1.6; smoothstep(0.08, 0.62): tief rgb(1.0, 0.46, 0.38) · 1.35, hoch rgb(1.0, 0.96, 0.9) · 1.05; Fels bei tiefer Sonne +45 %",
   "umgebung": "rgb(0.26, 0.29, 0.46) bis rgb(0.5, 0.52, 0.58)",
   "talichter": "Maske im Alphakanal der Tiefenkarte, rgb(1.0, 0.72, 0.42) · 1.6 · (1 − smoothstep(0.08, 0.32, Sonnenhöhe))",
   "uhr": "Sonnenhöhe 1 = 13:30, 0 = 16:50 (Sonnenuntergang Bozen Mitte November)",
   "bild": "1280 × 720, Farbe und Tiefe (R Tiefe, G Fels, B Reben, A Lichter) als DataTexture",
   "einblenden": "Canvas 1100 ms cubic-bezier(0.37, 0, 0.63, 1)",
   "ui": "200 ms cubic-bezier(0.4, 0, 0.2, 1)",
   "pixelratio": "max. 1.5"
  },
  "ausloeser": "hover",
  "touch": "Ziehen mit dem Finger setzt die Sonne. Ohne Finger zieht sie langsam von selbst, mit Gyroskop neigt sich das Bild (iOS fragt beim ersten Tippen um Erlaubnis). Die Buchungsleiste liegt fest unten, die Variantenleiste ist eingeklappt. Morgen-Scan: Der Scan läuft von selbst, Tippen oder Ziehen stellt die Lichtfront auf die Tiefe unter dem Finger; Pause-Knopf „Anhalten“ unten rechts (auch in der Grundvariante auf Touch, wo die Sonne von selbst wandert).",
  "reduziert": "Statisches Bild ohne Parallax und ohne Lerp: feste tiefe Sonne mit Alpenglühen. Ein Klick setzt das Licht sofort an eine andere Stelle. Morgen-Scan: Landschaft steht ganz im Morgenlicht, keine Front, keine Linie, kein Pause-Knopf.",
  "korrekturen": {
   "beschreibung": "Zu einem Foto gehört eine Tiefenkarte, heute meist per KI-Tiefenschätzung. Parallax: Der Shader verschiebt die uv abhängig von Tiefe und Zeiger oder Gyroskop, das Foto bekommt räumliche Tiefe. Relighting: Aus der Tiefenkarte entstehen Normalen, eine Lichtquelle am Zeiger beleuchtet das Bild mit Lambert, Glanz und Eigenschatten (Raymarching über die Tiefe). Optional als verschobenes Mesh in einer 3D-Szene.",
   "warum_es_wirkt": "Statische Fotos werden lebendig und räumlich, ohne 3D-Modell. Licht, das dem Zeiger folgt, wirkt magisch.",
   "wann_einsetzen": "Hero-Fotos, Porträts, Architektur, Landschaft, Produktfotos, Kunst.",
   "wann_nicht": "Bei Bildern mit feinen Kanten wie Haaren ohne saubere Tiefenkarte: Es entstehen Artefakte.",
   "varianten": [
    "Parallax per Zeiger",
    "Gyro-Parallax auf dem Telefon",
    "Licht am Zeiger mit Eigenschatten",
    "Verschobenes Mesh (Displacement)",
    "Tiefen-Scan (Variante scan): Eine Lichtfront läuft durch die Tiefenkarte von fern nach nah, mit heller Linie an der Front; der Zeiger stellt sie auf die Ebene darunter"
   ],
   "umsetzung": "Parallax klein halten (0.01–0.03 uv), sonst reißen Kanten; Ränder per Zoom 1.05 verdecken. Eigenschatten nur lokal rechnen: kurzer Strahl und nur kleine Höhensprünge, sonst werfen Vordergrund-Objekte Geisterschatten auf den fernen Hintergrund. Bild und Tiefenkarte in einer Textur-Auflösung, Normalen im Shader aus dem Gradienten. Aufnahme wegen handwerklicher Qualität und Aktualität (08/2026), weitere Award-Belege nicht verifiziert.",
   "mobil": "Gyroskop (auf iOS mit Erlaubnis) oder langsame Auto-Bewegung.",
   "reduzierte_bewegung": "Statisches Bild, Licht fest.",
   "barrierefreiheit": "alt-Text bzw. aria-label am Bild, das Motiv beschreibt das Original. Text liegt als HTML über dem Bild."
  },
  "geprueft": "01.11.2026",
  "notiz": "Rezept boutique-hotel-gastgeber, erfundener Ansitz Ploner in Bozen St. Magdalena: Hero mit Blick über die Pergl-Weinberge auf den Rosengarten, darunter die Buchungsleiste (Mindestaufenthalt im Feld, Preis mit ab), Newsreader 300 für die Headline, Mona Sans breit für Labels, Sand und Creme, Hauston #6E5A47. Foto und Tiefenkarte gibt es hier nicht, darum sind beide per Canvas aus Rauschen gemalt (Fels, Geröll, Wald, Reben, Kirchlein, Zypressen). Der Shader rechnet Parallax, Normalen, Lambert mit Glanz, lokalen Eigenschatten und eine Lichtfarbe nach Sonnenhöhe: tief unten Enrosadira, im Tal gehen Fenster an. Umschalter Licht & Schatten, Parallax, Tiefenkarte. Referenzen: das-stue.com, juvet.com, fogoislandinn.ca, sommerrohouse.com. AD-Review 01.11.2026: Note 4. Nachgebessert: Felswand neu gemalt (Pfeiler brechen in der Höhe ab und versetzen sich, große Wandflächen hell und dunkel), vorher wirkte sie wie ein gestreifter Vorhang. Zugang 02.11.2026: Metagrau --meta #82847f → #62645f (5,2:1 auf Sand, 5,4:1 auf Creme). Kontrastmodus: Knöpfe mit Rahmen ButtonText. Korrektur 02.11.2026: Variante scan „Morgen-Scan“ (Prinzip Tiefen-Scan aus Layer Depth, BUTTONS-SLIDERREV-RECHERCHE Q27; nichts übernommen): eigener Shader-Zweig, Lichtfront läuft durch die Tiefenkarte von den Gipfeln bis zu den Reben, Linie an der Front, Zeiger stellt die Ebene ein; Headline „Erst die Gipfel, dann das Tal, dann der Frühstückstisch.“, Uhr 7:05 bis 8:00. Pause-Knopf im Scan und auf Touch. Umschalter Abendsonne | Morgen-Scan, Darstellungsknöpfe nur in der Abendsonne.",
  "varianten": [
   {
    "id": "sonne",
    "name": "Abendsonne am Zeiger",
    "knopf": "Abendsonne",
    "wann": "Hotel, Weingut, Gastgeber mit Panorama: Die Sonne folgt dem Zeiger, Eigenschatten und Alpenglühen; mit Parallax und Tiefenkarte als Darstellung.",
    "werte": {
     "licht": "Punktlicht am Zeiger mit Eigenschatten (24 Schritte), Lichtfarbe nach Sonnenhöhe",
     "uhr": "13:30 bis 16:50"
    }
   },
   {
    "id": "scan",
    "name": "Morgen-Scan durch die Tiefe",
    "knopf": "Morgen-Scan",
    "wann": "Hotel, Bergbahn, Architektur, Landschaft mit klarer Staffelung: Das erste Licht erreicht Ebene für Ebene erst die Gipfel, dann Tal und Vordergrund. Erzählt Ankommen und Tagesbeginn; nicht bei flachen Motiven ohne Tiefe und nicht als Dauerschleife hinter langen Texten.",
    "werte": {
     "scan": "Tiefe 0.12 → 1.0 in 6500 ms sine in-out (0.5 − 0.5·cos πt), 2500 ms halten, 1600 ms zurück; Runde 10,6 s",
     "front": "erreicht = 1 − smoothstep(scan − 0.05, scan, Tiefe); Linie exp(−|Tiefe − scan| / 0.006) · 0.55 in #FFC780 (1.0, 0.78, 0.5)",
     "farbe": "vor der Front Bild · (0.30, 0.34, 0.50); im Licht Bild · ((0.62, 0.62, 0.68) + (1.0, 0.86, 0.70) · (0.28 + Lambert · 0.3)), Licht aus (−0.55, 0.35, 0.75); Himmel hellt mit smoothstep(0.1, 0.7, scan) auf; Fenster im Tal gehen bis scan 0.5 aus",
     "zeiger": "Lichtfront folgt der Tiefe unter dem Zeiger (+0.02, Himmel = 0.3) mit lerp 0.06; ohne Zeiger läuft die Schleife weiter",
     "uhr": "7:05 bis 8:00, Texte „Erstes Licht am Rosengarten“ (< 0.38), „Licht im Tal“ (< 0.6), „Sonne auf der Terrasse“",
     "text": "Kontrastschicht unten .6 → .7 (Telefon .72 → .78)",
     "pause": "„Anhalten“ (button, aria-pressed, Name „Bewegung anhalten“) unten rechts, ruft dieselbe Pause wie FUNDUS_DEMO.pause; aus bei reduzierter Bewegung und in der Vorschau"
    }
   }
  ]
 }
}