SlideShare ist ein Scribd-Unternehmen logo
1 von 31
Downloaden Sie, um offline zu lesen
WebGL und X3DOM zur web-basierten
3D-Visualisierung in HTML5
Michel Krämer
Trendthema 3D
Photo by m4tik @ flickr.com




Jeder 5.
 Kinobesuch entfällt auf einen

                  3D-Film        Quelle: FFA, Mai 2011
2007                         2011




ilovetypography.com   nike.com/jumpman23/historyofflight
2007                 2011




radiantplumbing.com   erguvanplatin.com
Quo vadis?
3D-Spiele
3D-Software
OpenGL + Web = WebGL
WebGL
nutzt OpenGL

   WebGL


  OpenGL


  Grafikkarte
WebGL
ist eine Low-Level-API
Deklarative
3D-Szenen mit
X3DOM
X3DOM
HTML-Seite
 X3DOM-JavaScript
 X3D-Szene


 Sonstige HTML-Elemente
Demo
Demo
WebGL-fähige
Internet-Browser
  Firefox
  Chrome
  Safari
Internet Explorer?
Webbrowser-Verbreitung
             StatCounter.com, Oktober 2011


 41%



       26%
              25%




                          6%         2%
99%
aller Rechner mit Internet-Anschluss
haben Flash installiert  Millward Brown, Juli 2011
X3DOM-Fallback-Modell

      X3D


     WebGL


     Flash 11
dtmo delle
3 D-Sta net?
im  Inter




                 Image by GTA Geoinformatik GmbH
Demo
3D-Stadtmodell
 in einer Datenbank

       Browser


     CityServer3D


     3D-Datenbank
Integration
  von weiteren Daten

          Browser


       CityServer3D


3D-Datenbank   Sonstige Daten
Ausblick
23%
aller Deutschen ab 13 Jahren besitzen
ein Smartphone     Comscore, September-November 2010
75%
aller Deutschen ab 10 Jahren nutzen
das Internet           Statistisches Bundesamt, 2010
Michel Krämer
Fraunhofer IGD
Fraunhoferstraße 5
64283 Darmstadt
06151 155 415
michel.kraemer@igd.fraunhofer.de

Weitere ähnliche Inhalte

Andere mochten auch

Sesion 9 el plan de juego de papa para la crianza de hijos e hijas
Sesion 9 el plan de juego de papa para la crianza de hijos e hijasSesion 9 el plan de juego de papa para la crianza de hijos e hijas
Sesion 9 el plan de juego de papa para la crianza de hijos e hijasAsael Lopez
 
Mopa comité pilotage marques de pays 6 déc 12
Mopa comité pilotage marques de pays 6 déc 12Mopa comité pilotage marques de pays 6 déc 12
Mopa comité pilotage marques de pays 6 déc 12Hélène Hyon Pro
 
3-Cm24 2011-2012
3-Cm24 2011-20123-Cm24 2011-2012
3-Cm24 2011-2012mathome79
 
Motivation durch Faszination!
Motivation durch Faszination!Motivation durch Faszination!
Motivation durch Faszination!comvation
 
Klare Terminologie durch Finalyser TERM CHECK und UniTerm
Klare Terminologie durch Finalyser TERM CHECK und UniTermKlare Terminologie durch Finalyser TERM CHECK und UniTerm
Klare Terminologie durch Finalyser TERM CHECK und UniTermacolada_gmbh
 
Rodrigo présente armando
Rodrigo présente armandoRodrigo présente armando
Rodrigo présente armandoSchool
 
Essai en ligne ! Jean-François Maltais sur l'Approche Masterson en counseling...
Essai en ligne ! Jean-François Maltais sur l'Approche Masterson en counseling...Essai en ligne ! Jean-François Maltais sur l'Approche Masterson en counseling...
Essai en ligne ! Jean-François Maltais sur l'Approche Masterson en counseling...Louis Cournoyer
 
