SlideShare ist ein Scribd-Unternehmen logo
1 von 15
Downloaden Sie, um offline zu lesen
WebGL für Geo in 5 Minuten!

Martin Christen, martin.christen@fhnw.ch
Fachhochschule Nordwestschweiz
Institut Vermessung und Geoinformation
© 2013 FHNW / IVGI

WebGL für Geo - 3.Juli 2013 - GeoBeer
WebGL

•  WebGL ist ein Industriestandard, welcher von der WebGL Working
Group (Mitglieder: Apple, Google, Mozilla, Opera, ...) spezifiziert
wird.
•  WebGL erlaubt voll programmierbare 3D-Grafik im Web-Browser,
ohne Verwendung von Plugins, unter Verwendung von JavaScript
& GLSL
•  WebGL basiert auf OpenGL ES 2 (angepasst für JavaScript)
•  Die Spezifikation (Version 1.0) wurde am 3. März 2011
veröffentlicht. (Erste Experimente Canvas3D: 2006 im Firefox)
© 2013 FHNW / IVGI

WebGL für Geo - 3.Juli 2013 - GeoBeer
WebGL Support (Stand: Juli 2013)

•  WebGL Applikationen laufen Plug-In frei in
allen modernen, WebGL fähigen Browsern.
Ø  Firefox (Version 4+, Desktop & Android)
Ø  Chrome (Version 9+, Desktop)
Ø  Safari (Version 6+, nur MacOS)
Ø  Opera (Version 11+, Desktop & Android)
Ø  Neu: Internet Explorer (Version 11+)

Ausführbar ohne Plug-In
© 2013 FHNW / IVGI

WebGL für Geo - 3.Juli 2013 - GeoBeer

3
WebGL Globe (Chrome Experiments)

Beispiel: World Population
Autor: Google Data Arts Team
http://www.chromeexperiments.com/globe
© 2013 FHNW / IVGI

WebGL für Geo - 3.Juli 2013 - GeoBeer
Geoid Viewer

Autor: Laboratorio di Geomatica, Como
http://geomatica.como.polimi.it/elab/geoid/geoidViewer.html
© 2013 FHNW / IVGI

WebGL für Geo - 3.Juli 2013 - GeoBeer
F4 Map (OpenStreetMap 3D mit WebGL)

F4 Map
http://map.f4-group.com/
© 2013 FHNW / IVGI

WebGL für Geo - 3.Juli 2013 - GeoBeer
OpenWebGlobe

•  Höhen- und Bilddaten
•  POIs
•  3D Modelle
•  HTML5 Canvas Element
•  Bildüberlagerungen
•  Punktwolken
•  …

© 2013 FHNW / IVGI

WebGL für Geo - 3.Juli 2013 - GeoBeer

7
OpenWebGlobe – world.openwebglobe.org

Autor: FHNW IVGI
http://www.openwebglobe.org
© 2013 FHNW / IVGI

WebGL für Geo - 3.Juli 2013 - GeoBeer
SwizzQuiz – http://www.openwebglobe.org/game

© 2013 FHNW / IVGI

WebGL für Geo - 3.Juli 2013 - GeoBeer
here.com (Nokia) in 3D (WebGL)

© 2013 FHNW / IVGI

WebGL für Geo - 3.Juli 2013 - GeoBeer
Google Maps (WebGL)

© 2013 FHNW / IVGI

WebGL für Geo - 3.Juli 2013 - GeoBeer
Web IDE für processing.js:

http://matrix.senecac.on.ca/~asalga/pjswebide/
© 2013 FHNW / IVGI

WebGL für Geo - 3.Juli 2013 - GeoBeer
Three.js - http://threejs.org/ OpenSource 3D Bibliothek

© 2013 FHNW / IVGI

WebGL für Geo - 3.Juli 2013 - GeoBeer
Weitere Informationen

•  http://www.khronos.org/webgl
•  http://www.khronos.org/webgl/wiki/Main_Page
•  http://www.khronos.org/webgl/security/
•  https://github.com/KhronosGroup/WebGL

© 2013 FHNW / IVGI

