3D Gebäudevisualisierung mit JavaScript Jan Marsch...
Transcript of 3D Gebäudevisualisierung mit JavaScript Jan Marsch...
![Page 1: 3D Gebäudevisualisierung mit JavaScript Jan Marsch ...archiv.geomv.de/geoforum/2013/praesentationen/10... · •HTML5, JavaScript, Canvas - kein WebGL, Java oder Flash •vereinfachte](https://reader036.fdocument.pub/reader036/viewer/2022062402/5f8a8d8d515d972d397a670e/html5/thumbnails/1.jpg)
3D Gebäudevisualisierung mit JavaScript
Jan Marsch • osmbuildings.org
OSM Buildings
![Page 2: 3D Gebäudevisualisierung mit JavaScript Jan Marsch ...archiv.geomv.de/geoforum/2013/praesentationen/10... · •HTML5, JavaScript, Canvas - kein WebGL, Java oder Flash •vereinfachte](https://reader036.fdocument.pub/reader036/viewer/2022062402/5f8a8d8d515d972d397a670e/html5/thumbnails/2.jpg)
OSM Buildings
• Ergänzung zu Web-Karten
• dynamische Gebäudedarstellung
• ohne App-Installation auf Mobilgeräten
• schnell, klein, einfach
![Page 3: 3D Gebäudevisualisierung mit JavaScript Jan Marsch ...archiv.geomv.de/geoforum/2013/praesentationen/10... · •HTML5, JavaScript, Canvas - kein WebGL, Java oder Flash •vereinfachte](https://reader036.fdocument.pub/reader036/viewer/2022062402/5f8a8d8d515d972d397a670e/html5/thumbnails/3.jpg)
Darstellungsformen
normales Layout Drahtgitter, höhenabhängig
3D anaglyph, red/cyan Freihandzeichnung
![Page 4: 3D Gebäudevisualisierung mit JavaScript Jan Marsch ...archiv.geomv.de/geoforum/2013/praesentationen/10... · •HTML5, JavaScript, Canvas - kein WebGL, Java oder Flash •vereinfachte](https://reader036.fdocument.pub/reader036/viewer/2022062402/5f8a8d8d515d972d397a670e/html5/thumbnails/4.jpg)
Integration
• weitere Ebene auf vorhandener Kartendarstellung
• Systeme: LeafletJS, OpenLayers, ArcGIS
• Geolokalisierung, Suche, Routing etc. problemlos
<head> <script src="osmbuildings-leaflet.js"></script> </head> <script> var map = new L.Map(...); new OSMBuildings().addTo(map).geoJSON({...}); </script>
![Page 5: 3D Gebäudevisualisierung mit JavaScript Jan Marsch ...archiv.geomv.de/geoforum/2013/praesentationen/10... · •HTML5, JavaScript, Canvas - kein WebGL, Java oder Flash •vereinfachte](https://reader036.fdocument.pub/reader036/viewer/2022062402/5f8a8d8d515d972d397a670e/html5/thumbnails/5.jpg)
Frontend
• HTML5, JavaScript, Canvas - kein WebGL, Java oder Flash
• vereinfachte Matrixoperationen für räumlichen Effekt
• simple 3D Modelle: Grundrißpolygon + Höhe
![Page 6: 3D Gebäudevisualisierung mit JavaScript Jan Marsch ...archiv.geomv.de/geoforum/2013/praesentationen/10... · •HTML5, JavaScript, Canvas - kein WebGL, Java oder Flash •vereinfachte](https://reader036.fdocument.pub/reader036/viewer/2022062402/5f8a8d8d515d972d397a670e/html5/thumbnails/6.jpg)
• weniger Daten
• schnellere Berechnung
• schnellere Darstellung
• Beispiel Zylinder: Anzahl der Flächen in OSM Buildings?
Optimierung
![Page 7: 3D Gebäudevisualisierung mit JavaScript Jan Marsch ...archiv.geomv.de/geoforum/2013/praesentationen/10... · •HTML5, JavaScript, Canvas - kein WebGL, Java oder Flash •vereinfachte](https://reader036.fdocument.pub/reader036/viewer/2022062402/5f8a8d8d515d972d397a670e/html5/thumbnails/7.jpg)
Datenquellen
• OpenStreetMaps:
70 Mio Gebäude
• Verwaltungen:
Open Data
![Page 8: 3D Gebäudevisualisierung mit JavaScript Jan Marsch ...archiv.geomv.de/geoforum/2013/praesentationen/10... · •HTML5, JavaScript, Canvas - kein WebGL, Java oder Flash •vereinfachte](https://reader036.fdocument.pub/reader036/viewer/2022062402/5f8a8d8d515d972d397a670e/html5/thumbnails/8.jpg)
• GeoJSON Dateien oder dynamisch aus CartoDB
Datenquellen
{ meta: { n: 52.50400, w: 13.33000, s: 52.50100, e: 13.34000, x: 9009831, y: 5503399, z: 16 }, data: [ [10,[333,53,313,39,326,18,348,32,333,53]], [10,[313,39,333,64,323,68,302,55,304,51,317,60,309,44,313,39]], [25,[313,84,302,100,293,94,301,83,304,78,313,84]], [10,[116,30,100,35,95,22,99,21,106,19,111,17,116,30]], [10,[204,-15,206,-9,210,3,208,6,202,8,199,7,192,-11,204,-15]], [10,[210,3,217,7,213,13,206,9,208,6,210,3]] ] }
new OSMBuildings().addTo(map).geoJSON('http://cartodb.com/api/v2/sql? q=SELECT * FROM buildings&format=geojson'))
![Page 9: 3D Gebäudevisualisierung mit JavaScript Jan Marsch ...archiv.geomv.de/geoforum/2013/praesentationen/10... · •HTML5, JavaScript, Canvas - kein WebGL, Java oder Flash •vereinfachte](https://reader036.fdocument.pub/reader036/viewer/2022062402/5f8a8d8d515d972d397a670e/html5/thumbnails/9.jpg)
Gegenüberstellung
• kein Anspruch auf Fotorealismus
• Besonderheiten: Schattenwürfe, Stereo-3D, Mobilgeräte
• ähnlich: OSM2World, MiniWikiAtlas, Google Maps
• Kooperation bei Datengewinnung
• gemeinsame Standards
![Page 10: 3D Gebäudevisualisierung mit JavaScript Jan Marsch ...archiv.geomv.de/geoforum/2013/praesentationen/10... · •HTML5, JavaScript, Canvas - kein WebGL, Java oder Flash •vereinfachte](https://reader036.fdocument.pub/reader036/viewer/2022062402/5f8a8d8d515d972d397a670e/html5/thumbnails/10.jpg)
Ausblick
• weitere Kartensysteme und Datenquellen
• Darstellung einfacher Dachformen
• WebGL als alternative Technik
• experimentell: Indoor Mapping
• Kooperation mit kommerziellen Projekten
![Page 11: 3D Gebäudevisualisierung mit JavaScript Jan Marsch ...archiv.geomv.de/geoforum/2013/praesentationen/10... · •HTML5, JavaScript, Canvas - kein WebGL, Java oder Flash •vereinfachte](https://reader036.fdocument.pub/reader036/viewer/2022062402/5f8a8d8d515d972d397a670e/html5/thumbnails/11.jpg)
Links
• OSM Buildings osmbuildings.org
• LeafletJS leafletjs.com
• Geofabrik download.geofabrik.de
• GeoJSON geojson.org
• CartoDB cartodb.com
• OSM2World maps.osm2world.org
• MiniWikiAtlas meta.wikimedia.org/wiki/WikiMiniAtlas