Skip to content

GitLab

Switch branch/tag
Find file Normal viewHistoryPermalink
VisualizationWorkshop3D.html 11.9 KB
Newer Older
Joe TS Dell's avatar
update  
Joe TS Dell committed
1
2
3
4
5
6
7
8
9
10 
<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="source/bootstrap.min.css">
Joe TS Dell's avatar
update    
Joe TS Dell committed
11 
    <link rel="stylesheet" href="index.css">
Joe TS Dell's avatar
up    
Joe TS Dell committed
12
13
14 
    <link rel="icon" 
      type="image/ico" 
      href="favicon.ico">
Joe TS Dell's avatar
update  
Joe TS Dell committed
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43 
    <title>Web-based Visualization of the 3D City Models</title>
    <style>
        table {
            border: 0px;
            padding: 0px;
            margin: 0px;
            border-collapse: collapse;
        }

        td {
            border-right: 1px solid black;
            padding: 2px 2px 5px 2px;
            margin: 0px;
        }

        th {
            border-bottom: 1px solid black;
            padding: 5px;
            margin: 0px;
        }

        tr {
            padding: 0px;
            margin: 0px;
        }
    </style>
</head>

<body>
Joe TS Dell's avatar
update    
Joe TS Dell committed
44
45
46
47
48
49
50
51
52
53
54 
    <div class="section topperStyle">
        <!-- <a href="https://www.hft-stuttgart.de"><img src="HFT_logo.jpg"
                style='width: 200px;margin-right: 20px;' /></a>
        <a
            href="http://www.steinbeis.de/de/experten/steinbeis-unternehmen-und-partner/detail.html?tx_z7suprofiles_detail%5Bprofile%5D=2618&cHash=db7d30240e803db2f04ccfd0425eb374"><img
                src="https://www.hft-stuttgart.de/Forschung/Transfer/Steinbeislogo1.gif" /></a>
        <br> The University of Applied Sciences Stuttgart
        <h1>Examples of our projects and applications</h1> -->
        <div class="row">
            <div class="col">
                <h1>Creating Interactive 3D Web Maps from 3D City Models with CesiumJS</h1>
Joe TS Dell's avatar
up    
Joe TS Dell committed
55 
                <h6>by <a href="https://www.hft-stuttgart.de/p/thunyathep-santhanavanich">Joe T.S.</a></h6>
Joe TS Dell's avatar
update    
Joe TS Dell committed
56
57
58
59
60
61
62
63 
            </div>
            <div class="col-md-auto">
                <!-- <a href="https://www.hft-stuttgart.de"><img src="HFT_logo.jpg"
                        style='width: 200px;margin-right: 20px;' /></a> -->
                University of Applied Science Stuttgart
            </div>
        </div>
    </div>
Joe TS Dell's avatar
update  
Joe TS Dell committed
64 
    <div style="margin:20px; padding:30px">
Joe TS Dell's avatar
update    
Joe TS Dell committed
65 
        <h1>Introduction</h1>
Joe TS Dell's avatar
up    
Joe TS Dell committed
66
67
68
69
70
71
72 
        <p>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.</p>
Joe TS Dell's avatar
update    
Joe TS Dell committed
73
74
75
76
77
78
79 

        <img src="img/6.JPG" alt="" style="width: 800px;">
        <br>(An Expected Output from This Workshop — 3D Web App with 3D Semantic Building Models in Den Haag Area)
        <br>
        <hr>
        <h3>Architecture and Workflow</h3>
        <img src="img/architecture.JPG" alt="" style="width: 600px;"><br>
Joe TS Dell's avatar
up    
Joe TS Dell committed
80
81 
        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.
Joe TS Dell's avatar
update    
Joe TS Dell committed
82
83 
        <br> <b>So, let’s get started and create each component together</b> <br>
        <hr>
Joe TS Dell's avatar
update  
Joe TS Dell committed
84 
        <h3>Step 1: Preparing 3D City Models</h3>
Joe TS Dell's avatar
update    
Joe TS Dell committed
85
86
87 
        <p>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.</p>
Joe TS Dell's avatar
up    
Joe TS Dell committed
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103 
        <li> Download the CityGML dataset from
        <li style="list-style-type:none">
            <ul>
                <li>
                    Den Haag (NL) 3D building model Dataset: <a
                        href="https://denhaag.dataplatform.nl/#/data/36049d1a-4a0f-4c5d-8adb-21dbfb7252f9"
                        target="_blank">https://denhaag.dataplatform.nl/#/data/36049d1a-4a0f-4c5d-8adb-21dbfb7252f9</a>
                </li>
                <li>
                    Nordrhein-westfalen (Germany) 3D building model Dataset: <a
                        href="https://www.opengeodata.nrw.de/produkte/geobasis/3dg/lod2_gml/"
                        target="_blank">https://www.opengeodata.nrw.de/produkte/geobasis/3dg/lod2_gml/</a>
                </li>
            </ul>
        </li>
        </li>
