Open Earth View

1 Introduction
- 1.1 Sources
- 1.2 TODO list and bug tracker
2 Demo
3 Principle
- 3.1 Input data
- 3.2 output
4 Concept 1 - OSM to 3D
- 4.1 Sources
5 Concept 2 - 3D tiles
- 5.1 Web request
- 5.2 Command Line Interface (CLI)
  - 5.2.1 Response example
6 Concept 3 - Level Of Detail (LOD)
- 6.1 Bookmarks
7 Concept 4 - Ground elevation
- 7.1 bookmarks
8 Concept 5 - Textures
9 Concept 6 - Third party 3D objects
- 9.1 OpenBuildingModels (OSM-3D)
- 9.2 bookmarks
10 Concept 7 - Indoor building navigation
- 10.1 bookmarks
11 Concept 8 - Panoramic 360 view
12 Concept 9 - Real time events
13 Viewers
14 Bookmarks

Introduction

Open Earth View is an open source and promising project. It aims to provide a full 3D web browsing of our world relying on Open Street Map data (and why not more).

Sources

https://git.framasoft.org/pizaninja/OpenEarthView

TODO list and bug tracker

https://git.framasoft.org/pizaninja/OpenEarthView/issues

Demo

Web demo here.

Principle

The main idea of Open Earth View is to consider 3D world like Open Street Map for 2D world.

Open Street Map -> 2D tiles

Open Street Map -> Open Earth View -> 3D tiles

3D tiles is a 3D "block" with all 3D object element owning to this block.

Input data

Input data are:

*Open Street Map* (xml) for the raw data and for tile surface.
any *elevation data* web service (basically coming from SRTM, with web API access like with MapQuest).
*3D object* service, like http://openbuildingmodels.uni-hd.de/
*textures database*.
*skybox* (for any "3D Open Street View" feature).

output

3D tiles (overpass json)
three.js scene

Several components have been identified to reach the promising Open Earth View solution.

Concept 1 - OSM to 3D

	=>		=>

From OSM data (OSM web service), we can extract third dimension infos:

building elevation
number of floors
roof elevation

Sources

On framasoft gitlab: https://git.framasoft.org/pizaninja/OpenEarthView/tree/master/oevLibrary

Concept 2 - 3D tiles

The concept is to rely on "Component 1 - OSM to 3D" cutting world into 3D tiles (cube sharing the same surface as 2D tiles).

Open Street Map representation uses mainly 2D tiles (tile server), relying on:

parameters:
- zoom,
- latitude,
- longitude
output format: jpg

Open Earth View representation uses mainly 3D tiles, relying on:

parameters:
- zoom,
- latitude,
- longitude.
output formats:
- overpass openstreetmap json

Web request

JSON data requesting the web service like this:

Overpass request

bbox = '${tile2lat(y+1)},${tile2long(x)},${tile2lat(y)},${tile2long(x+1)}'

urlRequest = 'http://overpass-api.de/api/interpreter' +
			'?data=[out:json];(' +
			'(relation["type"="building"](' + bbox + ');>;);' +
			'(way["building"](' + bbox + ');>;););' +
			'out center;'

Command Line Interface (CLI)

You can use converter from shell command line like this:

wget 'http://overpass-api.de/api/interpreter'\
'?data=[out:json];('\
'(relation["type"="building"]('$bbox');>;);'\
'(way["building"]('$bbox');>;););'\
'out center;'

Response example

Reply example:Response format: Le Louvre / Paris - 16/33193/22545.json

Le Louvre / Paris in overpass json response

