{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "instanzierte-objektfelder",
 "name": "Instanzierte Objektfelder",
 "name_en": "Instanced meshes / thousands of 3D objects",
 "kurz": "Ein Würfelfeld aus 1 904 Instanzen in einem Draw Call: Die Blöcke folgen dem Cursor als Welle, bilden die Stufen eines Lernwegs und zeichnen am Ende einen Haken.",
 "kategorie": "3D & WebGL",
 "kategorie_slug": "3d-webgl",
 "kategorie_nr": 11,
 "bau_chat": "C5",
 "prioritaet": "B",
 "trendstatus": "etabliert",
 "belegstatus": "belegt",
 "website_belege": 2,
 "stimmung": [
  "präzise",
  "filmisch"
 ],
 "stimmung_roh": [
  "architektonisch",
  "technisch",
  "hypnotisch"
 ],
 "technik": [
  "three",
  "r3f",
  "webgl-shader"
 ],
 "technik_gruppen": [
  "webgl"
 ],
 "leistungskosten": "mittel",
 "steckbrief": {
  "beschreibung": "Tausende gleiche Objekte (Würfel, Kugeln, Kacheln, Blätter) liegen als InstancedMesh in einem einzigen Draw Call. Jede Instanz hat eine eigene Matrix und Farbe. Bewegt wird im Vertex-Shader: Höhe, Farbe und Verzögerung hängen an instanceId bzw. an Instanz-Attributen, dazu Noise oder ein Compute-Pass. Das Feld weicht dem Cursor aus, wellt beim Scrollen oder formt Zeichen und Logos. Mit Physik wird es zum Spielzeug.",
  "warum_es_wirkt": "Masse und Ordnung ergeben hypnotische, architektonische Bilder. Wenn Hunderte Teile auf eine einzige Geste reagieren, fühlt sich das mächtig an. Formt das Feld ein Zeichen, wird aus Struktur eine Aussage.",
  "wann_einsetzen": "Hero-Hintergründe mit Idee, Daten-Metaphern (Mengen, Fortschritt, Stufen), Logo- und Zeichen-Formationen, Studio-Seiten.",
  "wann_nicht": "Wenn das Feld nur Hintergrundrauschen ohne Idee ist. Nicht hinter Fließtext. Nicht ohne Ersatz für Geräte ohne WebGL.",
  "varianten": [
   "Würfelfeld mit Cursor-Welle",
   "Logo oder Zeichen aus Instanzen",
   "Daten-Metapher: Stufen oder Balken aus Instanzen",
   "Rotierende Texturen auf Geometrie",
   "Roaming Cubes mit Glas (Volatile Nexus)"
  ],
  "umsetzung": "Ein InstancedMesh, Matrizen per setMatrixAt nur bei Änderung setzen (danach instanceMatrix.needsUpdate). Besser: Matrizen einmal setzen und die Animation in den Vertex-Shader legen, gesteuert über InstancedBufferAttribute und Uniforms (Zeit, Zeiger, Zustand). Stagger über einen Verzögerungswert je Instanz. Frustum Culling für Instanzen selbst rechnen oder mit frustumCulled = false abschalten. In React Three Fiber deklarativ mit drei Instances.",
  "mobil": "Instanzzahl reduzieren, Pixelverhältnis begrenzen. Tippen oder Wischen statt Hover.",
  "reduzierte_bewegung": "Feld statisch. Zustandswechsel als kurze Überblendung.",
  "barrierefreiheit": "Canvas dekorativ (aria-hidden). Was das Feld zeigt, steht zusätzlich als Text daneben. Bedienelemente sind echte Buttons."
 },
 "messwerte": {
  "easing": "",
  "dauer_ms": "",
  "stagger_ms": "über instanceId-Offset",
  "distanz": "",
  "sonstiges": "1k–100k Instanzen",
  "herkunft": "typisch",
  "quelle": ""
 },
 "kurve": {
  "bezier": [
   0.22,
   1.0,
   0.36,
   1.0
  ],
  "css": "cubic-bezier(0.22, 1, 0.36, 1)",
  "name": "power4.out",
  "dauer_ms": 600
 },
 "gesehen_bei": [
  {
   "seite": "basement.studio",
   "url": "https://basement.studio/",
   "auszeichnung": "",
   "beobachtung": "Im Three.js-Showcase gelistet (Studio-Seite mit WebGL).",
   "art": "website-ungeprueft",
   "browser_gemessen": true
  },
  {
   "seite": "Messenger (Abeto)",
   "url": "https://messenger.abeto.co",
   "auszeichnung": "",
   "beobachtung": "Live geprüft 31.10.2026 (HTML/Bundle per curl abgerufen): new InstancedMesh für Gras (createGrassMaterial, grass.drc) und Schmetterlinge (butterflies.drc), instanceMatrix direkt aus vorberechneten Patches.",
   "art": "website"
  },
  {
   "seite": "Shader Development Studio",
   "url": "https://www.shader.se/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft 31.10.2026 (HTML/Bundle per curl abgerufen): new InstancedMesh aus GLTF-Instanzdaten (TRANSLATION/ROTATION/SCALE-Attribute) im R3F-Chunk.",
   "art": "website"
  }
 ],
 "tutorials": [],
 "kombinierbar_mit": [
  "partikel-punktwolke",
  "webgpu-tsl-compute",
  "glas-transmission-3d"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/3d-webgl/instanzierte-objektfelder/",
  "meta": "https://cecodesign.de/lab/fundus/3d-webgl/instanzierte-objektfelder/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/3d-webgl/instanzierte-objektfelder/demo"
 },
 "herkunft": {
  "quelldateien": [
   "material3d.json",
   "patch-belege-2.json"
  ],
  "pruefnotizen": [
   "patch-belege-2.json: 2 Produktionsbelege (+ bruno-simon.com) → B vorgeschlagen. basement.studio-Eintrag bleibt ungeprüft (InstancedMesh nur in Three-Kern gefunden)."
  ],
  "prioritaet_hinweis": "31.10.2026: C → B laut patch-belege-2.json (2 Produktionsbelege (+ bruno-simon.com) → B vorgeschlagen. basement.studio-Eintrag bleibt ungeprüft (InstancedMesh nur in Three-Kern gefunden).)"
 },
 "bau": {
  "status": "fertig",
  "kurz": "Ein Würfelfeld aus 1 904 Instanzen in einem Draw Call: Die Blöcke folgen dem Cursor als Welle, bilden die Stufen eines Lernwegs und zeichnen am Ende einen Haken.",
  "demo": true,
  "abhaengigkeiten": [
   "three@0.186.0"
  ],
  "werte": {
   "instanzen": "1 904 (Raster 56 × 34) Desktop, 660 (30 × 22) bei Touch oder Breite bis 760 px",
   "draw_calls": "1 (ein InstancedMesh, BoxGeometry 0,84 × 1 × 0,84 je Zelle 1, Boden bei y = 0)",
   "matrizen": "setMatrixAt einmal beim Start (nur x/z), Höhe skaliert der Vertex-Shader; frustumCulled = false",
   "easing": "cubic-bezier(0.22, 1, 0.36, 1) je Instanz, im Shader per Newton (6 Schritte) gelöst",
   "dauer_ms": "600 je Instanz beim Variantenwechsel",
   "stagger_ms": "720 über das Feld (Spalte/56 × 0,6 + Zeile/34 × 0,4) plus 0 bis 80 Zufall, als Verzögerung je Instanz (Instanz-Attribut)",
   "feder": "cubic-bezier(0.34, 1.56, 0.64, 1), 560 ms, nur für Erfolg: Modul abhaken und Haken",
   "haken_strich_ms": "180 Vorlauf + 600 entlang des Strichs (Instanzen poppen in Zeichenreihenfolge)",
   "abhaken": "Versatz innerhalb einer Stufe 240 ms, Takt beim Betreten des Lernwegs 420 ms (Module 01 bis 04), in der Vorführung 520 ms",
   "cursor_welle": "Gauß-Hügel Hub 2,4 Zellen, Radius 4,5 Zellen, plus Ringwelle 0,35 · sin(d · 1,1 − t · 5) · e^(−0,2 d); in Lernweg und Formation × 0,45",
   "nachlauf": "Zeiger lerp 1 − e^(−7 dt), Ein-/Ausblenden der Welle 1 − e^(−5 dt), Touch klingt 900 ms nach dem Loslassen aus",
   "grundwelle": "0,36 + 0,3 · sin(x · 0,32 + t · 0,8) · cos(z · 0,27 − t · 0,6) + 0,08 Zufall (Höhe in Zellen)",
   "stufen": "6 Stufen à 4 Zeilen (mobil 2) mit Wegzeile, Höhe 0,3 + Stufe × 0,42, erledigt + 0,25",
   "haken": "im Bildraum definiert und auf die Zellen zurückprojiziert, Höhe 2,1, übriges Feld 0,12, Strichbreite max(6,2 % der Hakengröße, 1,3 Zellen)",
   "kamera": "Perspektive fov 26°, Azimut 40°, Neigung 36°, View-Offset −17 % der Breite (Feld rechts), mobil +7 % der Höhe (Feld höher), Nebel 1,05 bis 1,9 × Abstand",
   "licht": "ohne Lichtquelle: Deckfläche 1,0, Seiten 0,86 / 0,72, Kontaktschatten unten 0,6, Kantenlinie oben 0,93",
   "farben": "Grund #e9edf5, Blöcke #fbfcfe, Marke #4257f5 (Welle, aktuelle Stufe), Erfolg #10bf7a (erledigt, Haken), Weg #d3d9e6",
   "pixelverhaeltnis": "max. 2, mobil 1,5",
   "reduziert_blende_ms": "150 aus / 250 ein",
   "vorfuehrung": "Schleife 14,6 s: 5,6 s Welle mit gedachtem Zeiger (Lissajous), 4,8 s Lernweg mit sechs Abhak-Schritten, 4,2 s Formation"
  },
  "ausloeser": "hover",
  "touch": "Tippen oder Wischen hebt die Blöcke an der Fingerposition, die Welle klingt 0,9 s nach dem Loslassen aus. Varianten und „Modul abhaken“ per Tippen. 660 statt 1 904 Instanzen, Pixelverhältnis höchstens 1,5.",
  "reduziert": "Feld steht still: keine Grundwelle, keine Cursor-Welle, kein Stagger. Variantenwechsel als Überblendung 150 / 250 ms, Abhaken sofort.",
  "korrekturen": {
   "beschreibung": "Tausende gleiche Objekte (Würfel, Kugeln, Kacheln, Blätter) liegen als InstancedMesh in einem einzigen Draw Call. Jede Instanz hat eine eigene Matrix und Farbe. Bewegt wird im Vertex-Shader: Höhe, Farbe und Verzögerung hängen an instanceId bzw. an Instanz-Attributen, dazu Noise oder ein Compute-Pass. Das Feld weicht dem Cursor aus, wellt beim Scrollen oder formt Zeichen und Logos. Mit Physik wird es zum Spielzeug.",
   "warum_es_wirkt": "Masse und Ordnung ergeben hypnotische, architektonische Bilder. Wenn Hunderte Teile auf eine einzige Geste reagieren, fühlt sich das mächtig an. Formt das Feld ein Zeichen, wird aus Struktur eine Aussage.",
   "wann_einsetzen": "Hero-Hintergründe mit Idee, Daten-Metaphern (Mengen, Fortschritt, Stufen), Logo- und Zeichen-Formationen, Studio-Seiten.",
   "wann_nicht": "Wenn das Feld nur Hintergrundrauschen ohne Idee ist. Nicht hinter Fließtext. Nicht ohne Ersatz für Geräte ohne WebGL.",
   "varianten": [
    "Würfelfeld mit Cursor-Welle",
    "Logo oder Zeichen aus Instanzen",
    "Daten-Metapher: Stufen oder Balken aus Instanzen",
    "Rotierende Texturen auf Geometrie",
    "Roaming Cubes mit Glas (Volatile Nexus)"
   ],
   "umsetzung": "Ein InstancedMesh, Matrizen per setMatrixAt nur bei Änderung setzen (danach instanceMatrix.needsUpdate). Besser: Matrizen einmal setzen und die Animation in den Vertex-Shader legen, gesteuert über InstancedBufferAttribute und Uniforms (Zeit, Zeiger, Zustand). Stagger über einen Verzögerungswert je Instanz. Frustum Culling für Instanzen selbst rechnen oder mit frustumCulled = false abschalten. In React Three Fiber deklarativ mit drei Instances.",
   "mobil": "Instanzzahl reduzieren, Pixelverhältnis begrenzen. Tippen oder Wischen statt Hover.",
   "reduzierte_bewegung": "Feld statisch. Zustandswechsel als kurze Überblendung.",
   "barrierefreiheit": "Canvas dekorativ (aria-hidden). Was das Feld zeigt, steht zusätzlich als Text daneben. Bedienelemente sind echte Buttons."
  },
  "geprueft": "01.11.2026",
  "notiz": "Welt: Rezept kurs-coaching-lernweg, erfundene Akademie „Stufenwerk“ aus Halle (Live-Kurs Excel bis Monatsbericht), Schriften Bricolage Grotesque, Onest, Shantell Sans. Das Rezept schließt 3D als Effekt ohne Lernversprechen aus, deshalb ist das Feld hier Daten-Metapher: Stufen = Module, Haken = Abschluss, Federkurve nur beim Abhaken. Varianten Welle / Lernweg / Formation per Umschalter, „Modul abhaken“ als Button, Werte und Draw-Call-Zahl live eingeblendet. Höhe, Farbe und Stagger rechnet der Vertex-Shader (CSS-Kurve per Newton im Shader). Ohne WebGL ein statisches isometrisches Canvas2D-Feld mit denselben Zuständen. Rendern pausiert außerhalb des Viewports. Inspiration nur als Prinzip: increase.com (isometrische Stufen auf hellem Grund), zhdk.ch (gelbe Datumsplakette). AD-Review 01.11.2026: Note 5"
 }
}