konzept · 3D-hallenplan in echtzeit
Limmat Expo
Eine Art, eine Messehalle zu begehen, bevor es sie gibt. Drei Etagen einer fiktiven Schweizer Messe als 3D-Szene in Echtzeit: dreh die Halle, zieh die Etagen auseinander, um das ganze Gelände zu sehen, und wähl einen Stand, um zu sehen, wer darauf ist. Dieselbe Szene ist ein Kongresszentrum, ein Center-Wegweiser oder ein Museumsplan, nur mit anderen Bezeichnungen.
klick einen Stand für den Aussteller · ziehen zum Drehen · scrollen zum Zoomen
Hier ist es das Echte: eine WebGL-Szene, gerendert von three.js über Threlte. Jeder Stand ist ein beleuchtetes, schattenwerfendes Mesh, die Kamera dreht frei, und ein Raycaster macht aus Zeigerbewegungen Hover und Klicks. Die Zurückhaltung steckt im Renderer: er zeichnet nur dann einen Frame, wenn sich wirklich etwas ändert.
render-pipeline · gitterdaten bis frame
kamera jetzt: azimut 0 grad, polar 0 grad, distanz 0.0, von camera-controls gedämpft und live ausgelesen
woher die geschwindigkeit kommt
- Rendern bei Änderung: die Szene läuft im On-Demand-Modus. Eine stille Halle zeichnet null Frames, ein versteckter Tab zeichnet gar nichts, und die kleine Menge schlendert nur, während die Halle von selbst dreht, also schläft der Renderer wieder ein, sobald du die Kamera übernimmst.
- Ein kleines Vokabular: das ganze Gelände besteht aus Boxen, Zylindern und einer SDF-Schrift, die Menge ist ein einziges instanziertes Mesh pro Halle, und alles zusammen bleibt bei ein paar hundert Draw-Calls, also langweilt sich selbst eine bescheidene GPU.
- Eine zweite Tür: Canvas-Picking ist Zeigerarbeit, also spiegelt die Standliste die Szene und wählt ohne sie aus. Tastatur und Screenreader berühren das Canvas nie.
Der Hallenplan ist statische Beispieldaten, also sehen zwei Besucher dieselben Hallen, und nichts ist buchbar. Ein echtes Gelände würde das Layout und die Ausstellerliste aus einem CMS laden und einen Organisator live bearbeiten lassen. Eine frühere Version dieser Seite baute denselben Plan aus CSS-Transforms; WebGL verdient sein Gewicht hier mit echtem Licht, freier Kamera und der auseinandergezogenen Etagen-Ansicht. Reduzierte Bewegung ersetzt jedes Gleiten durch einen Schnitt.