{
    "version": 0.6,
    "generator": "Overpass API",
    "osm3s": {
        "timestamp_osm_base": "2017-01-03T16:35:02Z",
        "copyright": "The data included in this document is from www.openstreetmap.org. The data is made available under ODbL."
    },
    "elements": [
        { "type": "node", "id": 25554287, "lat": 48.8624777, "lon": 2.3349913 },
        { "type": "node", "id": 573262998, "lat": 48.8608347, "lon": 2.3317758 },
        { "type": "node", "id": 598365502, "lat": 48.8608775, "lon": 2.3388158 },
(...)
        { "type": "way", "id": 53813362,
            "center": { "lat": 48.8614768, "lon": 2.3351677 },
            "nodes": [ 679339304, 679339312, 679339328, (...) ],
            "tags": { "roof:material": "metal" }
        },
        { "type": "way", "id": 53813363,
            "center": { "lat": 48.8603679, "lon": 2.3385539 },
            "nodes": [ 679326273, 679326288, 679326287, (...) ],
            "tags": {
                "area": "yes",
                "highway": "pedestrian",
                "name": "Cour Carrée",
                "source": "cadastre-dgi-fr source : Direction Générale des Impôts - Cadastre. Mise à jour : 2010",
                "surface": "paving_stones",
                "wikidata": "Q3000930"
            }
        },
        { "type": "way", "id": 53814914,
            "center": { "lat": 48.8617301, "lon": 2.3368307 },
            "nodes": [ 679345438, 679345443, 679345457, (...) ],
            "tags": {
                "building": "roof",
                "building:levels": "5",
                "building:roof:material": "glass",
                "name": "Cour Puget",
                "roof:material": "glass",
                "roof:orientation": "along",
                "roof:shape": "hipped",
                "source": "cadastre-dgi-fr source : Direction Générale des Impôts - Cadastre. Mise à jour : 2010",
                "wall": "no",
                "wikidata": "Q17426004"
            }
        },
        { "type": "way", "id": 53814915,
            "center": { "lat": 48.8602438, "lon": 2.3348283 },
            "nodes": [ 679345234, 679345235, 679345236, (...) ],
            "tags": {
                "area": "yes",
                "highway": "pedestrian",
                "name": "Cour Lefuel",
                "source": "cadastre-dgi-fr source : Direction Générale des Impôts - Cadastre. Mise à jour : 2010",
                "surface": "paved",
                "wikidata": "Q17305072"
            }
        },
        { "type": "way", "id": 53814916,
            "center": { "lat": 48.8615388, "lon": 2.3374816 },
            "nodes": [ 679345328, 4468613493, 4524329077, (...) ],
            "tags": {
                "building": "roof",
                "building:levels": "5",
                "building:roof:material": "glass",
                "name": "Cour Khorsabad",
                "roof:material": "glass",
                "roof:shape": "pyramidal",
                "source": "cadastre-dgi-fr source : Direction Générale des Impôts - Cadastre. Mise à jour : 2010",
                "wall": "no"
            }
        },
        { "type": "way", "id": 53814917,
            "center": { "lat": 48.8599953, "lon": 2.3358573 },
            "nodes": [ 679345249, 679345247, 679345248, (...) ],
            "tags": {
                "building": "roof",
                "covered": "yes",
                "height": "3.5",
                "level": "-0.5",
                "name": "Cour Visconti",
                "roof:material": "glass",
                "source": "cadastre-dgi-fr source : Direction Générale des Impôts - Cadastre. Mise à jour : 2010"
            }
        },
        {
            "type": "way",
            "id": 53814919,
            "center": { "lat": 48.8620159, "lon": 2.3358441 },
            "nodes": [ 679345333, 679345340, 679345337, (...) ],
            "tags": {
                "building": "roof",
                "building:levels": "5",
                "building:roof:material": "glass",
                "name": "Cour Marly",
                "roof:material": "glass",
                "roof:orientation": "along",
                "roof:shape": "hipped",
                "source": "cadastre-dgi-fr source : Direction Générale des Impôts - Cadastre. Mise à jour : 2010",
                "wall": "no"
            }
        },
        { "type": "way", "id": 53815259,
            "center": { "lat": 48.8606236, "lon": 2.3356346 },
            "nodes": [ 679352071, 679352068, 679352069, 679352081, 679352071 ],
            "tags": {
                "building": "yes",
                "building:material": "glass",
                "height": "5",
                "level": "0",
                "roof:height": "5",
                "roof:material": "glass",
                "roof:shape": "pyramidal",
                "start_date": "1989"
            }
        },
        { "type": "way", "id": 53815260,
            "center": { "lat": 48.8608653, "lon": 2.3364422 },
            "nodes": [ 679352092, 679352093, 679352094, 679352095, 679352092 ],
            "tags": {
                "building": "yes",
                "building:material": "glass",
                "height": "5",
                "roof:height": "5",
                "roof:material": "glass",
                "roof:shape": "pyramidal",
                "source": "cadastre-dgi-fr source : Direction Générale des Impôts - Cadastre. Mise à jour : 2013",
                "start_date": "1989"
            }
        },
        { "type": "way", "id": 62235545,
            "center": { "lat": 48.857278, "lon": 2.3367211 },
            "nodes": [ 777172424, 777172689, 777173765, 777173032, 777174084, 777172424 ],
            "tags": {
                "source": "cadastre-dgi-fr source : Direction Générale des Impôts - Cadastre. Mise à jour : 2010"
            }
        },
        { "type": "way", "id": 62235581,
            "center": { "lat": 48.8568441, "lon": 2.3371043 },
            "nodes": [ 777172512, 2484178021, 777173575, (...) ]
        },
        { "type": "way", "id": 62235592,
            "center": { "lat": 48.8571372, "lon": 2.3373885 },
            "nodes": [ 777173844, 777172417, 777174148, (...) ],
            "tags": {
                "source": "cadastre-dgi-fr source : Direction Générale des Impôts - Cadastre. Mise à jour : 2010"
            }
        },
        { "type": "way", "id": 62297588,
            "center": { "lat": 48.8574428, "lon": 2.3359599 },
            "nodes": [ 778297294, 778298640, 778299033, (...) ],
            "tags": {
                "building": "yes",
                "building:levels": "5",
                "source": "cadastre-dgi-fr source : Direction Générale des Impôts - Cadastre. Mise à jour : 2010"
            }
        },
        { "type": "way", "id": 62297666,
            "center": { "lat": 48.857484, "lon": 2.3357257 },
            "nodes": [ 778297279, 778297668, 778298590, (...) ],
            "tags": {
                "building": "yes",
                "building:levels": "5",
                "source": "cadastre-dgi-fr source : Direction Générale des Impôts - Cadastre. Mise à jour : 2010"
            }
        },
        { "type": "way", "id": 62297811,
            "center": { "lat": 48.857521, "lon": 2.3354728 },
            "nodes": [ 778298620, 778297474, 778298801, (...) ],
            "tags": {
                "building": "yes",
                "source": "cadastre-dgi-fr source : Direction Générale des Impôts - Cadastre. Mise à jour : 2010"
            }
        },
        { "type": "way", "id": 62297852,
            "center": { "lat": 48.8573833, "lon": 2.3352891 },
            "nodes": [ 778296604, 778298043, 778298091, (...) ],
            "tags": {
                "building": "yes",
                "building:levels": "4",
                "source": "cadastre-dgi-fr source : Direction Générale des Impôts - Cadastre. Mise à jour : 2010"
            }
        },
        { "type": "way", "id": 62298397,
            "center": { "lat": 48.8575844, "lon": 2.3351128 },
            "nodes": [ 778305552, 778305965, 778305705, (...) ],
            "tags": {
                "building": "yes",
                "building:levels": "5",
                "source": "cadastre-dgi-fr source : Direction Générale des Impôts - Cadastre. Mise à jour : 2010"
            }
        },
        { "type": "way", "id": 62298411,
            "center": { "lat": 48.8573461, "lon": 2.3342567 },
            "nodes": [ 778306561, 778304577, 778303984, (...) ],
            "tags": {
                "building": "yes",
                "source": "cadastre-dgi-fr source : Direction Générale des Impôts - Cadastre. Mise à jour : 2010"
            }
        },
        { "type": "way", "id": 104212302,
            "center": { "lat": 48.861068, "lon": 2.3349742 },
            "nodes": [ 1202447578, 1202457386, 1202446738, 1202452585, 1202447578 ],
            "tags": {
                "artist:wikidata": "Q160538",
                "artist_name": "Gian Lorenzo Bernini",
                "artwork_type": "sculpture",
                "building": "yes",
                "name": "Louis XIV",
                "source": "bing",
                "tourism": "artwork",
                "wikidata": "Q18156060"
            }
        },
        { "type": "way", "id": 375076234,
            "center": { "lat": 48.8610132, "lon": 2.335853 },
            "nodes": [ 679352082, 679352096, 679352088, (...) ],
            "tags": {
                "building": "yes",
                "building:levels": "4",
                "building:material": "glass",
                "height": "21.65",
                "layer": "1",
                "name": "Pyramide du Louvre",
                "name:de": "Pyramide im Louvre",
                "name:et": "Louvre'i püramiid",
                "name:fr": "Pyramide du Louvre",
                "name:he": "פירמידת מוזיאון הלובר",
                "name:it": "Piramide del Louvre",
                "name:ko": "루브르 피라미드",
                "name:pl": "Piramida Luwru",
                "name:ru": "Пирамида Лувра",
                "name:uk": "Піраміда Лувра",
                "roof:height": "21.65",
                "roof:material": "glass",
                "roof:shape": "pyramidal",
                "source": "cadastre-dgi-fr source : Direction Générale des Impôts - Cadastre. Mise à jour : 2009",
                "start_date": "1989",
                "wikidata": "Q13397",
                "wikipedia": "fr:Pyramide du Louvre"
            }
        },
        { "type": "relation", "id": 967665,
            "center": { "lat": 48.8568441, "lon": 2.3371043 },
            "members": [
                { "type": "way", "ref": 62235592, "role": "inner" },
                { "type": "way", "ref": 62235545, "role": "inner" },
                { "type": "way", "ref": 62235581, "role": "outer" }
            ],
            "tags": {
                "amenity": "public_building",
                "building": "office",
                "height": "30",
                "name": "Institut de France",
                "source": "cadastre-dgi-fr source : Direction Générale des Impôts - Cadastre. Mise à jour : 2010",
                "type": "multipolygon",
                "wikidata": "Q377066",
                "wikipedia": "fr:Institut de France"
            }
        },
        { "type": "relation", "id": 3262297,
            "center": { "lat": 48.8614768, "lon": 2.3351677 },
            "members": [
                { "type": "way", "ref": 53813362, "role": "outer" },
                { "type": "way", "ref": 53814916, "role": "inner" },
                { "type": "way", "ref": 53814914, "role": "inner" },
                { "type": "way", "ref": 53814919, "role": "inner" },
                { "type": "way", "ref": 53814915, "role": "inner" },
                { "type": "way", "ref": 53814917, "role": "inner" },
                { "type": "way", "ref": 53813363, "role": "inner" }
            ],
            "tags": {
                "addr:city": "Paris",
                "addr:postcode": "75001",
                "alt_name": "Musée du Louvre",
                "building": "castle",
                "castle_type": "stately",
                "historic": "castle",
                "image": "http://upload.wikimedia.org/wikipedia/commons/6/66/Louvre_Museum_Wikimedia_Commons.jpg",
                "image:panorama": "http://upload.wikimedia.org/wikipedia/commons/d/d2/Jardin_du_Carrousel.jpg",
                "importance": "international",
                "name": "Palais du Louvre",
                "name:de": "Louvre",
                "name:en": "Louvre Palace",
                "name:es": "Museo del Louvre",
                "name:ja": "ルーブル美術館",
                "name:pl": "Luwr",
                "name:pt": "Museu do Louvre",
                "name:ru": "Лувр",
                "name:zh": "卢浮宫博物馆",
                "phone": "+33 1 40205050",
                "roof:material": "metal",
                "source": "cadastre-dgi-fr source : Direction Générale des Impôts - Cadastre. Mise à jour : 2010",
                "toilets:wheelchair": "yes",
                "tourism": "museum",
                "type": "multipolygon",
                "website": "http://www.louvre.fr/",
                "wheelchair": "yes",
                "wikidata": "Q19675",
                "wikipedia": "de:Louvre"
            }
        }
    ]
}

