Introduction
+The recent technology of virtual globe-based 3D visualization is a unique opportunity to facilitate advanced + analysis and visualization tasks in a variety of application domains such as urban planning, indoor/outdoor + pedestrian navigation, environmental simulations, cultural heritage, or facility management. One core data + which make this concept come true is the development of the CityGML models by Open Geospatial Consortium + (OGC — https://www.ogc.org/). CityGML is the global data model schema for describing 3D + geo-spatially-enabled urban models. There are more and more cities that provide open-source CityGML models + publicly.
+ +
+ (An Expected Output from This Workshop — 3D Web App with 3D Semantic Building Models in Den Haag Area) +
+
+
Architecture and Workflow
+
+ The overall system architecture of the 3D web-based app is shown in the figure above. It includes four main + components: CityGML dataset, 3D Tiles dataset, Web server, and Users. +
So, let’s get started and create each component together
+
+
Step 1: Preparing 3D City Models
+In this step, we will download the 3D city models in CityGML format. Then, convert the models to 3D Tiles + format for optimizing the 3D web visualization. In this article, I picked the 3D city models from Den Haag + area as it is a compact model. Of course, you are free to explore this method with any CityGML datasets.
+-
+
- + Den Haag (NL) 3D building model Dataset: https://denhaag.dataplatform.nl/#/data/36049d1a-4a0f-4c5d-8adb-21dbfb7252f9 + +
- + Nordrhein-westfalen (Germany) 3D building model Dataset: https://www.opengeodata.nrw.de/produkte/geobasis/3dg/lod2_gml/ + +
+
+
+
+
+
+
+
+ +
+
Step 2: Preparing HTML for CesiumJS
+ In this step, we will create an HTML web document containing the 3D Web Globe using CesiumJS library. You can + use any code Idle or editor. You can create the document with + the name you like and copy the following code. Don't forget to specify the URL on line 24 to the target + Tileset.json. If you do this for the first time, you can come back after you set up the web server in step + three. + + + ++
Step 3: Host the 3D Web App on the Web Server
+ This steps, we will host the Web App from step 2 and the 3D Tiles city models from step 1 on the web server. You + are freely to use any web server of your preferences. +3A: Python web server
+3B: XAMPP (Apache) web server.
+ (You can get it from https://www.apachefriends.org/index.html) +Optionally, you can start the Apache + manually via
[(part to Apache)]\apache\bin\httpd.exe . Or, use Terminal to enter sudo
+ apachectl start and sudo apachectl stop commands to start and stop Apache service.
+ +
+
+
+
+
Step 4: Test the 3D Web App
+ + Finally, you can access your 3D web app visualizing 3D city model on your web browser.+
+ + +
+
Overview of the software used
+-
+
- CesiumJS (Register for the token) +
- Web Server: Python 3 HTTP server or + Apache HTTP Server , is also in XAMPP included +
- Web browser: + Google Chrome or Firefox +
- FME Workbench 2021 Student License +
+
Other Example Use Cases
+ + ++
Copyright
+The texts and images provided in the blog are under the CC BY 3.0 DE license.
+Author
+ Thunyathep Santhanavanich (JOE) PhD candidate+ Faculty of Geomatics, Computer Science and Mathematics,
University of Applied Sciences Stuttgart, + Schellingstr. 24, D-70174 Stuttgart
+ thunyathep.santhanavanich@hft-stuttgart.de +