N’oublie pas mon petit CV, les demandeurs d’emploi font leur lettre à Saint-N...
N’oublie pas mon petit CV, les demandeurs d’emploi font leur lettre à Saint-N...N’oublie pas mon petit CV, les demandeurs d’emploi font leur lettre à Saint-N...
N’oublie pas mon petit CV, les demandeurs d’emploi font leur lettre à Saint-N...Cdr Formations
 
Marketing Digital 2.0 - Presentación en la Universidad de Palermo
Marketing Digital 2.0 - Presentación en la Universidad de PalermoMarketing Digital 2.0 - Presentación en la Universidad de Palermo
Marketing Digital 2.0 - Presentación en la Universidad de PalermoExelsum
 
El teorema de pitagoras 1
El teorema de pitagoras 1El teorema de pitagoras 1
El teorema de pitagoras 1Herney Rozo
 
Cómo hacer una bibliografía
Cómo hacer una bibliografíaCómo hacer una bibliografía
Cómo hacer una bibliografíaLázaro Zelaya
 
RéTrospective2009
RéTrospective2009RéTrospective2009
RéTrospective2009bricolo52
 
Venta a través de agencia de viajes
Venta a través de agencia de viajesVenta a través de agencia de viajes
Venta a través de agencia de viajesCanariasViaja
 

Andere mochten auch (19)

Shitstorm
ShitstormShitstorm
Shitstorm
 
Sesion 9 el plan de juego de papa para la crianza de hijos e hijas
Sesion 9 el plan de juego de papa para la crianza de hijos e hijasSesion 9 el plan de juego de papa para la crianza de hijos e hijas
Sesion 9 el plan de juego de papa para la crianza de hijos e hijas
 
Mopa comité pilotage marques de pays 6 déc 12
Mopa comité pilotage marques de pays 6 déc 12Mopa comité pilotage marques de pays 6 déc 12
Mopa comité pilotage marques de pays 6 déc 12
 
3-Cm24 2011-2012
3-Cm24 2011-20123-Cm24 2011-2012
3-Cm24 2011-2012
 
Motivation durch Faszination!
Motivation durch Faszination!Motivation durch Faszination!
Motivation durch Faszination!
 
Klare Terminologie durch Finalyser TERM CHECK und UniTerm
Klare Terminologie durch Finalyser TERM CHECK und UniTermKlare Terminologie durch Finalyser TERM CHECK und UniTerm
Klare Terminologie durch Finalyser TERM CHECK und UniTerm
 
Festival Ema
Festival EmaFestival Ema
Festival Ema
 
Rodrigo présente armando
Rodrigo présente armandoRodrigo présente armando
Rodrigo présente armando
 
Essai en ligne ! Jean-François Maltais sur l'Approche Masterson en counseling...
Essai en ligne ! Jean-François Maltais sur l'Approche Masterson en counseling...Essai en ligne ! Jean-François Maltais sur l'Approche Masterson en counseling...
Essai en ligne ! Jean-François Maltais sur l'Approche Masterson en counseling...
 
N’oublie pas mon petit CV, les demandeurs d’emploi font leur lettre à Saint-N...
N’oublie pas mon petit CV, les demandeurs d’emploi font leur lettre à Saint-N...N’oublie pas mon petit CV, les demandeurs d’emploi font leur lettre à Saint-N...
N’oublie pas mon petit CV, les demandeurs d’emploi font leur lettre à Saint-N...
 
Los 10 mandamientos de la calidad
Los 10 mandamientos de la calidadLos 10 mandamientos de la calidad
Los 10 mandamientos de la calidad
 
Marketing Digital 2.0 - Presentación en la Universidad de Palermo
Marketing Digital 2.0 - Presentación en la Universidad de PalermoMarketing Digital 2.0 - Presentación en la Universidad de Palermo
Marketing Digital 2.0 - Presentación en la Universidad de Palermo
 
Placas tectónicas
Placas tectónicasPlacas tectónicas
Placas tectónicas
 
El teorema de pitagoras 1
El teorema de pitagoras 1El teorema de pitagoras 1
El teorema de pitagoras 1
 
Cómo hacer una bibliografía
Cómo hacer una bibliografíaCómo hacer una bibliografía
Cómo hacer una bibliografía
 