Concept 3 - Level Of Detail (LOD)

The goal is to define what information we are ready to take into account for a given representation.

For instance, if you quickly navigate above New York at about 5000 meters high, you don't need to know the boundaries of the 6th floor of a little building...

The American Institute of Architects (2008), the CityGML standard (Open Geospatial Consortium, 2012) or the BLOM geomatics company defines about five LoDs.

A summary here: https://en.wikipedia.org/wiki/3D_city_models#Level_of_Detail

As illustrations:

Standard	LOD 0	LOD 1	LOD 2	LOD 3	LOD 4	LOD 5
The American Institute of Architects
CityGML standard
BLOM3D
Open Earth View
Ground tile	X
Bounding box		X
Roofs			X
Elevation grid				X
Textures				X
Floors					X
Transparency					X
SVG indoor						X
Zoom level	<16	16	17	18	19	>19

Bookmarks

www.gdmc.nl/publications/reports/GISt62.pdf
http://wiki.openstreetmap.org/wiki/Slippy_map_tilenames
http://wiki.openstreetmap.org/wiki/Zoom_levels

Concept 4 - Ground elevation

Raw data can come from Shuttle Radar Topography Mission database or from more "local" database (national, regional, or from a specific town...).

For instance, MapZen provides an easy way to request elevation info from it's Mapzen Terrain Tiles.

