Presentation: EuroSciPy 2016

1. Martin Christen
FHNW – University of Applied Sciences and Arts Northwestern Switzerland
School of Architecture, Civil Engineering and Geomatics
Institute of Geomatics Engineering
martin.christen@fhnw.ch
@MartinChristen
Visualization of 3D City Models on Mobile
Phones using
@MartinChristen
GitHub: MartinChristen
GitLab: martin.christen

2. • Virtual Globe using WebGL
• Open Source Project started in
April 2011
• JavaScript Library for rapid
development of web-based
geospatial 3D applications
• Data Processing written in
C++ and Python
226 August 2016 2
OpenWebGlobe
Institute of Geomatics Engineering

3. 26 August 2016Institute of Geomatics Engineering 3
Previous Work: OpenWebGlobe – Virtual Globe using JavaScript / WebGL

4. 26 August 2016Institute of Geomatics Engineering 4
Motivation: 3D-Streaming in the web browser
MapData © OpenStreetMap contributors
BTh Hürbi/Daetwyler, MTh Lucas Oertli, 2013

5. 26 August 2016Institute of Geomatics Engineering 5
Streaming Example: 3D Geometry using OSM and “BOI” (worldwide streaming)
MTh Lucas Oertli, 2013

6. Hello World
26 August 2016Institute of Geomatics Engineering 6

7. 26 August 2016Institute of Geomatics Engineering 7
How does it work ?
EPSG:3857
(Visualization Pseudo Mercator)
WGS84 Ellipsoid
EPSG:4326
Proj.4 Library (pyproj): https://github.com/jswhit/pyproj
http://www.spatialreference.org
Global or local Datasets

8. 26 August 2016Institute of Geomatics Engineering 8
Quadtree based – fully compatible with 2D Maps*
256
256
256
(Image courtesy of Microsoft, Bing Maps)
*OpenStreetMap, Google Maps, Bing Maps, Yahoo Maps, …
“zoom-levels”

9. 26 August 2016Institute of Geomatics Engineering 9
Tile Types
2D Image Tile
RGB(A)
256x256 pixels
2D Vector Tile
Contains geometry. (if rasterized use Image Tile)
2D Elevation Tile
Contains Elevation Data
for example: 17x17 Values

10. 26 August 2016Institute of Geomatics Engineering 10
Special Tile Types
3D Geometry Tile
A 3D Geometry Tile contains
Texture(s) & arbitrary 3D Geometry
Within it‘s tile limit
Separate Geometry for each zoom level
GDAL Library: http://www.gdal.org

11. 26 August 2016Institute of Geomatics Engineering 11
OpenWebGlobe 2
http://www.openwebglobe.org (coming soon)
Currently in Development
A new version – completely redesigned
…with more Python! (Data processing is 98% Python code)
2

12. 26 August 2016Institute of Geomatics Engineering 12
Why a new Version ?
• 19 zoom levels over the whole planet results in about 360 billion tiles.
• 19 zoom levels is too much for many applications
• Many “real-world” applications/projects are oriented “local”. The need for a
global 3D-scene is overkill. (1 Building, 1 city, 1 country…)
• On mobile devices rendering 3D graphics is quite power consuming
• Navigation on a 3D-Globe is difficult for many people
• People still prefer 2D-Maps (fast, quick overview, …)
• …
• ...
• ...
• ...
• ...
2

13. 26 August 2016Institute of Geomatics Engineering 13
One new feature: Bringing together 2D Maps and 3D Globes
Another tile type!
Concept: Prerender a 3D Scene using a high quality offline 3D renderer using an
orthographic projection and create “2D” image tiles for each zoom-level
Constant, minimal bandwidth
regardless of the complexity of the
3D city model
MTh Markus Jung, 2014
(Similar approaches were already done by Döllner et al. and also go back to some concepts by Sutherland)
2

14. 26 August 2016Institute of Geomatics Engineering 14
Display in the Webbrowser as “2D Map”
MTh Markus Jung, 2014
2

15. 26 August 2016Institute of Geomatics Engineering 15
High Resolution Geometry doesn’t matter: Same download/render speed
MTh Markus Jung, 2014
2

16. 26 August 2016Institute of Geomatics Engineering 16
90 CityGML files (2.72 GB)
26'474 textures (1024x1024), uncompressed size ca. 77 GB
image data (orthophoto) ca. 430 GB uncompressed

17. 26 August 2016Institute of Geomatics Engineering 17
Another example: 3D Map using OpenStreetMap data
Source: BTh, Daniel Rettenmund 2015

18. 26 August 2016Institute of Geomatics Engineering 18
App: make visible the invisibke (Roman city of Augusta Raurica)

19. 26 August 2016Institute of Geomatics Engineering 19
Prerendering the Model: Color Map, Normal Map, Id-Map, Depth Map
Dynamic Lighting
Normal Map: for Object Identification:
Highlighting, special effects, …
Depth Map: for 3D Position, special effects, …
2

20. 26 August 2016Institute of Geomatics Engineering 20
PyRT (no logo yet!)
Rendering is done using pyRT (“Pirate”)
pyRT is a new project for rendering high quality images using Ray Tracing
(pyRT). By using global illumination, the results look quite nice. It also has Jupyter
integration (render within your notebook)
The project is currently in development and open sourced later. (MTh 2016: GPU
support / OpenCL, starting in September 2016)

21. 26 August 2016Institute of Geomatics Engineering 21
pyRT Example
from pyrt.math import *
from pyrt.geometry import Triangle
from pyrt.camera import PerspectiveCamera
from pyrt.renderer import SimpleRT
camera = PerspectiveCamera(640,480)
scene = Scene()
scene.Add(Triangle(Vec3(0, 0, 0), Vec3(0, 5, 0), Vec3(1, 5, 0)))
scene.SetCamera(camera)
engine = renderer.SimpleRT()
imgdata = engine.render(scene)

22. 26 August 2016Institute of Geomatics Engineering 22
And “real 3d” is of course still possible in OpenWebGlobe 2
Typical Scene: From a single building to a planet…

23. 26 August 2016Institute of Geomatics Engineering 23
Data Processing Architecture
Web Viewer
• HTML5, WebGL, JavaScript
Data Processing &
Storage/Cache
• Python (most parts)
• Some JavaScript (node.js)
• Some C++ / OpenCL
• Running on HPCC
Raw data

24. 26 August 2016Institute of Geomatics Engineering 24
All Architecture
3DPS (3D Portrayal Service)
Based on the OGC 3DPS Candidate
2
world3d.js
Real 3D
map3d.js
3D Map
map3d.js
world3d.js
owg2.js
Building
City
Country
Planet
…

25. 26 August 2016Institute of Geomatics Engineering 25
Docker
(Source: docker.io)
For development and deployment
(processing tools / sample webservice / …)

26. 26 August 2016
Institute of Geomatics Engineering
26
Questions ?
Contact me at martin.christen@fhnw.ch
@MartinChristen
GitHub: MartinChristen
GitLab: martin.christen