RéTrospective2009
RéTrospective2009RéTrospective2009
RéTrospective2009
 
Tecnologías limpias
Tecnologías limpiasTecnologías limpias
Tecnologías limpias
 
Venta a través de agencia de viajes
Venta a través de agencia de viajesVenta a través de agencia de viajes
Venta a través de agencia de viajes
 
Intervention Véronique Couderc - Animation de réseaux - INTERPATT 2012
Intervention Véronique Couderc - Animation de réseaux - INTERPATT 2012Intervention Véronique Couderc - Animation de réseaux - INTERPATT 2012
Intervention Véronique Couderc - Animation de réseaux - INTERPATT 2012
 

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

Die 3D-Revolution im Web
Die 3D-Revolution im WebDie 3D-Revolution im Web
Die 3D-Revolution im WebMichel Krämer
 
Dominik Helleberg Widgets Wjax
Dominik Helleberg Widgets WjaxDominik Helleberg Widgets Wjax
Dominik Helleberg Widgets WjaxDominik Helleberg
 
3D - Spiel mit der Technik, Tekom 2016
3D - Spiel mit der Technik, Tekom 20163D - Spiel mit der Technik, Tekom 2016
3D - Spiel mit der Technik, Tekom 2016Robert Siegel
 
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
 
Browserbasiertes computing, RIA
Browserbasiertes computing, RIABrowserbasiertes computing, RIA
Browserbasiertes computing, RIAThomas Christinck
 
Schritt für Schritt zum digitalen Zwilling
Schritt für Schritt zum digitalen ZwillingSchritt für Schritt zum digitalen Zwilling
Schritt für Schritt zum digitalen ZwillingDaniel Lehner
 
Multiscreen Experience Design (September 2012, MuC UP12)
Multiscreen Experience Design (September 2012, MuC UP12)Multiscreen Experience Design (September 2012, MuC UP12)
Multiscreen Experience Design (September 2012, MuC UP12)Wolfram Nagel
 
Responsive Webdesign Process
Responsive Webdesign ProcessResponsive Webdesign Process
Responsive Webdesign ProcessSven Wolfermann
 
Windows 8 Business-App-Entwicklung
Windows 8 Business-App-EntwicklungWindows 8 Business-App-Entwicklung
Windows 8 Business-App-EntwicklungMatthias Jauernig
 
Tobias Nebel - Herausforderungen und Changen in Full-Stack-IoT-Projekten
Tobias Nebel - Herausforderungen und Changen in Full-Stack-IoT-ProjektenTobias Nebel - Herausforderungen und Changen in Full-Stack-IoT-Projekten
Tobias Nebel - Herausforderungen und Changen in Full-Stack-IoT-ProjektenDevDay Dresden
 
Flash vs. Silverlight auf dem mobilen Endgerät
Flash vs. Silverlight auf dem mobilen EndgerätFlash vs. Silverlight auf dem mobilen Endgerät
Flash vs. Silverlight auf dem mobilen EndgerätJakob
 
Java Applet Plugin für Android Browser
Java Applet Plugin für Android BrowserJava Applet Plugin für Android Browser
Java Applet Plugin für Android Browsertroido
 
Trittsicher auf allen Mobilen Pfaden mit HTML5 & jQuery Mobile
Trittsicher auf allen Mobilen Pfaden mit HTML5 & jQuery MobileTrittsicher auf allen Mobilen Pfaden mit HTML5 & jQuery Mobile
Trittsicher auf allen Mobilen Pfaden mit HTML5 & jQuery MobileBenjamin Schmid
 
SharePoint, HTML5 und mobile Geräte (SharePoint UserGroup Dresden 11/2011)
SharePoint, HTML5 und mobile Geräte (SharePoint UserGroup Dresden 11/2011)SharePoint, HTML5 und mobile Geräte (SharePoint UserGroup Dresden 11/2011)
SharePoint, HTML5 und mobile Geräte (SharePoint UserGroup Dresden 11/2011)Christian Heindel
 