bookmarks

Concept 5 - Textures

Relying on OSM key/value solution, the property to use would be building:facade:image.

building:facade:image key would match to an url that would be the texture to apply to a whole building or only on a building part.

Here is a suggestion to be able to add textures to buildings:

step 1: generate a pattern to segment a rectangle.
- rectangle height = building(part) height
- rectangle widht = building(part) perimeter
step 2: apply the texture to the pattern
step 3: let the engine do the job...

step 0 - Flat polygon

	OSM data - building flat polygon

step 1 - Pattern generated

	Pattern generated

step 2 - Flat texture

	Flat texture

step 3 - 3D result

	3d result

Concept 6 - Third party 3D objects

The goal here is to let any user import/export a 3D object.

This could be done either relying on OSM key/value principle and by using an external database.

My suggestion is to provide a URL to a 3Dtile object (json format).

OpenBuildingModels (OSM-3D)

Promising project but I've never succeded in using their services...

OpenBuildingModels suggest to use building:obm OSM key as an identifier to a 3D building model in Open Building Models database.

Open Building Models suggest to provide a web service to upload/download 3D object.

The web service that should work is documented here

Kind of request that could be useful (if available): http://rax.geog.uni-heidelberg.de/W3DS_OSM/W3DS?SERVICE=W3DS&REQUEST=GetScene&VERSION=0.4.1&CRS=EPSG:90091&FORMAT=model/VRML&BoundingBox=790053.1172,6572361.3988,790664.6134,6572972.895&layers=Buildings

