3D-Visualisierung im Internet mit HTML5, WebGL und X3DOM

31
WebGL und X3DOM zur web-basierten 3D-Visualisierung in HTML5 Michel Krämer

description

Präsentation vom Workshop 3D-Stadtmodelle in Bonn am 08.11.2011. Mit den neuen Technologien HTML5, WebGL und X3DOM ist es möglich 3D-Daten im Internet-Browser zu visualisieren ohne ein zusätzliches Plugin installieren zu müssen.

Transcript of 3D-Visualisierung im Internet mit HTML5, WebGL und X3DOM

Page 1: 3D-Visualisierung im Internet mit HTML5, WebGL und X3DOM

WebGL und X3DOM zur web-basierten3D-Visualisierung in HTML5Michel Krämer

Page 2: 3D-Visualisierung im Internet mit HTML5, WebGL und X3DOM

Trendthema 3D

Page 3: 3D-Visualisierung im Internet mit HTML5, WebGL und X3DOM

Jeder 5.

Photo by m4tik @ flickr.com

Kinobesuch entfällt auf einen

3D-FilmQuelle: FFA, Mai 2011

Page 4: 3D-Visualisierung im Internet mit HTML5, WebGL und X3DOM

2007 2011

ilovetypography.com nike.com/jumpman23/historyofflight

Page 5: 3D-Visualisierung im Internet mit HTML5, WebGL und X3DOM

2007 2011

radiantplumbing.com erguvanplatin.com

Page 6: 3D-Visualisierung im Internet mit HTML5, WebGL und X3DOM

Quo vadis?

Page 7: 3D-Visualisierung im Internet mit HTML5, WebGL und X3DOM

3D-Spiele

Page 8: 3D-Visualisierung im Internet mit HTML5, WebGL und X3DOM

3D-Software

Page 9: 3D-Visualisierung im Internet mit HTML5, WebGL und X3DOM

OpenGL + Web = WebGL

Page 10: 3D-Visualisierung im Internet mit HTML5, WebGL und X3DOM

OpenGL

WebGL

Grafikkarte

nutzt OpenGLWebGL

Page 11: 3D-Visualisierung im Internet mit HTML5, WebGL und X3DOM

WebGList eine Low-Level-API

Page 12: 3D-Visualisierung im Internet mit HTML5, WebGL und X3DOM
Page 13: 3D-Visualisierung im Internet mit HTML5, WebGL und X3DOM

X3DOMDeklarative3D-Szenen mit

Page 14: 3D-Visualisierung im Internet mit HTML5, WebGL und X3DOM

X3DOM

X3DOM-JavaScript

HTML-Seite

X3D-Szene

Sonstige HTML-Elemente

Page 15: 3D-Visualisierung im Internet mit HTML5, WebGL und X3DOM

Demo

Page 16: 3D-Visualisierung im Internet mit HTML5, WebGL und X3DOM

Demo

Page 17: 3D-Visualisierung im Internet mit HTML5, WebGL und X3DOM

WebGL-fähige

FirefoxChromeSafari

Internet-Browser

Page 18: 3D-Visualisierung im Internet mit HTML5, WebGL und X3DOM

Internet Explorer?

Page 19: 3D-Visualisierung im Internet mit HTML5, WebGL und X3DOM

Webbrowser-VerbreitungStatCounter.com, Oktober 2011

41%

26% 25%

6% 2%

Page 20: 3D-Visualisierung im Internet mit HTML5, WebGL und X3DOM

9 %aller Rechner mit Internet-Anschlusshaben Flash installiert Millward Brown, Juli 2011

9

Page 21: 3D-Visualisierung im Internet mit HTML5, WebGL und X3DOM

X3DOM-Fallback-Modell

X3D

WebGL

Flash 11

Page 22: 3D-Visualisierung im Internet mit HTML5, WebGL und X3DOM

3D-Stadtmodelleim Internet?

Image by GTA Geoinformatik GmbH

Page 23: 3D-Visualisierung im Internet mit HTML5, WebGL und X3DOM

Demo

Page 24: 3D-Visualisierung im Internet mit HTML5, WebGL und X3DOM

3D-Datenbank

in einer Datenbank3D-Stadtmodell

CityServer3D

Browser

Page 25: 3D-Visualisierung im Internet mit HTML5, WebGL und X3DOM
Page 26: 3D-Visualisierung im Internet mit HTML5, WebGL und X3DOM

3D-Datenbank

von weiteren DatenIntegration

CityServer3D

Browser

Sonstige Daten

Page 27: 3D-Visualisierung im Internet mit HTML5, WebGL und X3DOM

Ausblick

Page 28: 3D-Visualisierung im Internet mit HTML5, WebGL und X3DOM
Page 29: 3D-Visualisierung im Internet mit HTML5, WebGL und X3DOM

23%aller Deutschen ab 13 Jahren besitzenein Smartphone Comscore, September-November 2010

Page 30: 3D-Visualisierung im Internet mit HTML5, WebGL und X3DOM

75%aller Deutschen ab 10 Jahren nutzendas Internet Statistisches Bundesamt, 2010

Page 31: 3D-Visualisierung im Internet mit HTML5, WebGL und X3DOM

Michel KrämerFraunhofer IGDFraunhoferstraße 564283 Darmstadt06151 155 [email protected]