WebGL für Geo - 3.Juli 2013 - GeoBeer
Vielen Dank!
mehr Infos:
Twitter @MartinChristen
LinkedIn/Google+/GoogleTalk: martin.christen@gmail.com
GitHub: martinchristen
Folien:
http://www.martinchristen.ch

(Mehr über WebGL: Webilea 11. September 2013 in Basel)

© 2013 FHNW / IVGI

WebGL für Geo - 3.Juli 2013 - GeoBeer

Weitere ähnliche Inhalte

Andere mochten auch

GeoBeer #10: Storymaps - Raus aus den Schulden
GeoBeer #10: Storymaps - Raus aus den SchuldenGeoBeer #10: Storymaps - Raus aus den Schulden
GeoBeer #10: Storymaps - Raus aus den SchuldenStephan Heuel
 
GeoBeerCH #1: Geocoding meets Evernote
GeoBeerCH #1: Geocoding meets EvernoteGeoBeerCH #1: Geocoding meets Evernote
GeoBeerCH #1: Geocoding meets EvernoteStephan Heuel
 
Putting Your Data on a Map
Putting Your Data on a MapPutting Your Data on a Map
Putting Your Data on a MapShawn Day
 
Augview presentation GE user conference bali 2014 - MIke Bundock
Augview presentation GE user conference bali 2014 - MIke BundockAugview presentation GE user conference bali 2014 - MIke Bundock
Augview presentation GE user conference bali 2014 - MIke BundockGeo AR Games
 
Best Web-based Data Visualization tools
Best Web-based Data Visualization tools Best Web-based Data Visualization tools
Best Web-based Data Visualization tools Atchai
 
An Overview of Web GIS and Location Based Services
An Overview of Web GIS and Location Based ServicesAn Overview of Web GIS and Location Based Services
An Overview of Web GIS and Location Based Serviceswebmapsolutions
 
Google Maps API
Google Maps APIGoogle Maps API
Google Maps APIhchen1
 
Geospatial Web
Geospatial WebGeospatial Web
Geospatial Webhchen1
 
SportsDataViz using Plotly, Shiny and Flexdashboard - PlotCon 2016
SportsDataViz using Plotly, Shiny and Flexdashboard - PlotCon 2016SportsDataViz using Plotly, Shiny and Flexdashboard - PlotCon 2016
SportsDataViz using Plotly, Shiny and Flexdashboard - PlotCon 2016Tanya Cashorali
 
Rendering OpenStreetMap Data using Mapnik
Rendering OpenStreetMap Data using MapnikRendering OpenStreetMap Data using Mapnik
Rendering OpenStreetMap Data using MapnikGraham Jones
 
A Look at the Future of HTML5
A Look at the Future of HTML5A Look at the Future of HTML5
A Look at the Future of HTML5Tim Wright
 
Big Data Visualization
Big Data VisualizationBig Data Visualization
Big Data VisualizationRaffael Marty
 
The Rise of Bots – Talk at GeoBeer #15, March 2017
The Rise of Bots – Talk at GeoBeer #15, March 2017The Rise of Bots – Talk at GeoBeer #15, March 2017
The Rise of Bots – Talk at GeoBeer #15, March 2017Ralph Straumann
 
Make geoportals great again
Make geoportals great againMake geoportals great again
Make geoportals great againNadia Panchaud
 
Data Visualization 101: How to Design Charts and Graphs
Data Visualization 101: How to Design Charts and GraphsData Visualization 101: How to Design Charts and Graphs
Data Visualization 101: How to Design Charts and GraphsVisage
 
Fundamental Ways We Use Data Visualizations
Fundamental Ways We Use Data VisualizationsFundamental Ways We Use Data Visualizations
Fundamental Ways We Use Data VisualizationsInitial State
 

Andere mochten auch (20)

GeoBeer #10: Storymaps - Raus aus den Schulden
GeoBeer #10: Storymaps - Raus aus den SchuldenGeoBeer #10: Storymaps - Raus aus den Schulden
GeoBeer #10: Storymaps - Raus aus den Schulden
 
GeoBeerCH #1: Geocoding meets Evernote
GeoBeerCH #1: Geocoding meets EvernoteGeoBeerCH #1: Geocoding meets Evernote
GeoBeerCH #1: Geocoding meets Evernote
 