bookmarks

Open Building Models

Concept 7 - Indoor building navigation

This is based on svg 2D file, applying height extrusion:

bookmarks

Indoor Mapping
Indoor OSM (obsoleted but very good ideas)
Open Level Up

Concept 8 - Panoramic 360 view

We can apply the principle of "cubemap" or "skybox" for an immersion inside a place, indoor or outdoor. With that principle, we place the viewpoint in the center of a cube, giving the sensation of a real world around.

Demos

Just click on one of the cubemap below:


Source code	Source code	Source code

Other demo:

xdynamic cube reflexion (external demo)

Examples

https://threejs.org/examples/#webgl_materials_cubemap_dynamic2 xdynamic cube reflexion

Bookmarks

Mapillary

Create your own environment maps

Concept 9 - Real time events

This part aims to explain how we can monitor real time events in a 3D world.

The principle is to rely on an external event server that send json data with these info:

Point of Interest (P.O.I) identifier
State

Example:

a door open
an elevator at the 3rd floor
a fire sensor activated

Then, a behaviour must be defined for each case.

Example:

Anti-intrusion system: flashing building, flashing floor, flashing window, etc...

Viewers

General architecture

Browser side

Client side is a web browser, able to make run webgl features. Javascript is use to initialize 3D Scene with earth as a sphere, and to manage earth tiles position and loading.

Tools

Tool: web browser
javascript: three.js

three.js solution

Using Three.js json geometry and object format, data from OEV web service can be directly loaded with THREE.JSONLoader() function.

As an example to start with earth rendering:

Offline 3D viewers

offline web browser

OEV has its own bower project to render data generated offline in a web browser.

2D viewers

geojson data viewers

Leafletjs canon load geojson data as explained here.

Bookmarks

Open Earth View

Contents

Introduction

Sources

TODO list and bug tracker

Demo

Principle

Input data

output

Concept 1 - OSM to 3D

Sources

Concept 2 - 3D tiles

Web request

Command Line Interface (CLI)

Response example

Concept 3 - Level Of Detail (LOD)

Bookmarks

Concept 4 - Ground elevation

bookmarks

Concept 5 - Textures

step 0 - Flat polygon

step 1 - Pattern generated

step 2 - Flat texture

step 3 - 3D result

Concept 6 - Third party 3D objects

OpenBuildingModels (OSM-3D)

bookmarks

Concept 7 - Indoor building navigation

bookmarks

Concept 8 - Panoramic 360 view

Demos

Examples

Bookmarks

Concept 9 - Real time events

Viewers

General architecture

Browser side

Tools

three.js solution

Offline 3D viewers

offline web browser

2D viewers

geojson data viewers

Bookmarks

Navigation menu

Search