Skip to content

GitLab

Switch branch/tag
Find file Normal viewHistoryPermalink
VisualizationWorkshop.html 28.4 KB
Newer Older
Joe T.S.'s avatar
Upload New File  
Joe T.S. committed
1
2
3
4
5
6
7
8
9
10
11
12
13
14
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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388 
<!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="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
        integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <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>
    <div style="margin:20px; padding:30px">
        <h1>Web-based Visualization of the 3D City Models</h1>
        <h2>Part 1: Cesium Digital Globe and 3D Tiles</h2>
        <p>This article is intended to give a brief introduction to the web-based 3D visualization of 3D city
            models.&nbsp;For this purpose, the creation of a 3D visualization of Wermelskirchen with the digital globe
            Cesium is created using an example.&nbsp;Why Wermelskirchen and not New York?&nbsp;The 3D building model of
            Wermelskirchen is also freely available, and it is somewhat more manageable than New York.&nbsp;According to
            the
            motto &ldquo;Think big, start small&rdquo;, a workflow is presented step by step that shows how to create a
            visualization in Cesium based on a 3D building model in CityGML.&nbsp;For this purpose, the CityGML database
            is
            converted into the 3D Tiles data format, which has been optimized for web-based 3D visualization and
            displayed
            in Cesium.&nbsp;The first step is to show how the visualization is done in Cesium.&nbsp;It is assumed that
            the
            Wermelskirchen 3D building model is already available as 3D tiles.&nbsp;Then you can see something.&nbsp;In
            the
            second step, the conversion from CityGML to 3D Tiles is explained.</p>

        <div id="attachment_2304" style="width: 625px" class="wp-caption alignnone"><a
                href="https://www.coors-online.de/wp-content/uploads/2018/05/Wermelskirchen.png"><img
                    aria-describedby="caption-attachment-2304" class="wp-image-2304 "
                    src="https://www.coors-online.de/wp-content/uploads/2018/05/Wermelskirchen-1024x486.png"
                    alt="Visualisierung 3D-Gebäudemodell Wermelskirchen " width="615" height="292"
                    srcset="https://www.coors-online.de/wp-content/uploads/2018/05/Wermelskirchen-1024x486.png 1024w, https://www.coors-online.de/wp-content/uploads/2018/05/Wermelskirchen-300x142.png 300w, https://www.coors-online.de/wp-content/uploads/2018/05/Wermelskirchen.png 1474w"
                    sizes="(max-width: 615px) 100vw, 615px"></a>
            <p id="caption-attachment-2304" class="wp-caption-text">Visualization of the 3D building model in
                Wermelskirchen. Data source: GeoBasis NRW, 3D building model LoD2, <a
                    href="https://creativecommons.org/licenses/by/3.0/de/">CC BY 3.0 DE</a></p>
        </div>
        <a href="https://www.opengeodata.nrw.de/produkte/geobasis/3dg/"><button class="btn btn-primary">The NRW CityGML Data Set</button></a> <br>

        <p>&nbsp;</p>

        <h3>The Digital Globe Cesium</h3>
        <p>The Cesium digital globe can be downloaded from https://cesiumjs.org/downloads/. It should be run on its own
            web server. Basically, there are no restrictions as to which web server is used. In the Cesium installation
            guide (https://cesiumjs.org/tutorials/cesium-up-and-running/) Node.js is used. In the example shown here, Apache
            HTTP Server is used as the webserver. No matter which web server is used, after successful installation the
            digital globe with the usual "Hello World" should be visible.</p>
        <div id="attachment_2309" style="width: 623px" class="wp-caption alignnone"><a
                href="https://www.coors-online.de/wp-content/uploads/2018/05/Hello-World-Cesium.png"><img
                    aria-describedby="caption-attachment-2309" class=" wp-image-2309"
                    src="https://www.coors-online.de/wp-content/uploads/2018/05/Hello-World-Cesium-1024x653.png"
                    alt="Cesium Hello World" width="613" height="391"
                    srcset="https://www.coors-online.de/wp-content/uploads/2018/05/Hello-World-Cesium-1024x653.png 1024w, https://www.coors-online.de/wp-content/uploads/2018/05/Hello-World-Cesium-300x191.png 300w, https://www.coors-online.de/wp-content/uploads/2018/05/Hello-World-Cesium.png 1557w"
                    sizes="(max-width: 613px) 100vw, 613px"></a>
            <p id="caption-attachment-2309" class="wp-caption-text">Cesium Hello World, (<a
                    href="https://creativecommons.org/licenses/by/3.0/de/">CC BY 3.0 DE)</a></p>
        </div>
        <p>&nbsp;</p>
        <h2>3D Tiles</h2>
        <p>3D Tiles is a hierarchically structured scene graph in which a large 3D model is divided into tiles in order
            to
            realize a quick display in the web browser. The aim is to transfer a first simplified model to the web
            browser
            and display it as quickly as possible. The scene is shown in more detail with user interactions such as
            zooming
            in by reloading further tiles. A quadtree data structure is ideal for creating the tiles in 3D building
            models.
            An area is regularly divided into 4 quadrants, which are named according to the cardinal directions NE, SE,
            SW,
            and NW.</p>
        <a href="https://www.coors-online.de/wp-content/uploads/2018/05/3DTiles-3.png"><img class=" wp-image-2316"
                src="https://www.coors-online.de/wp-content/uploads/2018/05/3DTiles-3.png"
                alt="Ein Quadtree unterteilt das Gebiet regelmässig in die vier Quadranten NE, SE, NW, SW " width="670"
                height="668"
                srcset="https://www.coors-online.de/wp-content/uploads/2018/05/3DTiles-3.png 843w, https://www.coors-online.de/wp-content/uploads/2018/05/3DTiles-3-150x150.png 150w, https://www.coors-online.de/wp-content/uploads/2018/05/3DTiles-3-300x300.png 300w"
                sizes="(max-width: 670px) 100vw, 670px"></a>
        <p>Each square is further subdivided according to the same pattern.&nbsp;This creates a hierarchical tile
            structure
            that can also be found in the files of the 3D scene.</p>
        <div id="attachment_2317" style="width: 667px" class="wp-caption alignnone"><a
                href="https://www.coors-online.de/wp-content/uploads/2018/05/3DTiles-4.png"><img
                    aria-describedby="caption-attachment-2317" class=" wp-image-2317"
                    src="https://www.coors-online.de/wp-content/uploads/2018/05/3DTiles-4.png"
                    alt="Rekursive Unterteilung der NE Kachel." width="657" height="657"
                    srcset="https://www.coors-online.de/wp-content/uploads/2018/05/3DTiles-4.png 841w, https://www.coors-online.de/wp-content/uploads/2018/05/3DTiles-4-150x150.png 150w, https://www.coors-online.de/wp-content/uploads/2018/05/3DTiles-4-300x300.png 300w"
                    sizes="(max-width: 657px) 100vw, 657px"></a>
            <p id="caption-attachment-2317" class="wp-caption-text">Recursive subdivision of the NE tile. (<a
                    href="https://creativecommons.org/licenses/by/3.0/de/">CC BY 3.0 DE</a>)</p>
        </div>

        <p>A correspondingly generated data set from Wermelskirchen is&nbsp;made available in the&nbsp;<a
                href="https://www.coors-online.de/wp-content/uploads/2018/05/Wermelskirchen3DTiles.zip">Wermelskirchen3DTiles</a>&nbsp;archive.&nbsp;How
            this data set was created from the CityGML model is explained in the second part of this example.&nbsp;First
            of
            all, it is a matter of understanding the structure and visualizing it in the Cesium viewer.</p>
        <p>After downloading and unpacking the archive, the following file structure was created:</p>
        <div id="attachment_2320" style="width: 235px" class="wp-caption alignnone"><a
                href="https://www.coors-online.de/wp-content/uploads/2018/05/3DTiles-5.png"><img
                    aria-describedby="caption-attachment-2320" class=" wp-image-2320"
                    src="https://www.coors-online.de/wp-content/uploads/2018/05/3DTiles-5.png"
                    alt="Die Ordnerstruktur entspricht der Quadtree-Struktur" width="225" height="341"></a>
            <p id="caption-attachment-2320" class="wp-caption-text">The folder structure corresponds to the quadtree
                structure (<a href="https://creativecommons.org/licenses/by/3.0/de/">CC BY 3.0 DE</a>)</p>
        </div>
        <p>There&nbsp;Wermelskirchen3DTilesis a file in the&nbsp;folder&nbsp;tileset.json.&nbsp;The entire scene graph
            is
            included here, on the basis of which the Cesium Viewer decides which data is to be transmitted and when to
            be
            displayed on the screen.&nbsp;The file can be viewed in a normal editor such as Notepad ++.&nbsp;Since it is
            a
            JSON file, the use of a JSON plug-in for Notepad ++ such as&nbsp;<a
                href="https://sourceforge.net/projects/jsminnpp/">JSToolNpp</a>, or the VS Code are recommended.</p>
        <div id="attachment_2321" style="width: 804px" class="wp-caption alignnone"><a
                href="https://www.coors-online.de/wp-content/uploads/2018/05/3DTiles-JSON.png"><img
                    aria-describedby="caption-attachment-2321" class=" wp-image-2321"
                    src="https://www.coors-online.de/wp-content/uploads/2018/05/3DTiles-JSON-1024x893.png"
                    alt="Die Datei tileset.json enthält den Szenengraph, der vom Cesium Viewer verwendet wird. "
                    width="794" height="692"
                    srcset="https://www.coors-online.de/wp-content/uploads/2018/05/3DTiles-JSON-1024x893.png 1024w, https://www.coors-online.de/wp-content/uploads/2018/05/3DTiles-JSON-300x262.png 300w, https://www.coors-online.de/wp-content/uploads/2018/05/3DTiles-JSON.png 1193w"
                    sizes="(max-width: 794px) 100vw, 794px"></a>
            <p id="caption-attachment-2321" class="wp-caption-text">The tileset.json file contains the scene graph used
                by the Cesium Viewer. (<a href="https://creativecommons.org/licenses/by/3.0/de/">CC BY 3.0 DE)</a></p>
        </div>
        <p>The structure of the JSON file corresponds to the quadtree structure.&nbsp;For each quadrant, the coordinates
            of
            the envelope volume (boundingVolume), the display&nbsp;geometry of&nbsp;the tile (&nbsp;content), and the
            max.&nbsp;Defects errors compared to the original building geometry (geometry error).&nbsp;The actual
            display
            geometry is&nbsp;b3dmsaved&nbsp;in an external file in the binary format.&nbsp;The geometry is always saved
            as a
            triangular mesh.&nbsp;Textures and attribute data can also be stored.&nbsp;These files can be found in the
            folder structure according to the quadtree structure, e.g.
            under&nbsp;./b3dms/R/NE.b3dmand&nbsp;&nbsp;./b3dms/R/NE/NE.b3dm.&nbsp;A simplified 3D model is saved for
            each
            tile.&nbsp;The original building geometry can be found in the leaves of the scene graph, i.e. with tiles
            that
            are not further subdivided.&nbsp;Based on the geometry error in the tile (geometry error) and the point of
            view
            (camera) from which the scene is viewed, the Cesium Viewer decides which tiles are to be loaded and
            displayed.
        </p>
        <p>More details about 3D tiles can be found in&nbsp;<a
                href="https://cesium.com/blog/2015/08/10/introducing-3d-tiles/">Patrick Cozzi's blog</a>.</p>
        <p>In order to display the 3D tiles in Cesium, the files must be copied to the web server, e.g. in Apache in the
            directory htdocs.&nbsp;In addition, an HTML file must be created in which the model is linked to the Cesium
            viewer.&nbsp;The easiest way to do this is to&nbsp; copy the above-mentioned file HelloWorld.html from
            Cesium
            and
            add the following JavaScript.</p>
        <script src="https://gist.github.com/JoeThunyathep/f9aaf2d085582b55d36ea7fc7f79b845.js"></script>

        <p>The Cesium Viewer is instantiated in the first line.&nbsp;The instruction&nbsp;viewer.scene.primitives.add
            adds
            the tileset to the globe.&nbsp;This file contains all the information necessary to decide, depending on the
            camera position, which tile must be loaded and displayed in the globe.&nbsp;The following instructions
            define
            the initial position and orientation of the camera so that 3D building models can be seen when the website
            is
            loaded.</p>
        <p>The result is&nbsp;Wermelskirchen.html saved&nbsp;in the file.&nbsp;The first view of Wermelskirchen is shown
            in
            the following figure.</p>
        <div id="attachment_2312" style="width: 626px" class="wp-caption alignnone"><a
                href="https://www.coors-online.de/wp-content/uploads/2018/05/Wermelskirchen-2.png"><img
                    aria-describedby="caption-attachment-2312" class=" wp-image-2312"
                    src="https://www.coors-online.de/wp-content/uploads/2018/05/Wermelskirchen-2-1024x650.png"
                    alt="Hallo Wermelskirchen" width="616" height="391"
                    srcset="https://www.coors-online.de/wp-content/uploads/2018/05/Wermelskirchen-2-1024x650.png 1024w, https://www.coors-online.de/wp-content/uploads/2018/05/Wermelskirchen-2-300x190.png 300w, https://www.coors-online.de/wp-content/uploads/2018/05/Wermelskirchen-2.png 1567w"
                    sizes="(max-width: 616px) 100vw, 616px"></a>
            <p id="caption-attachment-2312" class="wp-caption-text">Wermelskirchen Data source: GeoBasis NRW, 3D
                building model LoD2, <a href="https://creativecommons.org/licenses/by/3.0/de/">CC BY 3.0 DE</a></p>
        </div>
        <hr>
        <h2>Part 2: Converting CityGML to 3D Tiles</h2>
        <p>The first part of the blog showed how a 3D city model can be visualized in the digital globe Cesium.&nbsp;But
            where does the required 3D tiles scene graph come from?</p>
        <div id="attachment_2304" style="width: 625px" class="wp-caption alignnone"><a
                href="https://www.coors-online.de/wp-content/uploads/2018/05/Wermelskirchen.png"><img
                    aria-describedby="caption-attachment-2304" class="wp-image-2304 "
                    src="https://www.coors-online.de/wp-content/uploads/2018/05/Wermelskirchen-1024x486.png"
                    alt="Visualisierung 3D-Gebäudemodell Wermelskirchen " width="615" height="292"
                    srcset="https://www.coors-online.de/wp-content/uploads/2018/05/Wermelskirchen-1024x486.png 1024w, https://www.coors-online.de/wp-content/uploads/2018/05/Wermelskirchen-300x142.png 300w, https://www.coors-online.de/wp-content/uploads/2018/05/Wermelskirchen.png 1474w"
                    sizes="(max-width: 615px) 100vw, 615px"></a>
            <p id="caption-attachment-2304" class="wp-caption-text">Visualization of the 3D building model in
                Wermelskirchen.&nbsp;Data source: GeoBasis NRW, 3D building model
                LoD2, <a href="https://creativecommons.org/licenses/by/3.0/de/">CC BY 3.0 DE</a></p>
        </div>
        <p>A 3D building model LoD 2 is available as a CityGML data set from Wermelskirchen via the Open Data Portal NRW
            and
            can&nbsp;<a href="https://www.opengeodata.nrw.de/produkte/geobasis/3dg/lod2_gml/lod2_gml_paketiert/" target="_blank">be
                downloaded</a>&nbsp;here.&nbsp;To create a 3D tile scene graph, you have to convert the CityGML
            dataset.&nbsp;To do this, you need software that can do that.&nbsp;There are enough options here:</p>
        <ul>
            <li><a href="https://www.safe.com/integrate/cesium-3d-tiles/">FME supports 3D </a>tiles since&nbsp;version
                FME
                2017.</li>
            <li>Companies such as&nbsp;<a href="http://www.virtualcitysystems.de/">virtualcitySYSTEMS</a> and&nbsp;<a
                    href="https://cesium.com/collaborate-with-us/">Cesium</a>&nbsp;offer the conversion of CityGML to 3D
                Tiles as a service or such a converter is part of the product range</li>
            <li>The&nbsp;<a href="https://georocket.io/">GeoRocket</a>geodatabase with the additional GeoToolbox from
                Fraunhofer IGD includes a CityGML to 3D tiles converter</li>
        </ul>
        <p>Unfortunately, there is currently no free software for download that CityGML can use to convert to 3D
            tiles.&nbsp;In this example the GeoToolbox from Fraunhofer IGD is used.</p>
        <p>The CityGML model Wermelskirchen consists of numerous individual files.&nbsp;These files are first combined
            into
            one large file&nbsp;wermelskirchen.gml.&nbsp;This can be done, for example, by&nbsp;importing&nbsp;the
            individual files into the&nbsp;<a href="https://www.3dcitydb.org/3dcitydb/3dcitydbhomepage/">3D
                CityDB</a>&nbsp;or&nbsp;<a href="https://georocket.io/">GeoRocket</a>&nbsp;database and then exporting
            the
            entire area into a CityGML file.</p>
        <p>With the instruction</p>

        <code>geo-toolbox-3dtiles --in ".\in\wermelskirchen.gml" --out .\out\ --srsInCode 25832 --strategy quadTree
                --doubleSided true</code>

        <p> Then, the CityGML model is converted to 3D tiles.&nbsp;A quadtree structure is used as the strategy for
            tiling.&nbsp;The EPSG code of the input data set is&nbsp;srsInCode specified&nbsp;with the
            parameter&nbsp;.&nbsp;The parameter&nbsp;double-sided defines whether a polygon is visible from both sides
            (true) or only from the direction opposite to the surface normal (false), i.e. from the outside.&nbsp;With
            this
            definition, double sided true, incorrectly oriented areas are no longer visible.&nbsp;Possible errors in the
            geometry remain, but you just don't see them anymore.</p>
        <p>The result is the&nbsp;file structure of 3D Tiles described&nbsp;in the&nbsp; first part of the
                blog.&nbsp;This still has to be made available on a web server, and the 3D model is ready in the web
            browser.&nbsp;If you look closely, there is unfortunately still something to be done.&nbsp;Wermelskirchen
            has
            lifted off and hovered over the globe.&nbsp;This is because the globe does not use a terrain model, the
            ground
            level is always zero.&nbsp;The building geometry uses the height above sea level.&nbsp;Therefore the
            buildings
            are in the air.</p>
        <div id="attachment_2331" style="width: 774px" class="wp-caption alignnone"><a
                href="https://www.coors-online.de/wp-content/uploads/2018/05/CityGML2-3Dtiles.png"><img
                    aria-describedby="caption-attachment-2331" class=" wp-image-2331"
                    src="https://www.coors-online.de/wp-content/uploads/2018/05/CityGML2-3Dtiles-1024x539.png"
                    alt="Wermelskirchen schwebt über dem Globus" width="764" height="402"
                    srcset="https://www.coors-online.de/wp-content/uploads/2018/05/CityGML2-3Dtiles-1024x539.png 1024w, https://www.coors-online.de/wp-content/uploads/2018/05/CityGML2-3Dtiles-300x158.png 300w, https://www.coors-online.de/wp-content/uploads/2018/05/CityGML2-3Dtiles.png 1919w"
                    sizes="(max-width: 764px) 100vw, 764px"></a>
            <p id="caption-attachment-2331" class="wp-caption-text">Wermelskirchen hovers over the globe. Datenquelle:
                GeoBasis NRW, 3D-Gebäudemodell LoD2, <a href="https://creativecommons.org/licenses/by/3.0/de/">CC BY 3.0
                    DE</a></p>
        </div>

        <p>What can you do to avoid the floating buildings?&nbsp;Either the building floor plans are shifted to the
            height z
            = 0 or a terrain model is used.</p>
        <p>In order to bring the buildings onto the globe, the height of the floor plan polygon of a building is
            subtracted
            from all coordinates of the respective building geometry.&nbsp;The floor plan is then at z = 0, otherwise,
            the
            building geometry remains the same.&nbsp;The software solution&nbsp;clamp2groundfrom Athanasios Koukofikis,
            HFT
            Stuttgart, can be used for this.&nbsp;To do this, the&nbsp;<a
                href="https://www.coors-online.de/wp-content/uploads/2018/05/clamp2ground.zip">clamp2ground</a>&nbsp;archive&nbsp;must
            be&nbsp;unpacked.&nbsp;The CityGML file is&nbsp;clamp2ground\in\copied&nbsp;into the folder.&nbsp;Then
            the&nbsp;clamp2groundsoftware is started with the .bat or .sh file of the same name.&nbsp;As a result, the
            transformed CityGML file is then in the folder&nbsp;clamp2ground\out\.&nbsp;If the result file is converted
            to
            3D tiles as described above, the buildings are on the globe.</p>
        <div id="attachment_2336" style="width: 778px" class="wp-caption alignnone"><a
                href="https://www.coors-online.de/wp-content/uploads/2018/05/CityGML2-3Dtiles-2.png"><img
                    aria-describedby="caption-attachment-2336" class=" wp-image-2336"
                    src="https://www.coors-online.de/wp-content/uploads/2018/05/CityGML2-3Dtiles-2-1024x515.png"
                    alt="Wermelskirchen auf den Cesium Globus projiziert" width="768" height="386"
                    srcset="https://www.coors-online.de/wp-content/uploads/2018/05/CityGML2-3Dtiles-2-1024x515.png 1024w, https://www.coors-online.de/wp-content/uploads/2018/05/CityGML2-3Dtiles-2-300x151.png 300w, https://www.coors-online.de/wp-content/uploads/2018/05/CityGML2-3Dtiles-2.png 1917w"
                    sizes="(max-width: 768px) 100vw, 768px"></a>
            <p id="caption-attachment-2336" class="wp-caption-text">Wermelskirchen projected onto the Cesium globe.
                Datenquelle: GeoBasis NRW, 3D-Gebäudemodell LoD2, <a
                    href="https://creativecommons.org/licenses/by/3.0/de/">CC BY 3.0 DE</a></p>
        </div>

        <p>Alternatively, a terrain model can also be integrated into the Cesium Globus.&nbsp;To do this, the JavaScript
            in
            the file&nbsp;Wermelskirchen.html must be expanded.&nbsp;The following instruction tells Cesium that a 3D
            terrain model should be used for the display.&nbsp;The terrain model is&nbsp;provided&nbsp;by the&nbsp;<a
                href="https://cesium.com/blog/2018/03/01/introducing-cesium-world-terrain/">Cesium World
                Terrain</a>&nbsp;Server by&nbsp;default.</p>

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

        <p>Unfortunately, the building and the terrain do not fit together perfectly, which is probably due to the
            resolution of the terrain model.&nbsp;Other terrain models can also be integrated, as described in
            the&nbsp;<a href="https://cesiumjs.org/tutorials/Terrain-Tutorial/">Cesium tutorial</a>&nbsp;.&nbsp;The use
            of
            the&nbsp;<a href="https://www.opengeodata.nrw.de/produkte/geobasis/hm/">terrain model, which is provided by
                GeoBasis NRW as Open Data</a>, is a nice exercise.&nbsp;Good luck with that.</p>
        <div id="attachment_2337" style="width: 719px" class="wp-caption alignnone"><a
                href="https://www.coors-online.de/wp-content/uploads/2018/05/CityGML2-3Dtiles-3.png"><img
                    aria-describedby="caption-attachment-2337" class=" wp-image-2337"
                    src="https://www.coors-online.de/wp-content/uploads/2018/05/CityGML2-3Dtiles-3-1024x537.png"
                    alt="Wermelskirchen Gebäudemodell mit Geländemodell" width="709" height="372"
                    srcset="https://www.coors-online.de/wp-content/uploads/2018/05/CityGML2-3Dtiles-3-1024x537.png 1024w, https://www.coors-online.de/wp-content/uploads/2018/05/CityGML2-3Dtiles-3-300x157.png 300w, https://www.coors-online.de/wp-content/uploads/2018/05/CityGML2-3Dtiles-3.png 1919w"
                    sizes="(max-width: 709px) 100vw, 709px"></a>
            <p id="caption-attachment-2337" class="wp-caption-text">Wermelskirchen building model with terrain model, data source: terrain model: Cesium World Terrain, building model GeoBasis NRW, 3D building model LoD2, <a
                    href="https://creativecommons.org/licenses/by/3.0/de/">CC BY 3.0 DE</a></p>
        </div>
        <p>&nbsp;</p>
        <hr>
        <h2>Overview of the software used</h2>
        <ul>
            <li><a href="https://cesiumjs.org/downloads/">CesiumJS</a></li>
            <li>Web Server:&nbsp;<a href="https://httpd.apache.org/">Apache HTTP Server</a>&nbsp;, is also in&nbsp;<a
                    href="https://www.apachefriends.org/de/index.html">XAMPP</a>&nbsp;included</li>
            <li>Editor:&nbsp;<a href="https://notepad-plus-plus.org/">Notepad ++</a>&nbsp;with JSON plugin&nbsp;<a
                    href="https://sourceforge.net/projects/jsminnpp/">JSToolNpp</a></li>
            <li>Web browser:&nbsp;<a href="https://www.mozilla.org/de/firefox/new/">Firefox</a>&nbsp;v56.0</li>
            <li><a
                    href="https://www.coors-online.de/wp-content/uploads/2018/05/clamp2ground.zip">clamp2ground</a>&nbsp;,
                Athanasios Koukofikis, HFT Stuttgart</li>
            <li>geotoolbox CityGML to 3D Tiles converter: unfortunately not available for download,
                please&nbsp;contact&nbsp;<a
                    href="https://www.igd.fraunhofer.de/institut/ueber-uns/mitarbeiter/ralf-gutbell">Ralf Gutbell</a>,
                Fraunhofer IGD.</li>
        </ul>
        <h2>Credentials</h2>
        <ul>
            <li>Blog&nbsp;<a
                    href="https://dragons8mycat.com/2017/09/05/creating-a-cesium-virtual-globe-with-v1-36/">dragons8mycat:
                    "Creating a Cesium virtual globe with v1.36" from 5.9.2017</a></li>
            <li>Tim Rivenbark,&nbsp;<a href="https://cesiumjs.org/demos/NewYork/">3D building model New York in Cesium,
                    5.5.2017</a></li>
        </ul>
        <h2>Further work</h2>
        <ul>
            <li>Coors, V. (Ed.): OGC Testbed 13 - 3D Tiles and I3S Interoperability and Performance Engineering Report,
                5.3.2018,&nbsp;<a
                    href="http://docs.opengeospatial.org/per/17-046.html">http://docs.opengeospatial.org/per/17-046.html</a>,&nbsp;<a
                    href="http://docs.opengeospatial.org/per/17-046.pdf">PDF</a></li>
            <li>Hagedorn, B., Thum, S. Reitz, T., Coors, V., and Gutbell, P. (Eds.): OGC 3D Portrayal Service 1.0,
                13.9.2017,&nbsp;<a
                    href="http://docs.opengeospatial.org/is/15-001r4/15-001r4.html">http://docs.opengeospatial.org/is
                    /15-001r4/15-001r4.html</a></li>
        </ul>
        <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>
    </div>


    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
        integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
        integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous"></script>
</body>

</html>

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