Open geodata + crowdsourcing : formule gagnante ?
Open geodata + crowdsourcing : formule gagnante ?Open geodata + crowdsourcing : formule gagnante ?
Open geodata + crowdsourcing : formule gagnante ?
 
Geobeer Storymaps - story - data - tools
Geobeer Storymaps  - story - data - toolsGeobeer Storymaps  - story - data - tools
Geobeer Storymaps - story - data - tools
 
2015 09 18-sogi
2015 09 18-sogi2015 09 18-sogi
2015 09 18-sogi
 
Putting Your Data on a Map
Putting Your Data on a MapPutting Your Data on a Map
Putting Your Data on a Map
 
Augview presentation GE user conference bali 2014 - MIke Bundock
Augview presentation GE user conference bali 2014 - MIke BundockAugview presentation GE user conference bali 2014 - MIke Bundock
Augview presentation GE user conference bali 2014 - MIke Bundock
 
Best Web-based Data Visualization tools
Best Web-based Data Visualization tools Best Web-based Data Visualization tools
Best Web-based Data Visualization tools
 
An Overview of Web GIS and Location Based Services
An Overview of Web GIS and Location Based ServicesAn Overview of Web GIS and Location Based Services
An Overview of Web GIS and Location Based Services
 
Google Maps API
Google Maps APIGoogle Maps API
Google Maps API
 
Geospatial Web
Geospatial WebGeospatial Web
Geospatial Web
 
SportsDataViz using Plotly, Shiny and Flexdashboard - PlotCon 2016
SportsDataViz using Plotly, Shiny and Flexdashboard - PlotCon 2016SportsDataViz using Plotly, Shiny and Flexdashboard - PlotCon 2016
SportsDataViz using Plotly, Shiny and Flexdashboard - PlotCon 2016
 
Rendering OpenStreetMap Data using Mapnik
Rendering OpenStreetMap Data using MapnikRendering OpenStreetMap Data using Mapnik
Rendering OpenStreetMap Data using Mapnik
 
A Look at the Future of HTML5
A Look at the Future of HTML5A Look at the Future of HTML5
A Look at the Future of HTML5
 
Delivering location-based services using GIS, WAP, and the Web: two applications
Delivering location-based services using GIS, WAP, and the Web: two applicationsDelivering location-based services using GIS, WAP, and the Web: two applications
Delivering location-based services using GIS, WAP, and the Web: two applications
 
Big Data Visualization
Big Data VisualizationBig Data Visualization
Big Data Visualization
 
The Rise of Bots – Talk at GeoBeer #15, March 2017
The Rise of Bots – Talk at GeoBeer #15, March 2017The Rise of Bots – Talk at GeoBeer #15, March 2017
The Rise of Bots – Talk at GeoBeer #15, March 2017
 
Make geoportals great again
Make geoportals great againMake geoportals great again
Make geoportals great again
 
Data Visualization 101: How to Design Charts and Graphs
Data Visualization 101: How to Design Charts and GraphsData Visualization 101: How to Design Charts and Graphs
Data Visualization 101: How to Design Charts and Graphs
 
Fundamental Ways We Use Data Visualizations
Fundamental Ways We Use Data VisualizationsFundamental Ways We Use Data Visualizations
Fundamental Ways We Use Data Visualizations
 

Ähnlich wie GeoBeer July 3rd, 2013

WebGL für Geospatial
WebGL für GeospatialWebGL für Geospatial
WebGL für GeospatialCamptocamp
 
Slides zum OpenTuesday: NeoMap – eine Offline-Karten-App
Slides zum OpenTuesday: NeoMap – eine Offline-Karten-AppSlides zum OpenTuesday: NeoMap – eine Offline-Karten-App
Slides zum OpenTuesday: NeoMap – eine Offline-Karten-AppDigicomp Academy AG
 
OpenLayers 3 Alpha - Introduction - 2013
OpenLayers 3 Alpha - Introduction - 2013OpenLayers 3 Alpha - Introduction - 2013
OpenLayers 3 Alpha - Introduction - 2013Moullet
 
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 SeitenjQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 Seitendie.agilen GmbH
 
