{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "audio-reaktiv-3d",
 "name": "Audioreaktive 3D-Szenen",
 "name_en": "Audio-reactive WebGL",
 "kurz": "Eine Telefon-KI als Orb: Web Audio zerlegt die Stimme in Bass, Mitten und Höhen, und die Kugel verformt sich Silbe für Silbe.",
 "kategorie": "3D & WebGL",
 "kategorie_slug": "3d-webgl",
 "kategorie_nr": 11,
 "bau_chat": "C5",
 "prioritaet": "B",
 "trendstatus": "aufsteigend",
 "belegstatus": "belegt",
 "website_belege": 3,
 "stimmung": [
  "filmisch",
  "laut"
 ],
 "stimmung_roh": [
  "immersiv",
  "emotional",
  "laut"
 ],
 "technik": [
  "web-audio",
  "three",
  "webgl-shader",
  "webgpu"
 ],
 "technik_gruppen": [
  "js",
  "webgl"
 ],
 "leistungskosten": "mittel",
 "steckbrief": {
  "beschreibung": "Eine 3D-Szene reagiert auf Ton. Ein AnalyserNode der Web Audio API liefert pro Frame das Frequenzspektrum (getByteFrequencyData). Daraus entstehen wenige Bänder, meist Bass, Mitten und Höhen, plus ein Gesamtpegel. Die Werte werden geglättet und als Uniforms an die Shader gegeben. Dort steuern sie Verformung der Geometrie, Partikelgröße und -tempo, Leuchtstärke oder Farbe. Ton startet erst nach einer Nutzergeste.",
  "warum_es_wirkt": "Bild und Ton bewegen sich im selben Takt. Das wirkt lebendig und zieht in die Szene. Bei Sprach-KI zeigt der Orb sichtbar, wer gerade spricht und dass das System zuhört.",
  "wann_einsetzen": "Musiker, Labels, Festivals und Events, Studios mit Sounddesign, Kunstprojekte. Sprach- und Telefon-KI, bei denen der Orb Teil der Oberfläche ist.",
  "wann_nicht": "Als Kernerlebnis auf Seiten, die meist stumm genutzt werden (Büro, unterwegs am Telefon). Als reine Deko hinter Lesetext. Auf Business-Seiten ohne Bezug zu Ton.",
  "varianten": [
   "3D-Orb: verformte Kugel, Bass verformt grob, Höhen fein",
   "Partikel synchron zum Ton (Igloo Inc)",
   "Musikreaktiv: Kick pumpt die Skala, Hi-Hats bringen Detail",
   "Musikreaktives Goo mit WebGPU (Codrops, Run Rob Run)",
   "Glas und Kaustiken mit Ton"
  ],
  "umsetzung": "AudioContext erst nach Klick erzeugen bzw. resume(). Quelle → AnalyserNode → Ausgang, Lautstärke hinter dem Analyser regeln. fftSize 512 bis 2048, smoothingTimeConstant 0,7 bis 0,85. Bänder als Mittel über Bin-Bereiche bilden und je Signal auf 0 bis 1 normieren. Im JS zusätzlich dämpfen, schnell steigend und langsam fallend. Werte als Uniforms an Vertex- und Fragment-Shader. Locomotive summiert alle Bins in einer fps-gedrosselten Schleife, Trionn mittelt die Bins 2 bis frequencyBinCount/2.",
  "mobil": "Ton standardmäßig aus. Die Szene muss auch stumm sinnvoll sein, etwa mit einem berechneten Signal. Geometrie und Partikelzahl senken.",
  "reduzierte_bewegung": "Verformung, Drehung und Pulsieren aus. Höchstens Licht oder Farbe folgen dem Pegel, stark gedämpft.",
  "barrierefreiheit": "Ton-Schalter sichtbar und per Tastatur erreichbar, Zustand mit aria-pressed. Nie Autoplay mit Ton. Das Canvas ist aria-hidden; was gesprochen wird, steht als Text daneben (Transkript in einer Live-Region)."
 },
 "messwerte": {
  "easing": "",
  "dauer_ms": "",
  "stagger_ms": "",
  "distanz": "",
  "sonstiges": "fftSize 512–2048; smoothingTimeConstant 0.7–0.85",
  "herkunft": "typisch",
  "quelle": ""
 },
 "kurve": null,
 "gesehen_bei": [
  {
   "seite": "Igloo Inc",
   "url": "https://www.igloo.inc/",
   "auszeichnung": "Awwwards Site of the Year 2024",
   "beobachtung": "Musik und Soundeffekte synchron zur Partikelbewegung (Case Study).",
   "art": "website",
   "browser_gemessen": true
  },
  {
   "seite": "Codrops – Run Rob Run",
   "url": "https://tympanus.net/codrops/2026/08/20/run-rob-run-building-a-music-reactive-goo-with-three-js-and-webgpu/",
   "auszeichnung": "",
   "beobachtung": "Laut Feed: Musikanalyse treibt Geometriedeformation; scrollgetriebenes Morphing.",
   "art": "artikel"
  },
  {
   "seite": "Codrops – Sixty Frames for the Record",
   "url": "https://tympanus.net/codrops/2026/08/22/sixty-frames-for-the-record-a-three-js-game-seven-fly-throughs-and-a-wall-of-crts/",
   "auszeichnung": "",
   "beobachtung": "Laut Feed: Three.js-Lab rund um eigene Musik, Fokus auf Renderer-Performance.",
   "art": "artikel"
  },
  {
   "seite": "Locomotive",
   "url": "https://locomotive.ca/en",
   "auszeichnung": "",
   "beobachtung": "Live geprüft 31.10.2026 (HTML/Bundle per curl abgerufen): AnalyserNode.getByteFrequencyData in fps-gedrosselter Schleife (fpsInterval), Summe über alle Frequenz-Bins als Pegel.",
   "art": "website",
   "browser_gemessen": true
  },
  {
   "seite": "Trionn",
   "url": "https://trionn.com/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft 31.10.2026 (HTML/Bundle per curl abgerufen): Pegel = Mittel über Bins 2 bis frequencyBinCount/2, normiert auf 255; zusätzlich getAverageFrequency() im Three.js-Audio.",
   "art": "website",
   "browser_gemessen": true
  }
 ],
 "tutorials": [
  {
   "titel": "Run Rob Run: Building a Music-Reactive Goo with Three.js and WebGPU",
   "url": "https://tympanus.net/codrops/2026/08/20/run-rob-run-building-a-music-reactive-goo-with-three-js-and-webgpu/"
  }
 ],
 "kombinierbar_mit": [
  "partikel-punktwolke",
  "webgl-fluid-cursor",
  "spielbare-3d-welt"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/3d-webgl/audio-reaktiv-3d/",
  "meta": "https://cecodesign.de/lab/fundus/3d-webgl/audio-reaktiv-3d/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/3d-webgl/audio-reaktiv-3d/demo"
 },
 "herkunft": {
  "quelldateien": [
   "material3d.json",
   "patch-belege-2.json"
  ],
  "pruefnotizen": [
   "patch-belege-2.json: 2 Produktionsbelege (plus Igloo) → Hochstufung auf B vorgeschlagen."
  ],
  "prioritaet_hinweis": "31.10.2026: C → B laut patch-belege-2.json (2 Produktionsbelege (plus Igloo) → Hochstufung auf B vorgeschlagen.)"
 },
 "bau": {
  "status": "fertig",
  "kurz": "Eine Telefon-KI als Orb: Web Audio zerlegt die Stimme in Bass, Mitten und Höhen, und die Kugel verformt sich Silbe für Silbe.",
  "demo": true,
  "abhaengigkeiten": [
   "three@0.186.0"
  ],
  "werte": {
   "analyser": "AnalyserNode fftSize 1024 (512 Bins à 46,9 Hz bei 48 kHz), smoothingTimeConstant 0,8, minDecibels −100, maxDecibels −30, getByteFrequencyData pro Frame",
   "baender": "Bass Bins 1–5 (47–281 Hz), Mitten 6–42 (281–2 000 Hz), Höhen 43–170 (2–8 kHz); Byte-Mittel je Band",
   "normierung": "Sprache: Bass 90–200, Mitten 90–200, Höhen 60–190 (Byte-Mittel → 0…1); Musik: Bass 185–245, Mitten 60–170, Höhen 40–180",
   "pegel": "Mittel über Bins 2–255 (2 bis frequencyBinCount/2, wie Trionn) / 255 × 2,4, gekappt bei 1",
   "js_daempfung": "asymmetrisch, 1 − e^(−k·dt): Anstieg k 26 1/s (≈ 38 ms), Abfall k 5 1/s (≈ 200 ms)",
   "verformung": "Radius × (1 + v), v = 2 × (Rauschen₁ × (0,05 + Bass × 0,26) + Rauschen₂ × Mitten × 0,1 + Rauschen₃ × Höhen × 0,04); Value-Noise mit Frequenz 1,3 / 2,6 / 5,2, Drift 0,4 / 0,55 / 1,2 pro s",
   "orb": "SphereGeometry 144 × 108 Segmente (mobil 96 × 72), Normalen per Nachbarpunkten im Vertex-Shader; Fresnel-Randlicht im Markenton × (0,45 + Mitten × 1,3), erhabene Stellen glühen × (0,3 + Pegel × 0,8)",
   "partikel": "9 000 Punkte (mobil 3 200) auf Fibonacci-Kugel, 22 % in äußerer Schale r 1,34; Punktgröße × (1 + Höhen × 0,9); additiv",
   "warteschleife": "112 BPM, Kick auf jedem Schlag (120 → 45 Hz in 120 ms), Hi-Hat in Sechzehnteln (Hochpass 5 kHz), Pad-Akkorde je Takt; Kick skaliert den Orb um bis zu 12 %, Verformung durch Bass × 0,45",
   "drehung": "0,14 rad/s, Neigung 0,18 rad",
   "farbe": "Rufwerk spricht: Markenton #ff7a3d; Anrufer spricht: neutral #d1d6e0; Wechsel 1 − e^(−6·dt)",
   "anrufer_band": "Telefonband 300–3 400 Hz (Bass-Band bleibt leer), Assistent 80–7 000 Hz",
   "ui": "cubic-bezier(0.25, 0.46, 0.45, 0.94) 160 ms für Hover und Zustände; Transkriptzeile und Feld blenden mit 200 / 160 ms und 6 px ein",
   "ton": "Ton erst nach Klick (AudioContext.resume), Lautstärke 0,5 mit setTargetAtTime 50 ms; Ton aus: gleiches Spektrum aus dem Stimm- bzw. Musikmodell berechnet",
   "vorfuehrung": "Gespräch 18,2 s (Orb, ab 10,5 s Partikel), danach 8,6 s Warteschleife, Schleife",
   "reduziert": "Verformung, Drehung und Puls aus; Randlicht und Halo mit Pegel × 0,25, Bänder mit k 2 1/s"
  },
  "ausloeser": "dauer",
  "touch": "Gleiches Verhalten wie am Desktop, ohne Hover. Ton bleibt aus, bis man „Mithören“ antippt; der Orb läuft stumm mit berechnetem Spektrum. Mobil 3 200 Partikel und 96 × 72 Segmente, Seitenleiste ausgeblendet, Transkript unter dem Orb.",
  "reduziert": "Keine Verformung, keine Drehung, kein Kick-Puls. Der Orb steht als glatte Kugel; nur Randlicht und Halo folgen dem Pegel stark gedämpft (× 0,25, träge). Transkriptzeilen erscheinen ganz statt Wort für Wort.",
  "korrekturen": {
   "beschreibung": "Eine 3D-Szene reagiert auf Ton. Ein AnalyserNode der Web Audio API liefert pro Frame das Frequenzspektrum (getByteFrequencyData). Daraus entstehen wenige Bänder, meist Bass, Mitten und Höhen, plus ein Gesamtpegel. Die Werte werden geglättet und als Uniforms an die Shader gegeben. Dort steuern sie Verformung der Geometrie, Partikelgröße und -tempo, Leuchtstärke oder Farbe. Ton startet erst nach einer Nutzergeste.",
   "warum_es_wirkt": "Bild und Ton bewegen sich im selben Takt. Das wirkt lebendig und zieht in die Szene. Bei Sprach-KI zeigt der Orb sichtbar, wer gerade spricht und dass das System zuhört.",
   "wann_einsetzen": "Musiker, Labels, Festivals und Events, Studios mit Sounddesign, Kunstprojekte. Sprach- und Telefon-KI, bei denen der Orb Teil der Oberfläche ist.",
   "wann_nicht": "Als Kernerlebnis auf Seiten, die meist stumm genutzt werden (Büro, unterwegs am Telefon). Als reine Deko hinter Lesetext. Auf Business-Seiten ohne Bezug zu Ton.",
   "varianten": [
    "3D-Orb: verformte Kugel, Bass verformt grob, Höhen fein",
    "Partikel synchron zum Ton (Igloo Inc)",
    "Musikreaktiv: Kick pumpt die Skala, Hi-Hats bringen Detail",
    "Musikreaktives Goo mit WebGPU (Codrops, Run Rob Run)",
    "Glas und Kaustiken mit Ton"
   ],
   "umsetzung": "AudioContext erst nach Klick erzeugen bzw. resume(). Quelle → AnalyserNode → Ausgang, Lautstärke hinter dem Analyser regeln. fftSize 512 bis 2048, smoothingTimeConstant 0,7 bis 0,85. Bänder als Mittel über Bin-Bereiche bilden und je Signal auf 0 bis 1 normieren. Im JS zusätzlich dämpfen, schnell steigend und langsam fallend. Werte als Uniforms an Vertex- und Fragment-Shader. Locomotive summiert alle Bins in einer fps-gedrosselten Schleife, Trionn mittelt die Bins 2 bis frequencyBinCount/2.",
   "mobil": "Ton standardmäßig aus. Die Szene muss auch stumm sinnvoll sein, etwa mit einem berechneten Signal. Geometrie und Partikelzahl senken.",
   "reduzierte_bewegung": "Verformung, Drehung und Pulsieren aus. Höchstens Licht oder Farbe folgen dem Pegel, stark gedämpft.",
   "barrierefreiheit": "Ton-Schalter sichtbar und per Tastatur erreichbar, Zustand mit aria-pressed. Nie Autoplay mit Ton. Das Canvas ist aria-hidden; was gesprochen wird, steht als Text daneben (Transkript in einer Live-Region)."
  },
  "geprueft": "01.11.2026",
  "notiz": "Rezept saas-produkt-praezise, erfundene Telefon-KI „Rufwerk“ aus Bielefeld. Der Orb ist Teil des Produkt-UI (Live-Anruf beim Notdienst von Brökelmann Haustechnik), kein Deko-Hero; deshalb passt er trotz „interaktives-3d-hero“ auf der Nicht-Liste. Echte Web-Audio-Kette: Klick auf „Mithören“ startet einen Formant-Synthesizer (Sägezahn durch drei Bandpässe, Rauschen für Zischlaute) bzw. eine Haltemusik, ein AnalyserNode liefert die Bytes. Ohne Ton berechnet ein Stimmmodell das Spektrum in derselben Byte-Skala, die Bänder laufen durch dieselbe Analyse. Varianten Orb / Partikel / Warteschleife, Werte unter dem Fenster. Ohne WebGL2: CSS-Kugel, die mit Pegel und Bass atmet. Headless (SwiftShader) läuft mit rund 10 fps, die Uhr der Demo dann langsamer. AD-Review 01.11.2026: Note 5 Zugang 02.11.2026: --leise #5d6168 → #7a7f87 (4,7:1 auf #0f1011); Knopf „Anhalten“ (aria-pressed, Pause-/Play-Symbol) in der App-Leiste neben „Mithören“, ruft pause()/weiter() wie FUNDUS_DEMO, in der Vorschau ausgeblendet; „Gespräch übernehmen“ (aria-disabled) mit cursor: default; Leiste bricht unter 380 px um; Kontrastmodus-Rahmen für Knöpfe."
 }
}