OpenIndoor

From OpenStreetMap Wiki
(Redirected from Open Earth View)
Jump to navigation Jump to search

OpenIndoor comes from Open Earth View project. It has been moved from no structure to a Company, with a same name (OpenIndoor).

Source code here: https://github.com/open-indoor

Demo here: https://app.openindoor.io

Web site here: https://www.openindoor.io

Introduction

OpenIndoor is an open source project. It aims to provide a full 3D web browsing of our world relying on Open Street Map data (and also private data source).

Sources code

https://github.com/open-indoor

TODO list and bug tracker

https://openindoor.atlassian.net/

Demo

Web demo here https://app.openindoor.io

OpenIndoor app screenshot
OpenIndoor app screenshot

Principle

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

Open Street Map -> 2D tiles

Open Street Map -> OpenIndoor -> 3D tiles

It massively relies on mapbox vector tiles and extrusion feature.

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

  • geojson/mbtiles/mvt
  • mapbox scene

Several components have been identified to reach the promising OpenIndoor solution.

Concept 1 - OSM to 3D

OSMEdition.png => 3DRendering.png => 3DRendering02.png

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

  • building elevation
  • number of floors
  • roof elevation

Tools

  • osmium
  • python libs like geopandas (shapely and pandas together)

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:

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

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 LoD100.png LoD200.png LoD300.png LoD400.png LoD500.png
CityGML standard CityGML LoD1.png CityGML LoD2.png CityGML LoD3.png CityGML LoD4.png
BLOM3D BlomLOD1.png BlomLOD2.png BlomLOD3.png BlomLOD4.png
OpenIndoor
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

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.

Les alpes.png

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

FlatPolygon.png OSM data - building flat polygon

step 1 - Pattern generated

PatternGenerated.png Pattern generated

step 2 - Flat texture

FlatTexture.png Flat texture

step 3 - 3D result

3dResult.png 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

Concept 7 - Indoor building navigation

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

Indoor svg.png

bookmarks

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:

Sistine cubemap.png Nvlobby all6.png Cubemap forest.png
Source code Source code Source code

Other demo:

Examples

Bookmarks

Open-street-view.jpeg

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