{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "partikel-punktwolke",
 "name": "Morphende Partikel und Punktwolken",
 "name_en": "GPGPU particles / morphing point clouds",
 "kurz": "32 768 Punkte fließen per GPU-Federsimulation von Form zu Form, sobald man einen Link berührt.",
 "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",
  "filmisch",
  "warm"
 ],
 "stimmung_roh": [
  "magisch",
  "technisch",
  "organisch",
  "immersiv"
 ],
 "technik": [
  "three",
  "webgl-shader",
  "webgpu",
  "tsl",
  "gpgpu"
 ],
 "technik_gruppen": [
  "webgl"
 ],
 "leistungskosten": "hoch",
 "steckbrief": {
  "beschreibung": "Zehntausende bis Millionen Punkte bilden eine Form, zerfließen und setzen sich zu einer neuen zusammen. Jeder Punkt hängt an einer Feder zu seinem Platz in der Zielform. Ein Curl-Noise-Feld lässt die Punkte strömen, der Zeiger stößt sie weg. Die Rechnung läuft auf der GPU: Positionen und Geschwindigkeiten liegen in Float-Texturen und werden jedes Bild neu berechnet. Zielformen werden vorab gesampelt: aus Mesh-Oberflächen, aus Text oder aus Volumendaten.",
  "warum_es_wirkt": "Die Bewegung wirkt organisch und lebendig. Formen entstehen und zerfallen vor den Augen. Das passt als Bild für Daten, Wandel und Klang. Weil jeder Punkt etwas anders federt, kommt die Form gestaffelt an und nie mechanisch.",
  "wann_einsetzen": "Hero-Momente, Navigation mit wenigen Zielen, Logo-Reveal, Themen wie KI, Daten, Akustik oder Musik.",
  "wann_nicht": "Als Dauerhintergrund hinter Lesetext. Auf schwachen Geräten ohne Partikelreduktion. Wenn die Seite schnell eine Information liefern muss.",
  "varianten": [
   "Link-Ziele: jeder Navigationspunkt hat eine eigene Form (Igloo Inc)",
   "Schriftzug: Punkte schreiben Wörter, gesampelt aus Text-Pixeln",
   "Spuren: Bild verblasst nur langsam, Punkte ziehen Lichtspuren",
   "Chladni: Punkte sammeln sich auf den Knotenlinien einer schwingenden Platte (Resonanzmuster als Zielform)",
   "Bild zerstäuben: Ein Foto zerfällt in Partikel und setzt sich wieder zusammen",
   "Mesh löst sich in Partikel auf (Dissolve)",
   "Punktwolke aus Fotogrammetrie oder 3D-Scan"
  ],
  "umsetzung": "WebGL: zwei Float-Rendertargets je Größe (Position, Geschwindigkeit) im Ping-Pong, ein Shader-Durchgang pro Größe und Bild (wie GPUComputationRenderer). Zielformen als DataTexture, je Partikel ein Texel. Darstellung mit THREE.Points, der Vertex-Shader liest die Position aus der Textur. Additives Blending, Tiefe aus. WebGPU: TSL compute() mit Storage-Buffern, damit sind deutlich mehr Partikel möglich. Partikelzahl an das Gerät koppeln. Ersatz ohne Float-Rendertargets: Canvas2D mit wenigen hundert bis tausend Punkten.",
  "mobil": "Partikelzahl stark senken (etwa 4 096 statt 32 768), Punkte größer zeichnen. Hover-Ziele durch Tippen ersetzen.",
  "reduzierte_bewegung": "Simulation aus. Punkte stehen in der Zielform, der Formwechsel ist eine kurze Überblendung.",
  "barrierefreiheit": "Links, die die Partikel steuern, bleiben echte Links mit Ziel. Fokus löst denselben Formwechsel aus wie Hover. Das Canvas ist aria-hidden; eine Live-Region sagt an, was die Wolke zeigt."
 },
 "messwerte": {
  "easing": "Feder-/Dämpfungssimulation",
  "dauer_ms": "Morph 1200–2500",
  "stagger_ms": "",
  "distanz": "",
  "sonstiges": "Produktion: Igloo GPU-Partikel per FBO-Simulation (floatRenderTarget), Instanzklasse mit count 1200; Lab: holtsetio Flow 32 768 Standard / 4 096 mobil. Typisch Desktop 50k–1M.",
  "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": "Links-Bereich mit interaktiver Partikelsimulation, die je nach gewähltem Link wirbelt und neue Formen bildet; eigener Exporter wandelt VDB-Volumen in komprimiertes Browserformat; Farbe ändert sich mit Geschwindigkeit, Glühen beim Morphen, Ton synchron (Case Study).",
   "art": "website",
   "browser_gemessen": true
  },
  {
   "seite": "holtsetio Lab – Flow",
   "url": "https://holtsetio.com/lab/flow/",
   "auszeichnung": "",
   "beobachtung": "Im Three.js-Showcase gelistet; Partikel-/Simulations-Experiment (vermutlich WebGPU, aus Vorwissen, nicht live geprüft).",
   "art": "website-ungeprueft"
  },
  {
   "seite": "Unseen Studio",
   "url": "https://www.unseen.co/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft 31.10.2026 (HTML/Bundle per curl abgerufen): theme.js: buildParticles() erzeugt ein Partikelsystem mit eigenem Shader (u_particleTex, u_lightPos 0.79/0.24/0.63), daneben buildFluidSim() und buildWater().",
   "art": "website",
   "browser_gemessen": true
  }
 ],
 "tutorials": [
  {
   "titel": "Igloo Inc: Case Study",
   "url": "https://www.awwwards.com/igloo-inc-case-study.html"
  }
 ],
 "kombinierbar_mit": [
  "seitenwechsel-kamerafahrt",
  "webgpu-tsl-compute",
  "audio-reaktiv-3d"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/3d-webgl/partikel-punktwolke/",
  "meta": "https://cecodesign.de/lab/fundus/3d-webgl/partikel-punktwolke/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/3d-webgl/partikel-punktwolke/demo"
 },
 "herkunft": {
  "quelldateien": [
   "material3d.json",
   "patch-belege-2.json"
  ],
  "pruefnotizen": [
   "patch-belege-2.json: holtsetio-Eintrag bisher website-ungeprueft → als demo einstufen (Lab-Experiment)."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "32 768 Punkte fließen per GPU-Federsimulation von Form zu Form, sobald man einen Link berührt.",
  "demo": true,
  "abhaengigkeiten": [
   "three@0.186.0"
  ],
  "werte": {
   "simulation": "GPGPU, FBO-Ping-Pong: Geschwindigkeits- und Positionstextur (RGBA Float, sonst HalfFloat), semi-implizites Euler-Verfahren, dt höchstens 1/20 s",
   "partikel": "32 768 (Textur 256 × 128) Desktop, 4 096 (64 × 64) bei Touch oder Breite bis 760 px",
   "feder_k": "16 1/s² (ω0 = 4 rad/s), je Partikel × 0,6 bis 1,0",
   "daempfung_c": "4,4 1/s, ζ ≈ 0,55 bis 0,71",
   "morph_ms": "≈ 1 800 Einschwingen (4 / (c/2)), plus Sturmphase; Variante Spuren ≈ 3 100",
   "easing": "keine Kurve: Feder-/Dämpfungssimulation (Messwert Igloo Inc)",
   "curl": "0,35 im Ruhezustand (divergenzfreies Sinus-Potential, zwei Oktaven); Spuren 0,9",
   "sturm": "beim Formwechsel Curl × bis 3,0, Federkraft um 90 % gelockert, Dämpfung halbiert; klingt mit e^(−t/0,4 s) ab",
   "abstossung": "Radius 0,55 Welteinheiten, 9 Einheiten/s², Ein-/Ausblenden mit 1 − e^(−8·dt)",
   "darstellung": "THREE.Points, additives Blending, Tiefe aus, Punktgröße 15 px bei Abstand 1 (Höhe 900 px), mobil × 1,6",
   "farbe_nach_tempo": "#f2e6d2 → #ffb36b → #ff5a2a, smoothstep(0,25 bis 3,2 Einheiten/s); Punkt bei Tempo bis × 1,5 größer",
   "drehung": "0,12 rad/s Eigendrehung, Neigung zum Zeiger ±0,12 rad; Schriftzug pendelt ±0,22 rad",
   "spuren_nachleuchten": "Bild × 0,86 pro Frame (Farbe und Alpha), Dämpfung 2,6, Punkte × 0,75",
   "formen": "Kugel aus 28 Breitengraden (r 1,3), Welle aus 38 Linien (3,4 × 2,0, wogt mit 0,2 Amplitude), Schallplatte mit 46 Rillen (r 0,48 bis 1,5); Schriftzug aus Text-Pixeln (Instrument Serif Italic, 2,7 breit)",
   "ui_kurve": "cubic-bezier(0.16, 1, 0.3, 1) 0,8 bis 1,2 s für Link-Linie und Info; Farbe 150 ms",
   "vorfuehrung_takt_ms": 3600,
   "reduziert_blende_ms": "150 aus / 250 ein"
  },
  "ausloeser": "hover",
  "touch": "4 096 Punkte, Punkte × 1,6 größer, Wolke oben über dem Titel. Erstes Tippen auf einen Link formt die Wolke, zweites Tippen auf den aktiven Link öffnet ihn. Wischen über die Wolke stößt Punkte weg. Auf dem Telefon stehen Titel, Links und Steuerung im Fluss unter der Wolke (Wolkenmitte höchstens 200 px unter der Oberkante).",
  "reduziert": "Keine Simulation, keine Drehung, keine Abstoßung. Die Punkte stehen in der Zielform; der Formwechsel ist eine Überblendung (150 ms aus, 250 ms ein). Chladni: die Figuren stehen, Wechsel als Überblendung.",
  "korrekturen": {
   "beschreibung": "Zehntausende bis Millionen Punkte bilden eine Form, zerfließen und setzen sich zu einer neuen zusammen. Jeder Punkt hängt an einer Feder zu seinem Platz in der Zielform. Ein Curl-Noise-Feld lässt die Punkte strömen, der Zeiger stößt sie weg. Die Rechnung läuft auf der GPU: Positionen und Geschwindigkeiten liegen in Float-Texturen und werden jedes Bild neu berechnet. Zielformen werden vorab gesampelt: aus Mesh-Oberflächen, aus Text oder aus Volumendaten.",
   "warum_es_wirkt": "Die Bewegung wirkt organisch und lebendig. Formen entstehen und zerfallen vor den Augen. Das passt als Bild für Daten, Wandel und Klang. Weil jeder Punkt etwas anders federt, kommt die Form gestaffelt an und nie mechanisch.",
   "wann_einsetzen": "Hero-Momente, Navigation mit wenigen Zielen, Logo-Reveal, Themen wie KI, Daten, Akustik oder Musik.",
   "wann_nicht": "Als Dauerhintergrund hinter Lesetext. Auf schwachen Geräten ohne Partikelreduktion. Wenn die Seite schnell eine Information liefern muss.",
   "varianten": [
    "Link-Ziele: jeder Navigationspunkt hat eine eigene Form (Igloo Inc)",
    "Schriftzug: Punkte schreiben Wörter, gesampelt aus Text-Pixeln",
    "Spuren: Bild verblasst nur langsam, Punkte ziehen Lichtspuren",
    "Chladni: Punkte sammeln sich auf den Knotenlinien einer schwingenden Platte (Resonanzmuster als Zielform)",
    "Bild zerstäuben: Ein Foto zerfällt in Partikel und setzt sich wieder zusammen",
    "Mesh löst sich in Partikel auf (Dissolve)",
    "Punktwolke aus Fotogrammetrie oder 3D-Scan"
   ],
   "umsetzung": "WebGL: zwei Float-Rendertargets je Größe (Position, Geschwindigkeit) im Ping-Pong, ein Shader-Durchgang pro Größe und Bild (wie GPUComputationRenderer). Zielformen als DataTexture, je Partikel ein Texel. Darstellung mit THREE.Points, der Vertex-Shader liest die Position aus der Textur. Additives Blending, Tiefe aus. WebGPU: TSL compute() mit Storage-Buffern, damit sind deutlich mehr Partikel möglich. Partikelzahl an das Gerät koppeln. Ersatz ohne Float-Rendertargets: Canvas2D mit wenigen hundert bis tausend Punkten.",
   "mobil": "Partikelzahl stark senken (etwa 4 096 statt 32 768), Punkte größer zeichnen. Hover-Ziele durch Tippen ersetzen.",
   "reduzierte_bewegung": "Simulation aus. Punkte stehen in der Zielform, der Formwechsel ist eine kurze Überblendung.",
   "barrierefreiheit": "Links, die die Partikel steuern, bleiben echte Links mit Ziel. Fokus löst denselben Formwechsel aus wie Hover. Das Canvas ist aria-hidden; eine Live-Region sagt an, was die Wolke zeigt."
  },
  "geprueft": "02.11.2026",
  "notiz": "Erfundenes Akustikbüro „Nachhall Studio“: Hover oder Fokus auf Studio, Klang, Archiv formt Kugel, Welle oder Schallplatte; Klick springt zum Abschnitt. Echte GPGPU-Simulation (Float-FBO-Ping-Pong) in einer Datei, ohne Addons. Umschalter Link-Ziele / Schriftzug / Spuren, Werte unten rechts. Ohne WebGL2 oder Float-Rendertargets: statischer Canvas2D-Ersatz mit 1 400 Punkten. Vorführung: gedachter Zeiger wählt reihum die Links und fährt danach durch die Wolke. Korrektur 02.11.2026: Variante chladni (Resonance-Prinzip, eigene Umsetzung über die Standardformel): drei Moden für Studio, Klang, Archiv, Abtastung über den Abstand zur Knotenlinie. Varianten nach Regel 13 (?v=ziele|schrift|spuren|chladni, replaceState). Knopf „Bewegung anhalten“ (aria-pressed, gleiche Pause wie FUNDUS_DEMO.pause) und Kontrastmodus-Rahmen ergänzt; Telefon-Layout im Fluss statt absolut (vorher überdeckte der Fuß bei mehr Knöpfen die Links). bild-zerstaeuben nicht gebaut: höchstens 4 Varianten.",
  "varianten": [
   {
    "id": "ziele",
    "name": "Link-Ziele: jede Navigation hat eine Form",
    "knopf": "Link-Ziele",
    "wann": "Startseite eines Studios mit drei bis fünf Bereichen, deren Links die Wolke formen.",
    "werte": {
     "formen": "Kugel, Welle, Schallplatte",
     "drehung": "0,12 rad/s"
    }
   },
   {
    "id": "schrift",
    "name": "Schriftzug: Punkte schreiben Wörter",
    "knopf": "Schriftzug",
    "wann": "Kampagnen- oder Markenseite, auf der ein Wort aus Partikeln entsteht (Claim, Eventname).",
    "werte": {
     "ziel": "Text-Pixel, Instrument Serif Italic, 2,7 Einheiten breit; Pendeln ± 0,22 rad"
    }
   },
   {
    "id": "spuren",
    "name": "Spuren: Lichtspuren durch Nachleuchten",
    "knopf": "Spuren",
    "wann": "Musik, Nachtleben, Kunst: die Punkte ziehen Lichtspuren, der Formwechsel dauert länger.",
    "werte": {
     "nachleuchten": "Bild × 0,86 pro Frame",
     "daempfung_c": 2.6,
     "curl": 0.9,
     "morph_ms": "≈ 3 100"
    }
   },
   {
    "id": "chladni",
    "name": "Chladni: Punkte ordnen sich zu Klangfiguren",
    "knopf": "Chladni",
    "wann": "Akustik, Musik, Instrumentenbau und Klangdesign: die Punkte sammeln sich wie Sand auf einer schwingenden Platte; bei anderen Branchen bloße Deko.",
    "werte": {
     "formel": "f = cos(nπx)·cos(mπy) − cos(mπx)·cos(nπy) auf x, y ∈ [0, 1]",
     "moden": "Studio n 3 · m 5, Klang n 3 · m 7, Archiv n 5 · m 9",
     "linie": "Punkt angenommen, wenn |f| / |∇f| < 0,004 × (0,4 bis 1,4) (gleich breite Knotenlinien, keine Klumpen an Sattelpunkten)",
     "platte": "2,5 Einheiten Kante, 5 % der Punkte auf dem Rand, Dicke ± 0,015, um −0,38 rad gekippt",
     "bewegung": "Formwechsel mit Sturm wie die Grundvariante (die Platte schwingt), danach Pendeln ± 0,22 rad statt Eigendrehung"
    }
   }
  ]
 }
}