GI2013 ppt hoffmann_review_x-gdi_sustainability
GI2013 ppt hoffmann_review_x-gdi_sustainabilityGI2013 ppt hoffmann_review_x-gdi_sustainability
GI2013 ppt hoffmann_review_x-gdi_sustainabilityIGN Vorstand
 
Cross-Platform Mobile Apps
Cross-Platform Mobile AppsCross-Platform Mobile Apps
Cross-Platform Mobile AppsMartin Wittemann
 
WebGL - 3D im Browser - Erfahrungsbericht mit BabylonJS
WebGL - 3D im Browser - Erfahrungsbericht mit BabylonJSWebGL - 3D im Browser - Erfahrungsbericht mit BabylonJS
WebGL - 3D im Browser - Erfahrungsbericht mit BabylonJSOliver Hader
 
Responsive Webdesign Process
Responsive Webdesign ProcessResponsive Webdesign Process
Responsive Webdesign ProcessSven Wolfermann
 

Ähnlich wie GeoBeer July 3rd, 2013 (9)

WebGL für Geospatial
WebGL für GeospatialWebGL für Geospatial
WebGL für Geospatial
 
WebGL
WebGLWebGL
WebGL
 
Slides zum OpenTuesday: NeoMap – eine Offline-Karten-App
Slides zum OpenTuesday: NeoMap – eine Offline-Karten-AppSlides zum OpenTuesday: NeoMap – eine Offline-Karten-App
Slides zum OpenTuesday: NeoMap – eine Offline-Karten-App
 
OpenLayers 3 Alpha - Introduction - 2013
OpenLayers 3 Alpha - Introduction - 2013OpenLayers 3 Alpha - Introduction - 2013
OpenLayers 3 Alpha - Introduction - 2013
 
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 SeitenjQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
jQuery Mobile 1.3 - Das Kompendium mit 200 Seiten
 
GI2013 ppt hoffmann_review_x-gdi_sustainability
GI2013 ppt hoffmann_review_x-gdi_sustainabilityGI2013 ppt hoffmann_review_x-gdi_sustainability
GI2013 ppt hoffmann_review_x-gdi_sustainability
 
Cross-Platform Mobile Apps
Cross-Platform Mobile AppsCross-Platform Mobile Apps
Cross-Platform Mobile Apps
 
WebGL - 3D im Browser - Erfahrungsbericht mit BabylonJS
WebGL - 3D im Browser - Erfahrungsbericht mit BabylonJSWebGL - 3D im Browser - Erfahrungsbericht mit BabylonJS
WebGL - 3D im Browser - Erfahrungsbericht mit BabylonJS
 
Responsive Webdesign Process
Responsive Webdesign ProcessResponsive Webdesign Process
Responsive Webdesign Process
 

Mehr von Martin Christen

Opening Session GeoPython & Python Machine Learning Conference
Opening Session GeoPython & Python Machine Learning Conference Opening Session GeoPython & Python Machine Learning Conference
Opening Session GeoPython & Python Machine Learning Conference Martin Christen
 
EuroPython 2019: GeoSpatial Analysis using Python and JupyterHub
EuroPython 2019: GeoSpatial Analysis using Python and JupyterHubEuroPython 2019: GeoSpatial Analysis using Python and JupyterHub
EuroPython 2019: GeoSpatial Analysis using Python and JupyterHubMartin Christen
 
Lightning Talk GeoBeer #25
Lightning Talk GeoBeer #25Lightning Talk GeoBeer #25
Lightning Talk GeoBeer #25Martin Christen
 
High-Quality Server Side Rendering using the OGC’s 3D Portrayal Service – App...
High-Quality Server Side Rendering using the OGC’s 3D Portrayal Service – App...High-Quality Server Side Rendering using the OGC’s 3D Portrayal Service – App...
High-Quality Server Side Rendering using the OGC’s 3D Portrayal Service – App...Martin Christen
 
Teaching with JupyterHub - lessons learned
Teaching with JupyterHub - lessons learnedTeaching with JupyterHub - lessons learned
Teaching with JupyterHub - lessons learnedMartin Christen
 
