View
219
Download
0
Category
Preview:
Citation preview
Martin ChristenFHNW – University of Applied Sciences and Arts Northwestern SwitzerlandSchool of Architecture, Civil Engineering and GeomaticsInstitute of Geomatics Engineering
martin.christen@fhnw.ch@MartinChristen
Visualization of 3D City Models on Mobile Phones using
@MartinChristenGitHub: MartinChristenGitLab: martin.christen
• Virtual Globe using WebGL
• Open Source Project started in April 2011
• JavaScript Library for rapid development of web-basedgeospatial 3D applications
• Data Processing written in C++ and Python
226 August 2016 2
OpenWebGlobe
Institute of Geomatics Engineering
26 August 2016Institute of Geomatics Engineering 3
Previous Work: OpenWebGlobe – Virtual Globe using JavaScript / WebGL
26 August 2016Institute of Geomatics Engineering 4
Motivation: 3D-Streaming in the web browser
MapData © OpenStreetMap contributorsBTh Hürbi/Daetwyler, MTh Lucas Oertli, 2013
26 August 2016Institute of Geomatics Engineering 5
Streaming Example: 3D Geometry using OSM and “BOI” (worldwide streaming)
MTh Lucas Oertli, 2013
Hello World
26 August 2016Institute of Geomatics Engineering 6
26 August 2016Institute of Geomatics Engineering 7
How does it work ?
EPSG:3857(Visualization Pseudo Mercator)
WGS84 EllipsoidEPSG:4326
Proj.4 Library (pyproj): https://github.com/jswhit/pyproj
http://www.spatialreference.org
Global or local Datasets
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”
26 August 2016Institute of Geomatics Engineering 9
Tile Types
2D Image TileRGB(A)256x256 pixels
2D Vector TileContains geometry. (if rasterized use Image Tile)
2D Elevation TileContains Elevation Datafor example: 17x17 Values
26 August 2016Institute of Geomatics Engineering 10
Special Tile Types
3D Geometry TileA 3D Geometry Tile containsTexture(s) & arbitrary 3D GeometryWithin it‘s tile limit
Separate Geometry for each zoom level
GDAL Library: http://www.gdal.org
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
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
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
26 August 2016Institute of Geomatics Engineering 14
Display in the Webbrowser as “2D Map”
MTh Markus Jung, 2014
2
26 August 2016Institute of Geomatics Engineering 15
High Resolution Geometry doesn’t matter: Same download/render speed
MTh Markus Jung, 2014
2
26 August 2016Institute of Geomatics Engineering 16
90 CityGML files (2.72 GB)26'474 textures (1024x1024), uncompressed size ca. 77 GBimage data (orthophoto) ca. 430 GB uncompressed
26 August 2016Institute of Geomatics Engineering 17
Another example: 3D Map using OpenStreetMap data
Source: BTh, Daniel Rettenmund 2015
26 August 2016Institute of Geomatics Engineering 18
App: make visible the invisibke (Roman city of Augusta Raurica)
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
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 Jupyterintegration (render within your notebook)
The project is currently in development and open sourced later. (MTh 2016: GPU support / OpenCL, starting in September 2016)
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)
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…
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
26 August 2016Institute of Geomatics Engineering 24
All Architecture
3DPS (3D Portrayal Service)Based on the OGC 3DPS Candidate
2
world3d.jsReal 3D
map3d.js3D Map
map3d.jsworld3d.js
owg2.js
BuildingCity
CountryPlanet
…
26 August 2016Institute of Geomatics Engineering 25
Docker
(Source: docker.io)
For development and deployment(processing tools / sample webservice / …)
26 August 2016
Institute of Geomatics Engineering
26
Questions ?
Contact me at martin.christen@fhnw.ch
@MartinChristenGitHub: MartinChristenGitLab: martin.christen
Recommended