{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "glas-transmission-3d",
 "name": "Glas- und Kristallobjekte in 3D",
 "name_en": "Refractive 3D glass / transmission material, caustics",
 "kurz": "Ein Brillant, ein Eisblock und eine Linse aus echtem Transmissionsglas brechen die große Serif-Typo und die Glutsonne dahinter.",
 "kategorie": "3D & WebGL",
 "kategorie_slug": "3d-webgl",
 "kategorie_nr": 11,
 "bau_chat": "C5",
 "prioritaet": "A",
 "trendstatus": "etabliert",
 "belegstatus": "belegt",
 "website_belege": 2,
 "stimmung": [
  "präzise",
  "luxuriös"
 ],
 "stimmung_roh": [
  "luxuriös",
  "technisch",
  "kühl",
  "hochwertig"
 ],
 "technik": [
  "three",
  "r3f",
  "webgl-shader"
 ],
 "technik_gruppen": [
  "webgl"
 ],
 "leistungskosten": "hoch",
 "steckbrief": {
  "beschreibung": "Ein 3D-Objekt aus physikalischem Glas (Logo, Kristall, Eisblock, Linse) liegt vor Inhalt und bricht ihn. In three.js reicht MeshPhysicalMaterial mit transmission 1, ior 1.3 bis 1.6, thickness und niedriger roughness; dispersion ergibt Farbsäume. Drei (React Three Fiber) bietet MeshTransmissionMaterial mit chromaticAberration, anisotropicBlur und distortion. Hinter dem Objekt muss etwas liegen: Text, Bilder oder Farbflächen. Eine Environment-Map liefert die Reflexe. Optional kommen Kaustiken dazu, als vorgebackene Textur oder Echtzeit-Pass. Das Objekt folgt Cursor oder Scroll mit Trägheit und dreht sich langsam.",
  "warum_es_wirkt": "Glas zeigt Rendering-Können auf den ersten Blick. Die Typografie dahinter wird verzerrt, vergrößert und farbig gesäumt, das wirkt wertvoll und präzise. Eis und Kristall stehen als Material für Klarheit und Wert.",
  "wann_einsetzen": "Hero eines Studios, Fintech und Krypto, Parfum und Schmuck, Logo-Reveal, Manufakturen mit Glas oder Optik.",
  "wann_nicht": "Wenn hinter dem Glas nichts liegt, das es brechen kann. Auf schwachen Geräten ohne Ersatzbild. Als reines Deko-Objekt ohne Bezug zur Marke.",
  "varianten": [
   "Glaslogo oder Glasobjekt über großer Typo",
   "Prozedurale Eisblöcke mit Frost (Igloo Inc.)",
   "Diamant- und Schmuck-Konfigurator mit hohem ior",
   "Glas mit Kaustiken und Sound (Codrops: Volatile Nexus)",
   "Glaslinse, die dem Cursor folgt und vergrößert"
  ],
  "umsetzung": "Transmission rendert die undurchsichtigen Objekte der Szene ein zweites Mal in ein Render-Target. Das kostet. HTML hinter dem Canvas bricht das Glas nicht: Text und Bilder müssen als Textur in der Szene liegen. Bewährt: HTML legt das Layout fest, die Texte bleiben im DOM (transparent, lesbar, markierbar), und ein 2D-Canvas malt sie an derselben Stelle auf eine Rückwand-Plane. Bei einem einzelnen Objekt reicht MeshPhysicalMaterial. Den Transmission-Puffer verkleinern (three: renderer.transmissionResolutionScale, Drei: resolution und samples), backside nur wenn nötig. Ersatz ohne WebGL: vorgerendertes Video mit Alpha, Standbild oder CSS-Glas mit backdrop-filter.",
  "mobil": "Transmission-Puffer halbe Auflösung, pixelRatio höchstens 1,5. Hover durch Tippen und Ziehen ersetzen. Auf schwachen Geräten Standbild oder Video.",
  "reduzierte_bewegung": "Keine Eigenrotation, kein Cursor-Folgen. Das Objekt steht still, Wechsel ohne Animation. Nur bei Änderungen rendern.",
  "barrierefreiheit": "Canvas mit aria-hidden. Text hinter dem Glas bleibt echtes HTML im DOM, auch wenn WebGL ihn nachmalt. Bedienelemente bleiben HTML-Buttons mit aria-pressed."
 },
 "messwerte": {
  "easing": "Lerp 0.05–0.1 für Cursor-Folgen",
  "dauer_ms": "",
  "stagger_ms": "",
  "distanz": "",
  "sonstiges": "Produktion: Igloo transmission 1, thickness 2, chromaticAberration 0.1, ior 1.18, Frost-Farbe #83a1c5; Trionn transmission 0.35, ior 2.4, roughness 0.08. Typisch: ior 1.3–1.6, roughness 0–0.1.",
  "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": "Live geprüft 31.10.2026 (HTML/Bundle per curl abgerufen): App3D-Chunk: eigenes Transmission-Shadermaterial mit uTransmission 1, uThickness 2, uChromaticAberration 0.1, uColorFrost #83a1c5 und Maus-Frost-Textur (tMouseFrost); MeshPhysicalMaterial ior 1.18; Bloom levels 6 / threshold .2 / intensity 1 / radius .85.",
   "art": "website",
   "browser_gemessen": true
  },
  {
   "seite": "Codrops – Volatile Nexus",
   "url": "https://tympanus.net/codrops/2026/08/31/volatile-nexus-tinkering-with-glass-caustics-cubes-and-sound-in-three-js/",
   "auszeichnung": "",
   "beobachtung": "Laut Feed-Beschreibung interaktiver Playground mit Glasmaterialien, Licht-Kaustiken, Würfeln und Audio (Artikel selbst nicht abrufbar).",
   "art": "artikel"
  },
  {
   "seite": "WebGi Jewelry (Three.js-Showcase)",
   "url": "https://webgi-jewelry.vercel.app/",
   "auszeichnung": "",
   "beobachtung": "Im Three.js-Showcase gelistet; Schmuck-Rendering mit Edelsteinbrechung (aus Vorwissen, nicht live geprüft).",
   "art": "demo"
  },
  {
   "seite": "Trionn",
   "url": "https://trionn.com/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft 31.10.2026 (HTML/Bundle per curl abgerufen): Three.js-Material transmission .35, ior 2.4, metalness 1, roughness .08, clearcoat 1, opacity .88.",
   "art": "website",
   "browser_gemessen": true
  }
 ],
 "tutorials": [
  {
   "titel": "Volatile Nexus: Tinkering with Glass, Caustics, Cubes and Sound in Three.js",
   "url": "https://tympanus.net/codrops/2026/08/31/volatile-nexus-tinkering-with-glass-caustics-cubes-and-sound-in-three-js/"
  },
  {
   "titel": "Igloo Inc: Case Study",
   "url": "https://www.awwwards.com/igloo-inc-case-study.html"
  }
 ],
 "kombinierbar_mit": [
  "seitenwechsel-kamerafahrt",
  "webgl-text-sdf",
  "nachbearbeitung-filmlook"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/3d-webgl/glas-transmission-3d/",
  "meta": "https://cecodesign.de/lab/fundus/3d-webgl/glas-transmission-3d/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/3d-webgl/glas-transmission-3d/demo"
 },
 "herkunft": {
  "quelldateien": [
   "material3d.json",
   "patch-belege-2.json"
  ],
  "pruefnotizen": [
   "patch-belege-2.json: Igloo-Eintrag (bisher website-ungeprueft, gleiche URL) jetzt verifiziert – beim Merge zusammenführen."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Ein Brillant, ein Eisblock und eine Linse aus echtem Transmissionsglas brechen die große Serif-Typo und die Glutsonne dahinter.",
  "demo": true,
  "abhaengigkeiten": [
   "three@0.186.0"
  ],
  "werte": {
   "material": "MeshPhysicalMaterial, transmission 1, metalness 0, color #ffffff",
   "kristall": "ior 2.4, roughness 0.08, thickness 0.9, dispersion 3, clearcoat 1, flatShading, envMapIntensity 1.8, Eigenrotation 0.25 rad/s (Werte nach Trionn: ior 2.4, roughness .08); Brillant als LatheGeometry mit 7 Profilpunkten und 16 Segmenten",
   "eisblock": "ior 1.18, roughness 0.14, thickness 2, dispersion 1, attenuationColor #83a1c5, attenuationDistance 2.4, emissive #83a1c5 × 0.12 als Frost-Schimmer, envMapIntensity 1.8, Eigenrotation 0.16 rad/s (Werte nach Igloo Inc.: ior 1.18, thickness 2, Frost #83a1c5)",
   "linse": "ior 1.5, roughness 0, thickness 1.1, dispersion 3, Kugel skaliert 1 × 1 × 0.36, folgt dem Zeiger",
   "cursor_folgen": "Lerp 0.08 pro Bild bei 60 fps, bildratenunabhängig: k = 1 − (1 − 0.08)^(dt·60)",
   "kippen": "Rotation x ± 0.45 rad, y ± 0.6 rad zum Zeiger; Versatz x ± 0.18, y ± 0.12 Welteinheiten",
   "wechsel": "neues Objekt 1200 ms expo.out (1 − 2^(−10t)), 150 ms versetzt, kommt mit −1.6 rad Drehung; altes Objekt 600 ms expo.out",
   "groesse": "Objektdurchmesser ≈ 0.38–0.52 × min(Breite, Höhe) der Bühne",
   "renderer": "ACESFilmic, exposure 1.05, pixelRatio max 2 (Touch 1.5), transmissionResolutionScale 1 (Touch 0.5)",
   "umgebung": "zwei eigene Szenen per PMREMGenerator.fromScene, kein HDR-Download: Studio (4 Softboxen, sigma 0.02) für Eis und Linse; Schliff-Umgebung für den Kristall (Verlaufskugel #5a5f6b → #14151a, 2 × 12 Lichtstreifen in Weiß, Kühlblau, Glut und Rose, Decken- und Bodenlicht, sigma 0.01)",
   "kamera": "Perspektive fov 30, z 10; Objekt z 1.4, Rückwand z 0",
   "vorfuehrung": "gedachter Zeiger x 0.56 ± 0.3 · sin(0.9 t), y 0.48 ± 0.2 · sin(1.4 t + 0.6); Objektwechsel alle 4200 ms",
   "schrift": "Instrument Serif Italic 17.5vw (max 300 px) und Roman 11.2vw, line-height 0.86, letter-spacing −0.035em; Labels Geist Mono 11 px 0.14em",
   "feuer": "Shader-Zusatz (onBeforeCompile) nur am Kristall: Strahl an der Facette brechen, an der gegenüberliegenden Pavillonfacette spiegeln (Normale je Facette um ±0.45 gestreut), wieder austreten lassen und die Schliff-Umgebung abtasten; je Farbkanal ior × (1 ± 0.035); Beitrag 1.3 × (1 − Fresnel), Fresnel nach Schlick mit f0 = ((ior − 1)/(ior + 1))²"
  },
  "ausloeser": "hover",
  "touch": "Kein Hover: Tippen oder Ziehen auf der Bühne setzt den Zeiger, das Objekt kippt dorthin, die Linse wandert unter den Finger. Transmission-Puffer halbe Auflösung, pixelRatio max 1.5.",
  "reduziert": "Keine Eigenrotation, kein Kippen, kein Folgen; Objekt steht still in Ruheneigung, Wechsel sofort ohne Animation. Gerendert wird nur bei Änderungen. Vorführung zeigt die drei Objekte still im 4,2-s-Takt.",
  "korrekturen": {
   "beschreibung": "Ein 3D-Objekt aus physikalischem Glas (Logo, Kristall, Eisblock, Linse) liegt vor Inhalt und bricht ihn. In three.js reicht MeshPhysicalMaterial mit transmission 1, ior 1.3 bis 1.6, thickness und niedriger roughness; dispersion ergibt Farbsäume. Drei (React Three Fiber) bietet MeshTransmissionMaterial mit chromaticAberration, anisotropicBlur und distortion. Hinter dem Objekt muss etwas liegen: Text, Bilder oder Farbflächen. Eine Environment-Map liefert die Reflexe. Optional kommen Kaustiken dazu, als vorgebackene Textur oder Echtzeit-Pass. Das Objekt folgt Cursor oder Scroll mit Trägheit und dreht sich langsam.",
   "warum_es_wirkt": "Glas zeigt Rendering-Können auf den ersten Blick. Die Typografie dahinter wird verzerrt, vergrößert und farbig gesäumt, das wirkt wertvoll und präzise. Eis und Kristall stehen als Material für Klarheit und Wert.",
   "wann_einsetzen": "Hero eines Studios, Fintech und Krypto, Parfum und Schmuck, Logo-Reveal, Manufakturen mit Glas oder Optik.",
   "wann_nicht": "Wenn hinter dem Glas nichts liegt, das es brechen kann. Auf schwachen Geräten ohne Ersatzbild. Als reines Deko-Objekt ohne Bezug zur Marke.",
   "varianten": [
    "Glaslogo oder Glasobjekt über großer Typo",
    "Prozedurale Eisblöcke mit Frost (Igloo Inc.)",
    "Diamant- und Schmuck-Konfigurator mit hohem ior",
    "Glas mit Kaustiken und Sound (Codrops: Volatile Nexus)",
    "Glaslinse, die dem Cursor folgt und vergrößert"
   ],
   "umsetzung": "Transmission rendert die undurchsichtigen Objekte der Szene ein zweites Mal in ein Render-Target. Das kostet. HTML hinter dem Canvas bricht das Glas nicht: Text und Bilder müssen als Textur in der Szene liegen. Bewährt: HTML legt das Layout fest, die Texte bleiben im DOM (transparent, lesbar, markierbar), und ein 2D-Canvas malt sie an derselben Stelle auf eine Rückwand-Plane. Bei einem einzelnen Objekt reicht MeshPhysicalMaterial. Den Transmission-Puffer verkleinern (three: renderer.transmissionResolutionScale, Drei: resolution und samples), backside nur wenn nötig. Ersatz ohne WebGL: vorgerendertes Video mit Alpha, Standbild oder CSS-Glas mit backdrop-filter.",
   "mobil": "Transmission-Puffer halbe Auflösung, pixelRatio höchstens 1,5. Hover durch Tippen und Ziehen ersetzen. Auf schwachen Geräten Standbild oder Video.",
   "reduzierte_bewegung": "Keine Eigenrotation, kein Cursor-Folgen. Das Objekt steht still, Wechsel ohne Animation. Nur bei Änderungen rendern.",
   "barrierefreiheit": "Canvas mit aria-hidden. Text hinter dem Glas bleibt echtes HTML im DOM, auch wenn WebGL ihn nachmalt. Bedienelemente bleiben HTML-Buttons mit aria-pressed."
  },
  "geprueft": "01.11.2026",
  "notiz": "Glashütte Nordlicht (erfunden, Lauscha): Brillant, Eisblock und Linse als echtes Transmissionsglas vor Serif-Typo und Glutsonne. Das HTML legt das Layout fest, ein 2D-Canvas malt Wörter und Sonne pixelgenau auf die Rückwand, die Texte bleiben transparent im DOM. Umgebung als eigene Studioszene per PMREM, angedeutete Kaustik als additiver Lichtfleck. Materialwerte nach Igloo Inc. (Eis) und Trionn (Kristall). Ohne WebGL: CSS-Glas mit backdrop-filter. Rendern pausiert außerhalb des Viewports. 01.11.2026: Im Modus Kristall blieben Facetten schwarz, weil Single-Pass-Transmission nur die dunkle Rückwand sieht und innere Totalreflexion fehlt. Behoben mit eigener Schliff-Umgebung (PMREM aus Lichtstreifen-Kranz) und einem Shader-Zusatz, der die innere Reflexion je Facette mit Dispersion aus dieser Umgebung holt. Dabei korrigiert: clearcoat und flatShading standen versehentlich im Kommentar. Zugang 02.11.2026: Knopf „Anhalten/Abspielen“ (button, aria-pressed, aria-label „Bewegung anhalten“) neben den Glasobjekten; pause() hält jetzt auch die Bildschleife an (angehalten), weiter() stößt sie wieder an; Klick auf ein Objekt spielt wieder ab; in der Vorschau ausgeblendet (WCAG 2.2.2: Kristall dreht sich ohne Zutun). Kontrastmodus: nachgemalter HTML-Text in CanvasText statt transparent, Knöpfe mit Rahmen ButtonText."
 }
}