Mixed Reality Anwendungen mit 3D-Stadtmodellen
Mixed Reality Anwendungen mit 3D-StadtmodellenMixed Reality Anwendungen mit 3D-Stadtmodellen
Mixed Reality Anwendungen mit 3D-StadtmodellenMartin Christen
 
Gettiing Started with IoT using Raspberry Pi and Python
Gettiing Started with IoT using Raspberry Pi and PythonGettiing Started with IoT using Raspberry Pi and Python
Gettiing Started with IoT using Raspberry Pi and PythonMartin Christen
 
Docker for Python Development
Docker for Python DevelopmentDocker for Python Development
Docker for Python DevelopmentMartin Christen
 
3D Computer Graphics with Python
3D Computer Graphics with Python3D Computer Graphics with Python
3D Computer Graphics with PythonMartin Christen
 
Webilea: The OpenWebGlobe Project
Webilea: The OpenWebGlobe ProjectWebilea: The OpenWebGlobe Project
Webilea: The OpenWebGlobe ProjectMartin Christen
 
OpenWebGlobe - GeoSharing Bern
OpenWebGlobe - GeoSharing BernOpenWebGlobe - GeoSharing Bern
OpenWebGlobe - GeoSharing BernMartin Christen
 

Mehr von Martin Christen (12)

Opening Session GeoPython & Python Machine Learning Conference
Opening Session GeoPython & Python Machine Learning Conference Opening Session GeoPython & Python Machine Learning Conference
Opening Session GeoPython & Python Machine Learning Conference
 
EuroPython 2019: GeoSpatial Analysis using Python and JupyterHub
EuroPython 2019: GeoSpatial Analysis using Python and JupyterHubEuroPython 2019: GeoSpatial Analysis using Python and JupyterHub
EuroPython 2019: GeoSpatial Analysis using Python and JupyterHub
 
Lightning Talk GeoBeer #25
Lightning Talk GeoBeer #25Lightning Talk GeoBeer #25
Lightning Talk GeoBeer #25
 
High-Quality Server Side Rendering using the OGC’s 3D Portrayal Service – App...
High-Quality Server Side Rendering using the OGC’s 3D Portrayal Service – App...High-Quality Server Side Rendering using the OGC’s 3D Portrayal Service – App...
High-Quality Server Side Rendering using the OGC’s 3D Portrayal Service – App...
 
Teaching with JupyterHub - lessons learned
Teaching with JupyterHub - lessons learnedTeaching with JupyterHub - lessons learned
Teaching with JupyterHub - lessons learned
 
Mixed Reality Anwendungen mit 3D-Stadtmodellen
Mixed Reality Anwendungen mit 3D-StadtmodellenMixed Reality Anwendungen mit 3D-Stadtmodellen
Mixed Reality Anwendungen mit 3D-Stadtmodellen
 
Presentation final 72
Presentation final 72Presentation final 72
Presentation final 72
 
Gettiing Started with IoT using Raspberry Pi and Python
Gettiing Started with IoT using Raspberry Pi and PythonGettiing Started with IoT using Raspberry Pi and Python
Gettiing Started with IoT using Raspberry Pi and Python
 
Docker for Python Development
Docker for Python DevelopmentDocker for Python Development
Docker for Python Development
 
3D Computer Graphics with Python
3D Computer Graphics with Python3D Computer Graphics with Python
3D Computer Graphics with Python
 
Webilea: The OpenWebGlobe Project
Webilea: The OpenWebGlobe ProjectWebilea: The OpenWebGlobe Project
Webilea: The OpenWebGlobe Project
 
OpenWebGlobe - GeoSharing Bern
OpenWebGlobe - GeoSharing BernOpenWebGlobe - GeoSharing Bern
OpenWebGlobe - GeoSharing Bern
 

