Using glTF for streaming CityGML 3D City Models

15
CREATE MAINTAIN PUBLISH Using glTF for streaming CityGML 3D City Models Web 3D 2016 Anaheim CA June 23 2016 Arne Schilling, Jannes Bolling, Claus Nagel virtualcitySYSTEMS GmbH Berlin, Germany

Transcript of Using glTF for streaming CityGML 3D City Models

Page 1: Using glTF for streaming CityGML 3D City Models

CREATE MAINTAIN PUBLISH

Using glTF for streaming CityGML 3D City Models

Web 3D 2016 Anaheim CAJune 23 2016

Arne Schilling, Jannes Bolling, Claus NagelvirtualcitySYSTEMS GmbHBerlin, Germany

Page 2: Using glTF for streaming CityGML 3D City Models

Arne Schilling - Using glTF for streaming CityGML 3D City Models2

GDI Integration/Use Cases Technical Requirements Approach Data Preparation Batched 3D Model 3D Tiles Performance Tests Conclusions

Outline

Page 3: Using glTF for streaming CityGML 3D City Models

3 Arne Schilling - Using glTF for streaming CityGML 3D City Models

GDI Integration

ETL Processes

VisualizationSTEP

Simulation

Data Access

Page 4: Using glTF for streaming CityGML 3D City Models

4 Arne Schilling - Using glTF for streaming CityGML 3D City Models

Use Cases

Online visualization of highly detailed city models

Web Mapping projects Analyzing 3D building data sets Public Relations / development projects Planning underground infrastructure Analyzing urban simulation results

Page 5: Using glTF for streaming CityGML 3D City Models

5 Arne Schilling - Using glTF for streaming CityGML 3D City Models

Easy browser integration Lightweight 3D viewer based on HTML5 / CSS / WebGL No plugins! Java/Flash/Silverlight not an option. Solution must run on mobile devices as well Efficient Streaming Object identification Access to object properties Custom styling based on object properties Display of buildings, trees, street light, custom terrain,

underground networks, POIs Royalty-free formats preferred

Technical Requirements

Page 6: Using glTF for streaming CityGML 3D City Models

6 Arne Schilling - Using glTF for streaming CityGML 3D City Models

Cesium Framwork for Rendering• Open Source 3D web globe and Javascript API (

http://cesiumjs.org)• Based on open standards (WebGL, glTF)• Support for geo-services: WMS, WMTS , TMS, OSM, Bing

Maps etc.• OpenLayers integration for Vector overlays• Support for custom object layers• Shadow mapping recently added• Supports object identification and object attributes via

sophisticated B3DM format (GIS features) Data Management in 3DCityDB

• Based on CityGML open OGC standard• Semantic information • Supports buildings, bridges, vegetation, street furniture,

tunnels etc.

Approach

Page 7: Using glTF for streaming CityGML 3D City Models

7 Arne Schilling - Using glTF for streaming CityGML 3D City Models

CityGML to glTF B3DM conversion using custom converter• Integrated into online publishing platform

Data Preparation

Spatial Subdivision

Coordinate Transformation

Appearance Filtering

Triangulation

LoD Filtering

Texture Atlas Generation 3D Tiles / B3DM files

Page 8: Using glTF for streaming CityGML 3D City Models

8 Arne Schilling - Using glTF for streaming CityGML 3D City Models

Currently being developed Batches allow defining features by vertex attributes rather than

geometries• -> Mesh configuration independant from objects ->

performance boost• -> Allows to create more efficient texture atlas

Features can still be highlighted & queried Batch Ids are linked to an attribute table

B3DM - Batched 3D Model

Page 9: Using glTF for streaming CityGML 3D City Models

9 Arne Schilling - Using glTF for streaming CityGML 3D City Models

Batched 3D Model (B3DM) Instanced 3D Model (I3DM) Point Clouds (PNTS) Composite (CMPT)

3D Tiles

B3DM for buildings Trees as I3DM

Point cloud as PNTS

Page 10: Using glTF for streaming CityGML 3D City Models

10 Arne Schilling - Using glTF for streaming CityGML 3D City Models

3.180 buildings 64.000 Polygons 50.000 Texture Images

Performance Tests

Page 11: Using glTF for streaming CityGML 3D City Models

11 Arne Schilling - Using glTF for streaming CityGML 3D City Models

Performance Tests – scene elements

Page 12: Using glTF for streaming CityGML 3D City Models

12 Arne Schilling - Using glTF for streaming CityGML 3D City Models

Performance Tests – File Sizes

60 MB

Image Data

Numbers in MB

Page 13: Using glTF for streaming CityGML 3D City Models

13 Arne Schilling - Using glTF for streaming CityGML 3D City Models

Conclusions

B3DM/glTF great for streaming 3D city models• Small files sizes• Can be parsed quickly by JavaScript clients• Optimal packaging

Handling of multiple LODs difficult Performance bottleneck is updating models in JavaScript

clients (Cesium)

Page 14: Using glTF for streaming CityGML 3D City Models

14 Arne Schilling - Using glTF for streaming CityGML 3D City Models

Berlin Economic Atlas• http://www.businesslocationcenter.de/wab/maps/main

/ Berlin virtualcityMAP demo

• http://hosting.virtualcitysystems.de/demos/berlin/vcm/index.html?lang=en

Berlin Open Data download portal• http://www.businesslocationcenter.de/berlin3d-downlo

adportal/

Demo Links

Page 15: Using glTF for streaming CityGML 3D City Models

Thank You

Arne SchillingvirtualcitySYSTEMS [email protected]://www.virtualcitysystems.de