{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "kuppel-kugel-galerie",
 "name": "Kuppel- und Kugel-Galerie",
 "name_en": "Dome grid / globe gallery / spherical image gallery",
 "kurz": "Das Winterprogramm eines Kulturhauses als Kuppel zum Umsehen oder als Globus: ziehen mit Trägheit, Klick fährt die Kamera an das Plakat und öffnet Termin und Tickets.",
 "kategorie": "Galerien & Slider",
 "kategorie_slug": "galerien-slider",
 "kategorie_nr": 12,
 "bau_chat": "C6",
 "prioritaet": "C",
 "trendstatus": "aufsteigend",
 "belegstatus": "quellenbelegt",
 "website_belege": 0,
 "stimmung": [
  "filmisch",
  "verspielt",
  "experimentell"
 ],
 "stimmung_roh": [
  "immersiv",
  "experimentell",
  "verspielt"
 ],
 "technik": [
  "three",
  "ogl",
  "webgl-shader",
  "css",
  "gsap",
  "inertia"
 ],
 "technik_gruppen": [
  "css",
  "gsap",
  "webgl"
 ],
 "leistungskosten": "hoch",
 "steckbrief": {
  "beschreibung": "Bilder liegen auf einer Kugeloberfläche oder in einer Kuppel, verteilt in Ringen oder als Fibonacci-Kugel, jedes zur Mitte bzw. nach außen gedreht. Die Kamera sitzt innen (Kuppel, man schaut sich um) oder außen (Globus). Ziehen dreht mit Trägheit, ohne Eingabe dreht sie langsam weiter. Ein Klick fährt die Kamera an das Bild heran oder öffnet es als Vollbild. Ohne WebGL geht es auch mit CSS 3D (rotateX/rotateY pro Kachel).",
  "warum_es_wirkt": "Maximale Räumlichkeit und Neugier: Die Galerie wird zu einem Raum, in dem man sich umsieht.",
  "wann_einsetzen": "Kampagnen, Festivals, Kunst- und Archivprojekte, Programme mit vielen gleichrangigen Einträgen, Studio-Showcases mit vielen kleinen Arbeiten.",
  "wann_nicht": "Wenn Inhalte geordnet durchsucht werden müssen oder die Zielhardware schwach ist. Dann nur mit einer gleichwertigen Liste daneben.",
  "varianten": [
   "Kuppel von innen (Infinite Dome Grid)",
   "Globus von außen (Globe Gallery)",
   "Fortlaufend rotierende Galerie in WebGL (OGL)",
   "Kreisförmige Endlosgalerie mit Krümmung (Infinite Circular Gallery)"
  ],
  "umsetzung": "Fibonacci-Verteilung: y = 1 − (2i + 1) / n, r = √(1 − y²), θ = i × 2,39996 (goldener Winkel); Kachel per lookAt ausrichten. Kuppel: Ringe auf festen Breitengraden, Kamera im Mittelpunkt. Drehung als Gier- und Nickwinkel (oder Quaternion) mit Dämpfung, typisch Geschwindigkeit × 0,92 bis 0,96 pro Frame. Zum Öffnen Zielwinkel aus Länge und Breite der Kachel berechnen und den kürzesten Weg nehmen. Bilder als Texturatlas oder kleine Texturen, Klicks per Raycaster. Ohne WebGL eine Liste als Fallback.",
  "mobil": "Weniger Kacheln, dafür größer. Gyroskop höchstens nach ausdrücklicher Erlaubnis. Die Liste bleibt als Ansicht erreichbar.",
  "reduzierte_bewegung": "Keine Autorotation und kein Schwung; statische Liste oder statisches Raster als Standard.",
  "barrierefreiheit": "Canvas ist dekorativ (aria-hidden), die echte Liste der Termine ist eine gleichwertige Ansicht. Tastatur: Pfeile drehen, Enter öffnet das Bild in der Mitte, Esc schließt. Farbe nie allein: jede Sparte trägt ein Text-Label."
 },
 "messwerte": {
  "easing": "Trägheit per Dämpfung; Kamerafahrt power3.inOut",
  "dauer_ms": "Kamerafahrt 1000–1400",
  "stagger_ms": "Intro 10–30 pro Kachel",
  "distanz": "",
  "sonstiges": "Dämpfung 0,92–0,96 pro Frame",
  "herkunft": "typisch",
  "quelle": ""
 },
 "kurve": {
  "bezier": [
   0.76,
   0,
   0.24,
   1
  ],
  "css": "cubic-bezier(0.76, 0, 0.24, 1)",
  "name": "power3.inOut",
  "dauer_ms": 1000
 },
 "gesehen_bei": [
  {
   "seite": "Osmo – Infinite Dome Grid und Globe Gallery",
   "url": "https://www.osmo.supply/resource/infinite-dome-grid",
   "auszeichnung": "",
   "beobachtung": "Beide in der Osmo-Ressourcenliste geführt (Globe Gallery: https://www.osmo.supply/resource/globe-gallery); Detailseiten gesperrt.",
   "art": "demo"
  },
  {
   "seite": "Codrops – WebGL Rotating Image Gallery using OGL and GLSL (12/2024)",
   "url": "https://tympanus.net/codrops/2024/12/03/how-to-create-a-webgl-rotating-image-gallery-using-ogl-and-glsl-shaders/",
   "auszeichnung": "",
   "beobachtung": "Laut Teaser: fortschreitende Bildrotation in WebGL.",
   "art": "artikel"
  },
  {
   "seite": "Codrops – Infinite Circular Gallery using WebGL with OGL (02/2021)",
   "url": "https://tympanus.net/codrops/2021/02/23/creating-an-infinite-circular-gallery-using-webgl-with-ogl-and-glsl-shaders/",
   "auszeichnung": "",
   "beobachtung": "Laut Teaser: ziehbare, scrollbare Kreisgalerie in WebGL.",
   "art": "artikel"
  }
 ],
 "tutorials": [
  {
   "titel": "Codrops: WebGL Rotating Image Gallery (OGL)",
   "url": "https://tympanus.net/codrops/2024/12/03/how-to-create-a-webgl-rotating-image-gallery-using-ogl-and-glsl-shaders/"
  },
  {
   "titel": "Codrops: Infinite Circular Gallery (OGL)",
   "url": "https://tympanus.net/codrops/2021/02/23/creating-an-infinite-circular-gallery-using-webgl-with-ogl-and-glsl-shaders/"
  }
 ],
 "kombinierbar_mit": [
  "unendliche-leinwand-galerie",
  "token-physik-traege"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/galerien-slider/kuppel-kugel-galerie/",
  "meta": "https://cecodesign.de/lab/fundus/galerien-slider/kuppel-kugel-galerie/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/galerien-slider/kuppel-kugel-galerie/demo"
 },
 "herkunft": {
  "quelldateien": [
   "galerien_stile.json",
   "patch-belege-2.json"
  ],
  "pruefnotizen": [
   "patch-belege-2.json: Kein Produktionsbeleg; bleibt C."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Das Winterprogramm eines Kulturhauses als Kuppel zum Umsehen oder als Globus: ziehen mit Trägheit, Klick fährt die Kamera an das Plakat und öffnet Termin und Tickets.",
  "demo": true,
  "abhaengigkeiten": [
   "three@0.186.0",
   "gsap@3.15.0"
  ],
  "werte": {
   "easing": "Kamerafahrt power3.inOut = cubic-bezier(0.76, 0, 0.24, 1); UI cubic-bezier(0.215, 0.61, 0.355, 1); Drehen per Dämpfung",
   "daempfung": "Geschwindigkeit × 0,95 pro Frame bei 60 Hz, zeitbasiert: f = 0,95^(dt / 16,67 ms)",
   "autorotation": "0,05 rad/s in letzter Wurfrichtung; setzt 1500 ms nach der letzten Eingabe wieder ein und blendet über etwa 600 ms ein",
   "ziehen": "Kuppel: Fensterhöhe entspricht dem Bildwinkel (rad/px = fov / Höhe); Globus: 2,6 rad je Bühnenhöhe; Geschwindigkeit geglättet 0,7 alt / 0,3 neu; Wurf nur, wenn die letzte Bewegung jünger als 80 ms ist; unter 5 px gilt es als Klick",
   "neigung": "Kuppel ±0,42 rad, Globus ±1,1 rad",
   "kamerafahrt_ms": "Hin 1200 (Drehung, Zoom und Bildversatz gemeinsam), zurück 1000",
   "zoom": "Kachel füllt danach 70 % der Bühnenhöhe (Telefon 40 %): Kuppel über den Bildwinkel 2·atan(0,23 / Anteil), Globus über den Kameraabstand",
   "bildversatz": "camera.setViewOffset: Bildmitte weicht der Karte um 20 % der Breite aus (Telefon 28 % der Höhe nach oben)",
   "karte": "opacity 0 → 1 und 24 px Versatz, 250 ms cubic-bezier(0.215, 0.61, 0.355, 1), erscheint bei 60 % der Fahrt",
   "intro": "scale 0 → 1, 800 ms power3.inOut, 20 ms Versatz je Kachel, von der Blickmitte nach außen",
   "kuppel": "Radius 10, Kamera in der Mitte, drei Ringe bei 32°, 0°, −32° mit 9/10/9 Kacheln (Telefon 7/8/7), Kachel 3,68 × 4,6, jede per lookAt(0,0,0) zur Mitte; Bildwinkel 58° (Hochformat 76°)",
   "globus": "Radius 6, Fibonacci-Kugel y = 1 − (2i + 1) / n, θ = i × 2,39996, 28 Kacheln (Telefon 22, Größe × √(28 / n)), Kachel 2,48 × 3,1 nach außen gedreht; Kern 0,93 × Radius #E2DFD8; Bildwinkel 35°; Nebel ab Kameraabstand − 5 bis + 9",
   "hover": "Kachel unter dem Zeiger scale 1,07, nachgeführt mit etwa 90 ms Zeitkonstante; Titel und Termin unten links",
   "textur": "ein Atlas aus Canvas 2D, 7 × 4 Plakate à 400 × 500 px, CanvasTexture sRGB, Anisotropie bis 8, alphaTest 0,5 für runde Ecken",
   "ui_ms": "Knöpfe 200, Karte 250"
  },
  "ausloeser": "ziehen",
  "touch": "Ziehen mit dem Finger dreht Kuppel oder Globus mit derselben Trägheit, Antippen öffnet das Plakat. Der Globus zeigt 22 statt 28 Plakate, dafür größer. Die Karte kommt als Blatt von unten, das Plakat rückt darüber. Kein Hover, kein Gyroskop.",
  "reduziert": "Startet in der Ansicht Liste. In Kuppel und Globus keine Autorotation, kein Schwung und kein Intro; die Kamera springt ohne Fahrt zum Plakat, die Karte erscheint ohne Bewegung.",
  "korrekturen": {
   "beschreibung": "Bilder liegen auf einer Kugeloberfläche oder in einer Kuppel, verteilt in Ringen oder als Fibonacci-Kugel, jedes zur Mitte bzw. nach außen gedreht. Die Kamera sitzt innen (Kuppel, man schaut sich um) oder außen (Globus). Ziehen dreht mit Trägheit, ohne Eingabe dreht sie langsam weiter. Ein Klick fährt die Kamera an das Bild heran oder öffnet es als Vollbild. Ohne WebGL geht es auch mit CSS 3D (rotateX/rotateY pro Kachel).",
   "warum_es_wirkt": "Maximale Räumlichkeit und Neugier: Die Galerie wird zu einem Raum, in dem man sich umsieht.",
   "wann_einsetzen": "Kampagnen, Festivals, Kunst- und Archivprojekte, Programme mit vielen gleichrangigen Einträgen, Studio-Showcases mit vielen kleinen Arbeiten.",
   "wann_nicht": "Wenn Inhalte geordnet durchsucht werden müssen oder die Zielhardware schwach ist. Dann nur mit einer gleichwertigen Liste daneben.",
   "varianten": [
    "Kuppel von innen (Infinite Dome Grid)",
    "Globus von außen (Globe Gallery)",
    "Fortlaufend rotierende Galerie in WebGL (OGL)",
    "Kreisförmige Endlosgalerie mit Krümmung (Infinite Circular Gallery)"
   ],
   "umsetzung": "Fibonacci-Verteilung: y = 1 − (2i + 1) / n, r = √(1 − y²), θ = i × 2,39996 (goldener Winkel); Kachel per lookAt ausrichten. Kuppel: Ringe auf festen Breitengraden, Kamera im Mittelpunkt. Drehung als Gier- und Nickwinkel (oder Quaternion) mit Dämpfung, typisch Geschwindigkeit × 0,92 bis 0,96 pro Frame. Zum Öffnen Zielwinkel aus Länge und Breite der Kachel berechnen und den kürzesten Weg nehmen. Bilder als Texturatlas oder kleine Texturen, Klicks per Raycaster. Ohne WebGL eine Liste als Fallback.",
   "mobil": "Weniger Kacheln, dafür größer. Gyroskop höchstens nach ausdrücklicher Erlaubnis. Die Liste bleibt als Ansicht erreichbar.",
   "reduzierte_bewegung": "Keine Autorotation und kein Schwung; statische Liste oder statisches Raster als Standard.",
   "barrierefreiheit": "Canvas ist dekorativ (aria-hidden), die echte Liste der Termine ist eine gleichwertige Ansicht. Tastatur: Pfeile drehen, Enter öffnet das Bild in der Mitte, Esc schließt. Farbe nie allein: jede Sparte trägt ein Text-Label."
  },
  "geprueft": "01.11.2026",
  "notiz": "Rezept kultur-programm-haltung: erfundenes Kulturhaus Kuppelhaus Beuel (Bonn) mit 28 Terminen von November bis Februar, Plakate als eigener Canvas-Atlas in den vier Spartenfarben. Schibsted Grotesk, Atkinson Hyperlegible Next, IBM Plex Mono. Umschalter Kuppel, Globus, Liste (Liste ist Standard bei reduzierter Bewegung und Fallback ohne WebGL). Vorführung zieht, wirft, öffnet ein Plakat und wechselt jede Runde zwischen Kuppel und Globus. Headless-Befund: ein scrollbarer Overflow-Container über dem WebGL-Canvas ließ das Canvas in der Telefon-Emulation verschwinden, daher ist die Karte dort ohne eigenes Scrollen gebaut. Referenzen: osmo.supply, tympanus.net, barbican.org.uk, stedelijk.nl. AD-Review 01.11.2026: Note 4. Nachgebessert: Hinweis sagt auf Touch „Tippen“ statt „Klicken“."
 }
}