{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "webgl-text-sdf",
 "name": "Typografie in WebGL",
 "name_en": "WebGL / MSDF text effects, UI in WebGL",
 "kurz": "Die Überschrift bleibt echter HTML-Text, WebGL legt SDF-Glyphen darüber: Sie verwürfeln per Atlas-Offset, laufen als Welle durch den Raum oder zerfallen in 3D.",
 "kategorie": "3D & WebGL",
 "kategorie_slug": "3d-webgl",
 "kategorie_nr": 11,
 "bau_chat": "C5",
 "prioritaet": "B",
 "trendstatus": "etabliert",
 "belegstatus": "belegt",
 "website_belege": 3,
 "stimmung": [
  "präzise",
  "filmisch",
  "laut"
 ],
 "stimmung_roh": [
  "technisch",
  "laut",
  "filmisch"
 ],
 "technik": [
  "three",
  "webgl-shader",
  "msdf",
  "tsl"
 ],
 "technik_gruppen": [
  "webgl"
 ],
 "leistungskosten": "mittel",
 "steckbrief": {
  "beschreibung": "Schrift wird als Distanzfeld (SDF oder MSDF) in einen Texturatlas gerendert und in WebGL als eine Fläche pro Glyphe gezeichnet. Jede Glyphe bekommt Attribute wie Index und Zufallswert, damit der Vertex-Shader sie einzeln bewegen kann: wellen, explodieren, verwürfeln. Ein Scramble tauscht nur den Texturoffset im Atlas, ohne DOM-Änderung und ohne Style-Neuberechnung. Der echte HTML-Text bleibt die Layout-Quelle, die WebGL-Glyphen liegen exakt darüber.",
  "warum_es_wirkt": "Typografie wird Material. Sie kann brechen, schmelzen, sich in Glas spiegeln und auf die 3D-Szene reagieren. Das Distanzfeld bleibt in jeder Größe und Perspektive scharf. Kontur und Gewicht lassen sich im Shader stufenlos ändern.",
  "wann_einsetzen": "Headlines auf immersiven Seiten, Intro-Sequenzen und Text hinter Glasobjekten. Am besten dort, wo ohnehin eine WebGL-Szene läuft.",
  "wann_nicht": "Fließtext und lange Lesestrecken. Seiten ohne sonstiges WebGL, denn dort kostet der Effekt viel Ladezeit für einen einzigen Moment.",
  "varianten": [
   "Scramble per Atlas-Offset (Igloo Inc)",
   "Welle oder Verformung im Vertex-Shader",
   "Explodierende 3D-Buchstaben",
   "HTML-Text responsiv in WebGL gespiegelt",
   "Text als Partikel"
  ],
  "umsetzung": "In Produktion troika-three-text (SDF-Layout im Worker, so bei Unseen Studio und 14islands) oder ein MSDF-Atlas mit eigenem Shader (median der drei Kanäle, fwidth-Kantenglättung, Outline-Breite wie bei Igloo). Ohne Bibliothek: Glyphen in Canvas 2D rastern und per Distanztransformation zu einem einkanaligen SDF-Atlas machen. Den DOM-Text mit color: transparent verstecken, aber lesbar und auswählbar lassen. Zeichenpositionen per Range.getClientRects aus dem Layout lesen und bei Größenänderung neu setzen. Schriftlizenz für die Atlas-Erzeugung prüfen.",
  "mobil": "Weniger Glyphen-Effekte und kürzere Flugbahnen. Ohne WebGL bleibt der DOM-Text sichtbar.",
  "reduzierte_bewegung": "Kein WebGL, der HTML-Text blendet kurz ein.",
  "barrierefreiheit": "Echter HTML-Text muss existieren: für Screenreader, Übersetzung, Suche und Auswahl. Das Canvas bekommt aria-hidden."
 },
 "messwerte": {
  "easing": "",
  "dauer_ms": "",
  "stagger_ms": "Glyphen 10–30",
  "distanz": "",
  "sonstiges": "Igloo: eigene MSDF-Shader (median(), fwidth-Kantenglättung, msdfOpaque mit Outline-Breite); Unseen/14islands: troika-three-text",
  "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": "UI in WebGL; Glitch per Shader; Text-Scramble verschiebt Buchstaben über den Offset einer SDF-Textur und vermeidet teure Browser-Style-Neuberechnungen (Case Study).",
   "art": "website",
   "browser_gemessen": true
  },
  {
   "seite": "Unseen Studio",
   "url": "https://www.unseen.co/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft 31.10.2026 (HTML/Bundle per curl abgerufen): troika-three-text im vendor.js (Worker troikaDefine) für SDF-Text in der WebGL-Szene.",
   "art": "website",
   "browser_gemessen": true
  },
  {
   "seite": "14islands",
   "url": "https://www.14islands.com/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft 31.10.2026 (HTML/Bundle per curl abgerufen): troika-three-text im Next.js-Chunk 7871-…js, Three.js + React-Three-Fiber.",
   "art": "website"
  }
 ],
 "tutorials": [
  {
   "titel": "Igloo Inc: Case Study",
   "url": "https://www.awwwards.com/igloo-inc-case-study.html"
  }
 ],
 "kombinierbar_mit": [
  "glas-transmission-3d",
  "seitenwechsel-kamerafahrt",
  "partikel-punktwolke"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/3d-webgl/webgl-text-sdf/",
  "meta": "https://cecodesign.de/lab/fundus/3d-webgl/webgl-text-sdf/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/3d-webgl/webgl-text-sdf/demo"
 },
 "herkunft": {
  "quelldateien": [
   "material3d.json",
   "patch-belege-2.json"
  ],
  "pruefnotizen": [
   "patch-belege-2.json: Jetzt 3 Produktionsbelege inkl. Igloo."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Die Überschrift bleibt echter HTML-Text, WebGL legt SDF-Glyphen darüber: Sie verwürfeln per Atlas-Offset, laufen als Welle durch den Raum oder zerfallen in 3D.",
  "demo": true,
  "abhaengigkeiten": [
   "three@0.186.0"
  ],
  "werte": {
   "aufbau": "Canvas position: absolute über der Bühne, pointer-events: none, aria-hidden. Eine InstancedBufferGeometry (PlaneGeometry 1 × 1), eine Instanz pro Glyphe, ShaderMaterial transparent ohne Tiefentest. PerspectiveCamera fov 30°, Abstand (Höhe / 2) / tan(15°), damit z = 0 genau CSS-Pixeln entspricht. Pixelratio max. 2.",
   "sync": "DOM ist die Layout-Quelle: Position jedes Zeichens per Range.getClientRects(); Grundlinie = Rechteck-Oberkante + fontBoundingBoxAscent der Schrift (Canvas measureText) × Größenfaktor. Prüfung jedes Frame, ob sich die Zeile verschoben hat, dann neu setzen. h1 bekommt color: transparent, bleibt auswählbar.",
   "atlas": "Einkanaliges SDF zur Laufzeit: Glyphen in Canvas 2D mit 96 px rastern, Distanzbereich 12 px, euklidische Distanztransformation (Felzenszwalb, Kantenpixel mit Alpha-Teilwert), Wert 0.5 = Kante; Atlas 1024 × 1024, RedFormat, LinearFilter, keine Mipmaps. Schriften: Host Grotesk 500, Newsreader Italic 400 (opsz 72), Geist Mono 500 für die 24 Scramble-Zeichen „abdeghkmnorsuxz02345789#“.",
   "kante": "fwidth-Kantenglättung: w = fwidth(sd) × 0.75, Füllung smoothstep(0.5 − w, 0.5 + w, sd); Kontur |sd − 0.5| < 2.2 / 24 (halbe Breite 2.2 Atlas-px)",
   "stagger_ms": 20,
   "kurve": "easeOutQuart 1 − (1 − t)^4 = cubic-bezier(0.165, 0.84, 0.44, 1), in allen Phasen",
   "scramble": "Einstieg: Glyphe i startet nach i × 20 ms, wechselt 360 ms lang alle 40 ms die Atlas-Zelle (Zufallsindex im Shader, keine DOM-Änderung) und erscheint dabei als graue Kontur #646464; danach 240 ms Einrasten zur gefüllten Tinte #0b0b09. Ersatzglyphe mittig in der Lücke, bei schmalen Zeichen gleichmäßig verkleinert (Faktor Vorschub × 1.1 / Ersatzvorschub, 0.62–1).",
   "streifen": "Zeiger über einer Glyphe: sie und ihre Nachbarn (±1, je 20 ms versetzt) verwürfeln 240 ms und rasten in 240 ms ein; Sperre bis zum Ende",
   "welle": "Phase = Index × 0.38 rad − Zeit × 2.4 rad/s; y-Versatz sin(Phase) × 12 px, z-Versatz sin(Phase) × 56 px, Kippung um x cos(Phase) × 0.42 rad; Zeiger: Gauß-Radius 150 px, Wulst z + 110 px, Gewicht + 0.05 im SDF (fetter); Zeiger-Lerp 0.1 pro Frame; Ein-/Ausblenden der Welle ≈ 480 ms",
   "zerfall": "Aus 900 ms, Halten 500 ms, Ein 1200 ms, je Glyphe 20 ms versetzt; Flugweite x ± 640 px, y ± 416 px, z −315 bis +585 px (Tiefe 900 px), Drehung bis ± 3.75 rad um eine Zufallsachse; Glyphen werden im Flug zur Kontur (Füllung 1 − smoothstep(0.08, 0.5, p)); Weite auf schmalen Bühnen × Bühnenbreite / 1100 (min. 0.45)",
   "farben": "Grund #fcfcfc, Tinte #0b0b09, Kontur/Sekundär #646464, Linien #e8e8e8, Fokus #2f5bea (einzige Farbe)",
   "ui": "Umschalter und Links 120 ms easeOutQuart; Kopier-Feedback „Kopiert“ 1600 ms",
   "render": "requestAnimationFrame, angehalten bei pause() und wenn die Bühne außer Sicht ist (IntersectionObserver)"
  },
  "ausloeser": "laden",
  "touch": "Kein Hover: Antippen eines Wortes verwürfelt das ganze Wort (Glyphen je 20 ms versetzt); Welle folgt dem Finger beim Ziehen, sonst läuft sie allein; Antippen der Zeile startet den Zerfall; kürzere Flugbahnen auf schmaler Bühne.",
  "reduziert": "Kein WebGL: der echte HTML-Text blendet in 320 ms linear ein, keine Bewegung; Werte-Anzeige meldet den reduzierten Zustand.",
  "korrekturen": {
   "beschreibung": "Schrift wird als Distanzfeld (SDF oder MSDF) in einen Texturatlas gerendert und in WebGL als eine Fläche pro Glyphe gezeichnet. Jede Glyphe bekommt Attribute wie Index und Zufallswert, damit der Vertex-Shader sie einzeln bewegen kann: wellen, explodieren, verwürfeln. Ein Scramble tauscht nur den Texturoffset im Atlas, ohne DOM-Änderung und ohne Style-Neuberechnung. Der echte HTML-Text bleibt die Layout-Quelle, die WebGL-Glyphen liegen exakt darüber.",
   "warum_es_wirkt": "Typografie wird Material. Sie kann brechen, schmelzen, sich in Glas spiegeln und auf die 3D-Szene reagieren. Das Distanzfeld bleibt in jeder Größe und Perspektive scharf. Kontur und Gewicht lassen sich im Shader stufenlos ändern.",
   "wann_einsetzen": "Headlines auf immersiven Seiten, Intro-Sequenzen und Text hinter Glasobjekten. Am besten dort, wo ohnehin eine WebGL-Szene läuft.",
   "wann_nicht": "Fließtext und lange Lesestrecken. Seiten ohne sonstiges WebGL, denn dort kostet der Effekt viel Ladezeit für einen einzigen Moment.",
   "varianten": [
    "Scramble per Atlas-Offset (Igloo Inc)",
    "Welle oder Verformung im Vertex-Shader",
    "Explodierende 3D-Buchstaben",
    "HTML-Text responsiv in WebGL gespiegelt",
    "Text als Partikel"
   ],
   "umsetzung": "In Produktion troika-three-text (SDF-Layout im Worker, so bei Unseen Studio und 14islands) oder ein MSDF-Atlas mit eigenem Shader (median der drei Kanäle, fwidth-Kantenglättung, Outline-Breite wie bei Igloo). Ohne Bibliothek: Glyphen in Canvas 2D rastern und per Distanztransformation zu einem einkanaligen SDF-Atlas machen. Den DOM-Text mit color: transparent verstecken, aber lesbar und auswählbar lassen. Zeichenpositionen per Range.getClientRects aus dem Layout lesen und bei Größenänderung neu setzen. Schriftlizenz für die Atlas-Erzeugung prüfen.",
   "mobil": "Weniger Glyphen-Effekte und kürzere Flugbahnen. Ohne WebGL bleibt der DOM-Text sichtbar.",
   "reduzierte_bewegung": "Kein WebGL, der HTML-Text blendet kurz ein.",
   "barrierefreiheit": "Echter HTML-Text muss existieren: für Screenreader, Übersetzung, Suche und Auswahl. Das Canvas bekommt aria-hidden."
  },
  "geprueft": "01.11.2026",
  "notiz": "Welt: Rezept „Stille Visitenkarte“ mit der erfundenen Interaction-Designerin Hedda Tjarks aus Oldenburg (Host Grotesk, Newsreader Italic als Stimme, Geist Mono für Metadaten, nur Graustufen). Die h1 ist größer als die Rezept-Regel „Satz in Textgröße“, weil der Effekt eine Bühne braucht; sonst bleibt alles leise. Die Demo baut den SDF-Atlas ohne Bibliothek zur Laufzeit (einkanalig, Canvas 2D + Distanztransformation), Messwerte von Igloo (Stagger, fwidth, Outline) übernommen; MSDF bzw. troika wären in Produktion schärfer an Ecken. Scramble-Ersatzglyphen kommen aus Geist Mono als technischer Kontrast. Vorführung: Einstieg-Scramble, gedachter Zeiger streift die Zeilen, Welle mit kreisendem Zeiger, Zerfall und Einrasten, dann Schleife. AD-Review 01.11.2026: Note 4 Zugang 02.11.2026: Kontrastmodus (forced-colors): h1 wieder echte Schrift in CanvasText, WebGL-Leinwand ausgeblendet (vorher nur als Grafik sichtbar), Knöpfe mit Rahmen."
 }
}