presentation final 72

Martin ChristenFHNW – University of Applied Sciences and Arts Northwestern SwitzerlandSchool of Architecture, Civil Engineering and GeomaticsInstitute of Geomatics Engineering

[email protected]@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


Motivation: 3D-Streaming in the web browser

MapData © OpenStreetMap contributorsBTh Hürbi/Daetwyler, MTh Lucas Oertli, 2013


Streaming Example: 3D Geometry using OSM and “BOI” (worldwide streaming)

MTh Lucas Oertli, 2013

Hello World



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


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”


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


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


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


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


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


Display in the Webbrowser as “2D Map”

MTh Markus Jung, 2014

2


High Resolution Geometry doesn’t matter: Same download/render speed

MTh Markus Jung, 2014

2


90 CityGML files (2.72 GB)26'474 textures (1024x1024), uncompressed size ca. 77 GBimage data (orthophoto) ca. 430 GB uncompressed


Another example: 3D Map using OpenStreetMap data

Source: BTh, Daniel Rettenmund 2015


App: make visible the invisibke (Roman city of Augusta Raurica)


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


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)


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)


And “real 3d” is of course still possible in OpenWebGlobe 2

Typical Scene: From a single building to a planet…


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


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

…


Docker

(Source: docker.io)

For development and deployment(processing tools / sample webservice / …)

26 August 2016

Institute of Geomatics Engineering

26

Questions ?

Contact me at [email protected]

@MartinChristenGitHub: MartinChristenGitLab: martin.christen

presentation final 72

Technology