Ähnlich wie 3D-Visualisierung im Internet mit HTML5, WebGL und X3DOM (20)

Die 3D-Revolution im Web
Die 3D-Revolution im WebDie 3D-Revolution im Web
Die 3D-Revolution im Web
 
Dominik Helleberg Widgets Wjax
Dominik Helleberg Widgets WjaxDominik Helleberg Widgets Wjax
Dominik Helleberg Widgets Wjax
 
3D - Spiel mit der Technik, Tekom 2016
3D - Spiel mit der Technik, Tekom 20163D - Spiel mit der Technik, Tekom 2016
3D - Spiel mit der Technik, Tekom 2016
 
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
 
HTML5 is your friend
HTML5 is your friendHTML5 is your friend
HTML5 is your friend
 
Browserbasiertes computing, RIA
Browserbasiertes computing, RIABrowserbasiertes computing, RIA
Browserbasiertes computing, RIA
 
Schritt für Schritt zum digitalen Zwilling
Schritt für Schritt zum digitalen ZwillingSchritt für Schritt zum digitalen Zwilling
Schritt für Schritt zum digitalen Zwilling
 
Multiscreen Experience Design (September 2012, MuC UP12)
Multiscreen Experience Design (September 2012, MuC UP12)Multiscreen Experience Design (September 2012, MuC UP12)
Multiscreen Experience Design (September 2012, MuC UP12)
 
VDC-Newsletter November 2014
VDC-Newsletter November 2014VDC-Newsletter November 2014
VDC-Newsletter November 2014
 
Responsive Webdesign Process
Responsive Webdesign ProcessResponsive Webdesign Process
Responsive Webdesign Process
 
VDC Newsletter 2011-08
VDC Newsletter 2011-08VDC Newsletter 2011-08
VDC Newsletter 2011-08
 
VDC Newsletter 2014-04
VDC Newsletter 2014-04VDC Newsletter 2014-04
VDC Newsletter 2014-04
 
Windows 8 Business-App-Entwicklung
Windows 8 Business-App-EntwicklungWindows 8 Business-App-Entwicklung
Windows 8 Business-App-Entwicklung
 
Tobias Nebel - Herausforderungen und Changen in Full-Stack-IoT-Projekten
Tobias Nebel - Herausforderungen und Changen in Full-Stack-IoT-ProjektenTobias Nebel - Herausforderungen und Changen in Full-Stack-IoT-Projekten
Tobias Nebel - Herausforderungen und Changen in Full-Stack-IoT-Projekten
 
Flash vs. Silverlight auf dem mobilen Endgerät
Flash vs. Silverlight auf dem mobilen EndgerätFlash vs. Silverlight auf dem mobilen Endgerät
Flash vs. Silverlight auf dem mobilen Endgerät
 
Java Applet Plugin für Android Browser
Java Applet Plugin für Android BrowserJava Applet Plugin für Android Browser
Java Applet Plugin für Android Browser
 
Trittsicher auf allen Mobilen Pfaden mit HTML5 & jQuery Mobile
Trittsicher auf allen Mobilen Pfaden mit HTML5 & jQuery MobileTrittsicher auf allen Mobilen Pfaden mit HTML5 & jQuery Mobile
Trittsicher auf allen Mobilen Pfaden mit HTML5 & jQuery Mobile
 
PLM-Zukunftsthemen
PLM-ZukunftsthemenPLM-Zukunftsthemen
PLM-Zukunftsthemen
 
SharePoint, HTML5 und mobile Geräte (SharePoint UserGroup Dresden 11/2011)
SharePoint, HTML5 und mobile Geräte (SharePoint UserGroup Dresden 11/2011)SharePoint, HTML5 und mobile Geräte (SharePoint UserGroup Dresden 11/2011)
SharePoint, HTML5 und mobile Geräte (SharePoint UserGroup Dresden 11/2011)
 
HTML5 Update (am Internet-Briefing)
HTML5 Update (am Internet-Briefing)HTML5 Update (am Internet-Briefing)
HTML5 Update (am Internet-Briefing)
 

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