Joe TS Dell's avatar
update  
Joe TS Dell committed
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123 
        <li> Using the FME Workbench to convert the CityGML models to 3D Tiles format. Starting by opening the FME
            Workbench, Drag and drop all CityGML models to the FME window.<br>
            <img src="img/1a.JPG" alt="" style="width: 800px;"><br>
        </li>
        <li>
            Select input Format "CityGML" and Workflow option "Single Merged Feature Type".<br>
            <img src="img/1.JPG" alt="" style="width: 400px;"><br>
        </li>
        <li>
            Click on "Add a new writer" button and select Format "Cesium 3D Tiles"<br>
            <img src="img/2.JPG" alt="" style="width: 400px;"><br>
        </li>
        <li>
            The workflow should look like following figure. Click Run and then wait until the conversion complete. Then,
            the final 3D Tile City Models will be in the destination folder you input.<br>
            <img src="img/3.JPG" alt="" style="width: 600px;"><br>

        </li>
        <hr>
        <h3>Step 2: Preparing HTML for CesiumJS</h3>
Joe TS Dell's avatar
update    
Joe TS Dell committed
124 
        In this step, we will create an HTML web document containing the 3D Web Globe using CesiumJS library. You can
Joe TS Dell's avatar
up    
Joe TS Dell committed
125 
        use any code Idle or editor. You can create the document with
Joe TS Dell's avatar
update    
Joe TS Dell committed
126
127
128 
        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.
Joe TS Dell's avatar
update  
Joe TS Dell committed
129
130
131
132
133
134 

        <script src="https://gist.github.com/JoeThunyathep/0a97950f69952ea13759e0f245416604.js"></script>

        <hr>
        <h3>Step 3: Host the 3D Web App on the Web Server</h3>
        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
Joe TS Dell's avatar
up    
Joe TS Dell committed
135
136
137
138
139
140
141
142 
        are freely to use any web server of your preferences.
        <h5>3A: Python web server</h5>
        <li>Install Python (3.xx)</li>
        <li>open the CMD (Command Prompt) and check the python version <kbd>python --version</kbd>. If you get an error
            message, please check your python installation.</li>
        <li>Start the server by <kbd>python -m http.server 80</kbd> </li>

        <h5>3B: XAMPP (Apache) web server.</h5>
