{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "webgpu-tsl-compute",
 "name": "WebGPU mit Three.js-TSL",
 "name_en": "WebGPU renderer / Three.js Shading Language (TSL), compute",
 "kurz": "Reinraum-Simulation eines Dresdner SaaS-Tools: Compute-Partikel umströmen Anlagen und eine Person; ohne WebGPU läuft dieselbe Physik sichtbar markiert im WebGL2-Rückfall.",
 "kategorie": "3D & WebGL",
 "kategorie_slug": "3d-webgl",
 "kategorie_nr": 11,
 "bau_chat": "C5",
 "prioritaet": "C",
 "trendstatus": "aufsteigend",
 "belegstatus": "belegt",
 "website_belege": 2,
 "stimmung": [
  "präzise"
 ],
 "stimmung_roh": [
  "technisch"
 ],
 "technik": [
  "webgpu",
  "tsl",
  "three"
 ],
 "technik_gruppen": [
  "webgl"
 ],
 "leistungskosten": "mittel",
 "steckbrief": {
  "beschreibung": "Three.js bringt mit three/webgpu einen WebGPURenderer, der ohne WebGPU automatisch auf WebGL2 zurückfällt. Shader schreibt man in TSL, einem Node-Graph in JavaScript, der zu WGSL oder GLSL kompiliert. Compute-Shader rechnen Partikel, Simulationen und Instanz-Animationen auf der GPU und schreiben in Storage-Buffer statt in Ping-Pong-Texturen. Typische Einsätze 2026: Partikelspuren, zerfallende 3D-Buchstaben, Relighting von Bildern über Tiefenkarten, musikreaktive Flüssigkeiten und scroll-gesteuerte Szenen.",
  "warum_es_wirkt": "Millionen Partikel oder echte Simulationen laufen mit stabiler Bildrate. Mit WebGL war das nicht wirtschaftlich. Ein Codepfad bedient beide Backends.",
  "wann_einsetzen": "Neue 3D-Projekte mit Simulations- oder Partikelanteil.",
  "wann_nicht": "Wenn eine einfache GLSL-Shaderfläche reicht. Wenn das Projekt an Bibliotheken hängt, die nur mit WebGL laufen, etwa manche Postprocessing-Pakete.",
  "varianten": [
   "WebGPURenderer mit automatischem WebGL2-Rückfall",
   "Postprocessing in TSL",
   "Compute-Partikel in Storage-Buffern",
   "Bild-Relighting mit Tiefenkarten"
  ],
  "umsetzung": "import * as THREE from 'three/webgpu', danach await renderer.init(). navigator.gpu zeigt, ob WebGPU da ist; sonst rendert der Renderer mit WebGL2 (shader.se erzwingt das per forceWebGL, dazu dpr [1, 1.5] und antialias aus). Compute vor dem Rendern mit renderer.compute() ausführen. Shader beim Start vorwärmen, sonst ruckelt das erste Bild. Nicht alle Addons und Postprocessing-Effekte sind TSL-kompatibel. Die Demo nutzt einen rohen WGSL-Compute-Shader und als Rückfall three r186 mit GLSL-Ping-Pong, weil im Fundus nur der WebGL-Build von three liegt. Die Physik ist in beiden Pfaden dieselbe; die TSL-Fassung des Kernels steht im Inspektor.",
  "mobil": "WebGPU läuft in Chrome für Android, auf iOS hängt es von der Version ab. Den Rückfall deshalb immer testen und auf Telefonen weniger Partikel rechnen.",
  "reduzierte_bewegung": "Keine laufende Simulation. Die Strömung einmal einschwingen lassen und als Standbild zeigen.",
  "barrierefreiheit": "Die Zeichenfläche braucht eine Textbeschreibung (role img mit aria-label). Aktiver Renderer und Messwerte stehen zusätzlich als Text daneben. Bedienung über echte Buttons und Tabs, nicht nur über Zeigerbewegung."
 },
 "messwerte": {
  "easing": "",
  "dauer_ms": "",
  "stagger_ms": "",
  "distanz": "",
  "sonstiges": "shader.se: dpr [1, 1.5], antialias aus, WebGL-Fallback per forceWebGL; Bruno Simon: powerPreference high-performance",
  "herkunft": "beobachtet",
  "quelle": "https://www.shader.se/_next/static/chunks/09wbu.f7xwi43.js"
 },
 "kurve": null,
 "gesehen_bei": [
  {
   "seite": "Shader Development Studio",
   "url": "https://www.shader.se/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft 31.10.2026 (HTML/Bundle per curl abgerufen): React-Three-Fiber mit renderer: new WebGPURenderer({ forceWebGL: !WebGPU-Support, antialias: false, depth: false }), dpr [1, 1.5], Three.js r186.",
   "art": "website"
  },
  {
   "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: TSL + WebGPU für dynamisches Licht und Eigenschatten auf flachen Bildern.",
   "art": "artikel"
  },
  {
   "seite": "Chrome – What's New in WebGPU (Chrome 155–156)",
   "url": "https://developer.chrome.com/blog/new-in-webgpu-155-156?hl=en",
   "auszeichnung": "",
   "beobachtung": "Laufende Erweiterungen (srgb-linear/display-p3-linear Canvas, unaligned compressed textures, shader-f16 auf Linux), Bindless experimentell.",
   "art": "artikel"
  },
  {
   "seite": "Bruno Simon – Portfolio",
   "url": "https://bruno-simon.com",
   "auszeichnung": "",
   "beobachtung": "Live geprüft 31.10.2026 (HTML/Bundle per curl abgerufen): setRenderer(): new WebGPURenderer({ canvas, powerPreference: 'high-performance' }), Three.js r183, umfangreiche TSL-Node-Nutzung inkl. Compute-Nodes.",
   "art": "website"
  }
 ],
 "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": [
  "partikel-punktwolke",
  "webgl-fluid-cursor",
  "tiefenkarten-relighting"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/3d-webgl/webgpu-tsl-compute/",
  "meta": "https://cecodesign.de/lab/fundus/3d-webgl/webgpu-tsl-compute/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/3d-webgl/webgpu-tsl-compute/demo"
 },
 "herkunft": {
  "quelldateien": [
   "material3d.json",
   "patch-belege-2.json"
  ],
  "pruefnotizen": [
   "patch-belege-2.json: shader.se bisher website-ungeprueft – jetzt verifiziert."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Reinraum-Simulation eines Dresdner SaaS-Tools: Compute-Partikel umströmen Anlagen und eine Person; ohne WebGPU läuft dieselbe Physik sichtbar markiert im WebGL2-Rückfall.",
  "demo": true,
  "abhaengigkeiten": [
   "three@0.186.0"
  ],
  "werte": {
   "backend": "WebGPU zuerst (navigator.gpu.requestAdapter({ powerPreference: 'high-performance' })), sonst WebGL2 mit three r186 (dynamisch per Import-Map geladen)",
   "partikel_webgpu": "262.144 (Desktop), 65.536 (Touch oder ≤ 860 px)",
   "partikel_webgl": "65.536 = 256² (Desktop), 25.600 = 160² (Touch oder ≤ 860 px)",
   "compute": "WGSL @workgroup_size(64), ein Storage-Buffer vec4f je Teilchen (Ort xy, Tempo zw), dispatchWorkgroups(ceil(n / 64)) vor jedem Render-Pass",
   "rueckfall_rechnen": "GLSL-Fragment-Ping-Pong in zwei Float-Rendertargets (HalfFloat ohne EXT_color_buffer_float), NearestFilter",
   "dpr": "[1, 1.5]",
   "antialias": false,
   "zuluft": "0,45 m/s = 0,1286 Raumhöhen je s (Raum 3,5 m, Breite 9 m)",
   "annaeherung": "Tempo folgt dem Feld mit 1 − e^(−7·dt)",
   "wirbel": "Curl-Noise, Frequenz 5 × Aspekt, Stärke 0,05 × Zuluft; an der Person Frequenz 13, Stärke 0,12 × Zuluft × (0,35 + 9 × |v Person|)",
   "dt_max_s": 0.0333,
   "vorwaermen": "150 Schritte à 1/20 s = 7,5 s Simulationszeit vor dem ersten Bild",
   "person_lerp": "0,1 je Bild (auf 60 fps normiert)",
   "darstellung": "additiv (one, one); Partikel Alpha 0,3, Tempo 0,42, Stromlinien 0,16 bei Länge v × 0,22 s; Helligkeit je Teilchen × 0,45–1,55",
   "tempo_skala": "gestaut #333d52 (s < 0,4) → frei #9ea8b8 (s 0,95) → Markenblau #5aa9ff bei seitlicher Ablenkung |vx|/|v| 0,15–0,6 oder s > 1,03–1,15",
   "ui_easing": "cubic-bezier(0.25, 0.46, 0.45, 0.94)",
   "ui_dauer_ms": 160,
   "reiter_indikator_ms": 180,
   "vorfuehrung": "Darstellung wechselt alle 4200 ms (Partikel → Tempo → Stromlinien), Person pendelt 0,48 ± 0,1 Raumbreite mit sin(t × 0,45)"
  },
  "ausloeser": "dauer",
  "touch": "Antippen oder Ziehen in der Ansicht setzt die Person (touch-action pan-y, Seite bleibt scrollbar). Weniger Partikel, Ebenen und Inspektor ausgeblendet, Messwerte nur in der Statuszeile, Pfad in der Leiste unter 480 px weg.",
  "reduziert": "Keine Bildschleife. Die Strömung schwingt beim Start 150 Schritte ein und steht als Stromlinien-Standbild; die Reiter wechseln das Standbild, die Person bewegt sich nicht.",
  "korrekturen": {
   "beschreibung": "Three.js bringt mit three/webgpu einen WebGPURenderer, der ohne WebGPU automatisch auf WebGL2 zurückfällt. Shader schreibt man in TSL, einem Node-Graph in JavaScript, der zu WGSL oder GLSL kompiliert. Compute-Shader rechnen Partikel, Simulationen und Instanz-Animationen auf der GPU und schreiben in Storage-Buffer statt in Ping-Pong-Texturen. Typische Einsätze 2026: Partikelspuren, zerfallende 3D-Buchstaben, Relighting von Bildern über Tiefenkarten, musikreaktive Flüssigkeiten und scroll-gesteuerte Szenen.",
   "warum_es_wirkt": "Millionen Partikel oder echte Simulationen laufen mit stabiler Bildrate. Mit WebGL war das nicht wirtschaftlich. Ein Codepfad bedient beide Backends.",
   "wann_einsetzen": "Neue 3D-Projekte mit Simulations- oder Partikelanteil.",
   "wann_nicht": "Wenn eine einfache GLSL-Shaderfläche reicht. Wenn das Projekt an Bibliotheken hängt, die nur mit WebGL laufen, etwa manche Postprocessing-Pakete.",
   "varianten": [
    "WebGPURenderer mit automatischem WebGL2-Rückfall",
    "Postprocessing in TSL",
    "Compute-Partikel in Storage-Buffern",
    "Bild-Relighting mit Tiefenkarten"
   ],
   "umsetzung": "import * as THREE from 'three/webgpu', danach await renderer.init(). navigator.gpu zeigt, ob WebGPU da ist; sonst rendert der Renderer mit WebGL2 (shader.se erzwingt das per forceWebGL, dazu dpr [1, 1.5] und antialias aus). Compute vor dem Rendern mit renderer.compute() ausführen. Shader beim Start vorwärmen, sonst ruckelt das erste Bild. Nicht alle Addons und Postprocessing-Effekte sind TSL-kompatibel. Die Demo nutzt einen rohen WGSL-Compute-Shader und als Rückfall three r186 mit GLSL-Ping-Pong, weil im Fundus nur der WebGL-Build von three liegt. Die Physik ist in beiden Pfaden dieselbe; die TSL-Fassung des Kernels steht im Inspektor.",
   "mobil": "WebGPU läuft in Chrome für Android, auf iOS hängt es von der Version ab. Den Rückfall deshalb immer testen und auf Telefonen weniger Partikel rechnen.",
   "reduzierte_bewegung": "Keine laufende Simulation. Die Strömung einmal einschwingen lassen und als Standbild zeigen.",
   "barrierefreiheit": "Die Zeichenfläche braucht eine Textbeschreibung (role img mit aria-label). Aktiver Renderer und Messwerte stehen zusätzlich als Text daneben. Bedienung über echte Buttons und Tabs, nicht nur über Zeigerbewegung."
  },
  "geprueft": "01.11.2026",
  "notiz": "Welt: Rezept saas-produkt-praezise, erfundene Dresdner Software Querstrom (Reinraumluft-Simulation für Fabs, Pharma, Labore). Geist und Geist Mono, Graustufen wie Linear, ein Markenblau, ease-out-quad 160 ms. Der Hero ist das Produkt-UI: Ebenen, Schnitt durch den Reinraum mit zwei Belichtern und einer Person, Inspektor mit Backend-Wahl und TSL-Fassung des Kernels. Pfad A ist roher WebGPU-Compute (workgroup 64, Storage-Buffer), Pfad B three r186 mit Fragment-Ping-Pong und identischer Feldfunktion. Headless-Chromium hat keinen WebGPU-Adapter; dort läuft der Rückfall mit gelbem Hinweis in Leiste, Ansicht und Statuszeile. three/webgpu liegt nicht im Vendor-Ordner, deshalb kein TSL-Laufzeitcode. Referenzen: shader.se, bruno-simon.com, linear.app. AD-Review 01.11.2026: Note 5 (WebGPU-Pfad mit SwiftShader-Adapter offscreen zurückgelesen: Compute, Partikel, Tempo und Stromlinien rendern korrekt; das weiße Bild in Headless ist ein Präsentationsfehler der Testumgebung. Gelber Rückfall-Hinweis in der Vorschau ausgeblendet, er steht dort schon oben rechts und in der Statuszeile). Zugang 02.11.2026: Pause-Knopf „Anhalten“ in der Fensterleiste (button, aria-pressed, aria-label „Bewegung anhalten“; hält Simulation und Vorführung an, eigener Zustand neben FUNDUS_DEMO.pause; in Vorschau und bei reduzierter Bewegung ausgeblendet; unter 480 px nur Symbol), Code-Kommentar #5D636B auf #777C83 (4,7:1), Rückfall-Hinweis und Statuszeile brechen unter 560 px um, Knopfrahmen im Kontrastmodus."
 }
}