Web-basierte Visualisierung von 3D-Stadtmodellen
In diesem Artikel soll eine kurze Einführung in die web-basierte 3D-Visualisierung von 3D-Stadtmodellen gegeben werden. Hierzu wird anhand eines Beispiel die Erstellung einer 3D-Visualisierung von Wermelskirchen mit dem digitalen Globus Cesium erstellt. Warum Wermelskirchen und nicht New York? Auch das 3D-Gebäudemodell von Wermelskirchen ist frei verfügbar, und es ist etwas überschaubarer als New York. Nach dem Motto “Think Big, start small” wird hier ein Workflow schrittweise vorgestellt, der aufzeigt, wie man ausgehend von einem 3D-Gebäudemodell in CityGML eine Visualisierung in Cesium erstellt. Dazu wird der CityGML Datenbestand in das für die web-basierte 3D-Visualisierung optimierte Datenformat 3D Tiles konvertiert und in Cesium dargestellt. Im ersten Schritt soll gezeigt werden, wie die Visualisierung in Cesium erfolgt. Dazu wird davon ausgegangen, dass das 3D-Gebäudemodell von Wermelskirchen bereits als 3D Tiles vorliegt. Dann sieht man schon einmal was. Im zweiten Schritt wird dann die Konvertierung von CityGML nach 3D Tiles erläutert.
Visualisierung 3D-Gebäudemodell Wermelskirchen. Datenquelle: GeoBasis NRW, 3D-Gebäudemodell LoD2, CC BY 3.0 DE
Der digitale Globus Cesium
Der digitale Globus Cesium kann von der Webseite https://cesiumjs.org/downloads/ heruntergeladen werden. Er sollte auf einen eigenen Web-Server betrieben werden. In Grunde gibt es keine Einschränkungen, welcher Webserver verwendet wird. In der Installationsanleitung von Cesium (https://cesiumjs.org/tutorials/cesium-up-and-running/) wird Node.js verwendet. In dem hier gezeigten Beispiel wird Apache HTTP Server als Webserver verwendet. Egal, welcher Webserver zum Einsatz kommt, nach erfolgreicher Installation sollte der digitale Globus mit dem üblichen “Hello World” zu sehen sein.
Cesium Hello World, (CC BY 3.0 DE)
3D Tiles
Bei 3D Tiles handelt es sich um einen hierarchisch aufgebauten Szenengraph, bei dem ein großes 3D-Modell in Kacheln unterteilt wird, um eine schnelle Darstellung im Web-Browser zu realisieren. Ziel ist es dabei, so schnell wie möglich ein erstes vereinfachtes Modell an den Web-Browser zu übertragen und darzustellen. Die Szene wird bei Benutzerinteraktionen wie heranzoomen durch das Nachladen weiterer Kacheln detaillierter dargestellt. Zur Erstellung der Kacheln bietet sich bei 3D-Gebäudemodellen eine Quadtree Datenstuktur an. Dabei wird ein Gebiet regelmäßig in 4 Quadranten unterteilt, die entsprechend der Himmelrichtungen NE, SE, SW und NW genannt werden.
Jeder Quadrat wird nach dem gleichen Muster weiter unterteilt. So entsteht eine hierarchische Kachel-Struktur, die sich auch in den Dateien der 3D-Szene wiederfindet.
Rekursive Unterteilung der NE Kachel. (CC BY 3.0 DE)
Ein entsprechend generierter Datensatz von Wermelskirchen wird im Archiv Wermelskirchen3DTiles zur Verfügung gestellt. Wie dieser Datensatz aus dem CityGML-Modell entstanden ist, wird im zweiten Teil dieses Beispiels erläutert. Zunächst geht es darum, die Struktur zu verstehen und im Cesium-Viewer zu visualisieren.
Nach dem Herunterladen und Entpacken des Archivs ist folgende Dateistruktur entstanden:
Die Ordnerstruktur entspricht der Quadtree-Struktur
Im Ordner Wermelskirchen3DTiles befindet sich eine Datei tileset.json. Hier ist der gesamte Szenengraph enthalten, anhand dessen der Cesium Viewer entscheidet, welche Daten wann übertragen und auf dem Bildschirm dargestellt werden. Die Datei kann in einem normalen Editor wie Notepad++ angeschaut werden. Da es sich um eine JSON Datei handelt, empfiehlt sich auch die Nutzung eines JSON Plugins für Notepad++ wie JSToolNpp.
Die Datei tileset.json enthält den Szenengraph, der vom Cesium Viewer verwendet wird. (CC BY 3.0 DE)
Der Aufbau der JSON Datei entspricht der Quadtree-Struktur. Zu jedem Quadranten werden u.a. die Koordinaten des Hüllvolumens (boundingVolume), die Darstellungsgeometrie der Kachel (content) und der max. Fehler im Vergleich zur originalen Gebäudegeometrie (geometryError) definiert. Die eigentliche Darstellungsgeometrie wird in einer externen Datei in dem binären Format b3dm gespeichert. Die Geometrie wird dabei immer als Dreiecksnetz gespeichert. Zusätzlich können Texturen und Attributdaten hinterlegt werden. Diese Dateien finden sich in der Ordnerstruktur entsprechend der Quadtree-Struktur wieder, z.B. unter ./b3dms/R/NE.b3dm und ./b3dms/R/NE/NE.b3dm. Für jede Kachel wird ein vereinfachtes 3D-Modell gespeichert. Die originale Gebäudegeometrie findet sich in den Blättern des Szenengraphen, also bei Kacheln, die nicht weiter unterteilt werden. Anhand des Geometriefehlers in der Kachel (geometryError) und des Blickpunktes (Kamera), von dem aus die Szene betrachtet wird, entscheidet der Cesium Viewer, welche Kacheln geladen und dargestellt werden.
Mehr Details zu 3D Tiles finden sich im Blog von Patrick Cozzi.
Um die 3D Tiles in Cesium darzustellen, müssen die Dateien auf den Webserver kopiert werden, z.B. bei Apache in das Verzeichnis htdocs. Zusätzlich muss eine HTML-Datei erstellt werden, in der das Modell mit dem Cesium-Viewer verknüpft wird. Hierzu kann man am einfachsten die o.g. HelloWorld.html-Datei von Cesium kopieren und um folgendes JavaScript ergänzen.
<script>
var viewer = new Cesium.Viewer('cesiumContainer');
var tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
url : './Wermelskirchen3DTiles/tileset.json'
}));
tileset.readyPromise.then(function() {
var boundingSphere = tileset.boundingSphere;
viewer.camera.viewBoundingSphere(boundingSphere,
new Cesium.HeadingPitchRange(0.5, -0.2, boundingSphere.radius * 0.5));
viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
}).otherwise(function(error) {
throw(error);
});
</script>
|
In der ersten Zeile wird der Cesium Viewer instanziiert. Mit der Anweisung viewer.scene.primitives.add wird das Tileset zum Globus hinzugefügt. In dieser Datei stehen alle notwendigen Informationen, um in Abhängigkeit des Kamerastandpunktes zu entscheiden, welche Kachel geladen und im Globus angezeigt werden muss. Die folgenden Anweisungen definieren die initiale Position und Orientierung der Kamera, damit beim Laden der Webseite bereits 3D-Gebäudemodelle zu sehen sind.
Das Ergebnis wird in der Datei Wermelskirchen.html gespeichert. Der erste Blick auf Wermelskirchen ist in folgender Abbildung dargestellt.
Hallo Wermelskirchen Datenquelle: GeoBasis NRW, 3D-Gebäudemodell LoD2, CC BY 3.0 DE
Verwendete Software im Überblick
- CesiumJS v1.45
- Webserver: Apache HTTP Server, ist auch im XAMPP enthalten
- Editor: Notepad++ mit JSON Plugin JSToolNpp
- Web-Browser: Firefox v56.0
Referenzen
Blog dragons8mycat: “Creating a Cesium virtual globe with v1.36” vom 5.9.2017
Tim Rivenbark, 3D Gebäudemodell New York in Cesium, 5.5.2017
Copyright
Die im Blog bereitgestellten Texte und Bilder stehen unter der Lizenz CC BY 3.0 DE.