Joe TS Dell's avatar
update  
Joe TS Dell committed
143
144 
        (You can get it from <a
            href="https://www.apachefriends.org/index.html">https://www.apachefriends.org/index.html</a>)
Joe TS Dell's avatar
update    
Joe TS Dell committed
145 
        <li>Install XAMPP or Apache.</li>
Joe TS Dell's avatar
up    
Joe TS Dell committed
146
147
148 
        <li>Open XAMPP Control Panel and start Apache HTTP web service. <br>Optionally, you can start the Apache
            manually via <code> [(part to Apache)]\apache\bin\httpd.exe </code>. Or, use Terminal to enter <code>sudo
                apachectl start</code> and <code>sudo apachectl stop</code> commands to start and stop Apache service.
Joe TS Dell's avatar
update    
Joe TS Dell committed
149 
            <br>
Joe TS Dell's avatar
update  
Joe TS Dell committed
150
151 
            <img src="img/4.JPG" alt="" style="width: 400px;"><br>
        </li>
Joe TS Dell's avatar
update    
Joe TS Dell committed
152
153 
        <li>Place the web document (denHaagApp.html) from step 2 and a folder of 3D Tiles city models from step 1 in the
            C:\xampp\htdocs directory.<br>
Joe TS Dell's avatar
update  
Joe TS Dell committed
154
155 
            <img src="img/5.JPG" alt="" style="width: 800px;"><br>
        </li>
Joe TS Dell's avatar
update    
Joe TS Dell committed
156
157
158
159 
        <li>In the html web document, update the URL value to the tileset.json file of your 3D Tiles model in the htdocs
            folder. For example, if your 3D Tiles directory is at C:\xampp\htdocs\3dtile\tileset.json. You should set
            the url value to "./3dtile/tileset.json" or "http://localhost/3dtile/tileset.json" as APACHE will serve
            everything in the htdocs directory relatively to "http://localhost".
Joe TS Dell's avatar
update  
Joe TS Dell committed
160 
        </li>
Joe TS Dell's avatar
update    
Joe TS Dell committed
161
162 
        <hr>
        <h3>Step 4: Test the 3D Web App</h3>
Joe TS Dell's avatar
up    
Joe TS Dell committed
163
164
165
166 

        Finally, you can access your 3D web app visualizing 3D city model on your web browser.<br>
        <img src="img/6.JPG" alt="" style="width: 800px;"><br>
Joe TS Dell's avatar
update  
Joe TS Dell committed
167
168
169
170 

        <hr>
        <h2>Overview of the software used</h2>
        <ul>
Joe TS Dell's avatar
up    
Joe TS Dell committed
171
172
173 
            <li><a href="https://cesiumjs.org/downloads/">CesiumJS</a> (Register for the token)</li>
            <li>Web Server: Python 3 HTTP server or 
                &nbsp;<a href="https://httpd.apache.org/">Apache HTTP Server</a>&nbsp;, is also in&nbsp;<a
Joe TS Dell's avatar
update  
Joe TS Dell committed
174 
                    href="https://www.apachefriends.org/de/index.html">XAMPP</a>&nbsp;included</li>
Joe TS Dell's avatar
up    
Joe TS Dell committed
175
176
177 
            <li>Web browser:
                Google Chrome or &nbsp;<a href="https://www.mozilla.org/de/firefox/new/">Firefox</a></li>
            <li>FME Workbench 2021 <a href="https://www.safe.com/free-fme-licenses/students/">Student License</a> </li>
Joe TS Dell's avatar
update  
Joe TS Dell committed
178 
        </ul>
Joe TS Dell's avatar
update    
Joe TS Dell committed
179
180 
        <hr>
        <h2>Other Example Use Cases</h2>
Joe TS Dell's avatar
update    
Joe TS Dell committed
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198 
        <!-- <div class="card" style="width: 25rem;">
            <img class="card-img-top" src="img/StreamlinesMultipart.png" alt="Card image cap">
            <div class="card-body">
                <h5 class="card-title">Wind Simulation Platform</h5>
                <p class="card-text">in the Cesium 3D Web Application</p>
                <a href="https://transfer.hft-stuttgart.de/pages/urbanvis/index.html" class="btn btn-primary">Go</a>
            </div>
        </div>

        <div class="card" style="width: 25rem;">
            <img class="card-img-top" src="img/Deutschland3D.JPG" alt="Card image cap">
            <div class="card-body">
                <h5 class="card-title">Deutschland in 3D</h5>
                <p class="card-text">3D Web Application Visualizing German Cities</p>
                <a href="https://deutschland.virtualcitymap.de/#/" class="btn btn-primary">Go</a>
            </div>
        </div> -->
Joe TS Dell's avatar
up    
Joe TS Dell committed
199
200
201
202
203
204
205
206 
        <li><a href="https://transfer.hft-stuttgart.de/pages/urbanvis/index.html">Wind Simulation Platform</a> in the
            Cesium 3D Web Application</li>
        <li><a href="https://steinbeis-3dps.eu/3DGeoVolumes/">3D Visualization Server</a> for hosting 3D building models
            created by the 3D GeoVolumes API (3D Container API)Specification</li>
        <li><a href="https://steinbeis-3dps.eu/geoportal_3diot/#/">OGC 3D IoT Pilot - Sejong, South Korea</a> with air
            quality sensor data (SensorThings API)</li>
        <li><a href="https://deutschland.virtualcitymap.de/#/">Deutschland in 3D</a> 3D Web Application Visualizing
            German Cities</li>
Joe TS Dell's avatar
update    
Joe TS Dell committed
207 
        <li>Explore other <a href="https://3d.bk.tudelft.nl/opendata/opencities/">CityGML Datasets</a></li>
Joe TS Dell's avatar
up    
Joe TS Dell committed
208
Joe TS Dell's avatar
update    
Joe TS Dell committed
209 
        <hr>
Joe TS Dell's avatar
update  
Joe TS Dell committed
210
211
212
213
214
215
216
217
218
219
220
221
222
223 
        <h2>Copyright</h2>
        <p>The texts and images provided in the blog are under the&nbsp;<a
                href="https://creativecommons.org/licenses/by/3.0/de/">CC BY 3.0 DE</a>&nbsp;license.</p>
        <h2>Author</h2>
        <b>Thunyathep Santhanavanich (JOE)</b> PhD candidate<br>
        Faculty of Geomatics, Computer Science and Mathematics, <br>University of Applied Sciences Stuttgart,
        Schellingstr. 24, D-70174 Stuttgart<br>
        <a href="mailto:thunyathep.santhanavanich@hft-stuttgart.de">thunyathep.santhanavanich@hft-stuttgart.de</a>
    </div>


    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
Joe TS Dell's avatar
up    
Joe TS Dell committed
224
225 
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous">
    </script>
Joe TS Dell's avatar
update  
Joe TS Dell committed
226 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
Joe TS Dell's avatar
up    
Joe TS Dell committed
227
228 
        integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous">
    </script>
Joe TS Dell's avatar
update  
Joe TS Dell committed
229
230
231
232 
    <script src="source/bootstrap.min.js"></script>
</body>

</html>

Dies ist die Gitlab-Instanz des Transferportals der Hochschule für Technik Stuttgart. Hier geht es zurück zum Portal