GeoBeer July 3rd, 2013

  • 1. WebGL für Geo in 5 Minuten! Martin Christen, martin.christen@fhnw.ch Fachhochschule Nordwestschweiz Institut Vermessung und Geoinformation © 2013 FHNW / IVGI WebGL für Geo - 3.Juli 2013 - GeoBeer
  • 2. WebGL •  WebGL ist ein Industriestandard, welcher von der WebGL Working Group (Mitglieder: Apple, Google, Mozilla, Opera, ...) spezifiziert wird. •  WebGL erlaubt voll programmierbare 3D-Grafik im Web-Browser, ohne Verwendung von Plugins, unter Verwendung von JavaScript & GLSL •  WebGL basiert auf OpenGL ES 2 (angepasst für JavaScript) •  Die Spezifikation (Version 1.0) wurde am 3. März 2011 veröffentlicht. (Erste Experimente Canvas3D: 2006 im Firefox) © 2013 FHNW / IVGI WebGL für Geo - 3.Juli 2013 - GeoBeer
  • 3. WebGL Support (Stand: Juli 2013) •  WebGL Applikationen laufen Plug-In frei in allen modernen, WebGL fähigen Browsern. Ø  Firefox (Version 4+, Desktop & Android) Ø  Chrome (Version 9+, Desktop) Ø  Safari (Version 6+, nur MacOS) Ø  Opera (Version 11+, Desktop & Android) Ø  Neu: Internet Explorer (Version 11+) Ausführbar ohne Plug-In © 2013 FHNW / IVGI WebGL für Geo - 3.Juli 2013 - GeoBeer 3
  • 4. WebGL Globe (Chrome Experiments) Beispiel: World Population Autor: Google Data Arts Team http://www.chromeexperiments.com/globe © 2013 FHNW / IVGI WebGL für Geo - 3.Juli 2013 - GeoBeer
  • 5. Geoid Viewer Autor: Laboratorio di Geomatica, Como http://geomatica.como.polimi.it/elab/geoid/geoidViewer.html © 2013 FHNW / IVGI WebGL für Geo - 3.Juli 2013 - GeoBeer
  • 6. F4 Map (OpenStreetMap 3D mit WebGL) F4 Map http://map.f4-group.com/ © 2013 FHNW / IVGI WebGL für Geo - 3.Juli 2013 - GeoBeer
  • 7. OpenWebGlobe •  Höhen- und Bilddaten •  POIs •  3D Modelle •  HTML5 Canvas Element •  Bildüberlagerungen •  Punktwolken •  … © 2013 FHNW / IVGI WebGL für Geo - 3.Juli 2013 - GeoBeer 7
  • 8. OpenWebGlobe – world.openwebglobe.org Autor: FHNW IVGI http://www.openwebglobe.org © 2013 FHNW / IVGI WebGL für Geo - 3.Juli 2013 - GeoBeer
  • 9. SwizzQuiz – http://www.openwebglobe.org/game © 2013 FHNW / IVGI WebGL für Geo - 3.Juli 2013 - GeoBeer
  • 10. here.com (Nokia) in 3D (WebGL) © 2013 FHNW / IVGI WebGL für Geo - 3.Juli 2013 - GeoBeer
  • 11. Google Maps (WebGL) © 2013 FHNW / IVGI WebGL für Geo - 3.Juli 2013 - GeoBeer
  • 12. Web IDE für processing.js: http://matrix.senecac.on.ca/~asalga/pjswebide/ © 2013 FHNW / IVGI WebGL für Geo - 3.Juli 2013 - GeoBeer
  • 13. Three.js - http://threejs.org/ OpenSource 3D Bibliothek © 2013 FHNW / IVGI WebGL für Geo - 3.Juli 2013 - GeoBeer
  • 14. Weitere Informationen •  http://www.khronos.org/webgl •  http://www.khronos.org/webgl/wiki/Main_Page •  http://www.khronos.org/webgl/security/ •  https://github.com/KhronosGroup/WebGL © 2013 FHNW / IVGI WebGL für Geo - 3.Juli 2013 - GeoBeer
  • 15. Vielen Dank! mehr Infos: Twitter @MartinChristen LinkedIn/Google+/GoogleTalk: martin.christen@gmail.com GitHub: martinchristen Folien: http://www.martinchristen.ch (Mehr über WebGL: Webilea 11. September 2013 in Basel) © 2013 FHNW / IVGI WebGL für Geo - 3.Juli 2013 - GeoBeer