WebGL

444 Aufrufe

Veröffentlicht am

Einblick in WebGL auf Deutsch

Veröffentlicht in: Technologie
0 Kommentare
1 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
444
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
14
Aktionen
Geteilt
0
Downloads
4
Kommentare
0
Gefällt mir
1
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

WebGL

  1. 1. WebGL DIETER PISAREWSKI@HAW HAMBURG 1
  2. 2. Gliederung Was ist WebGL Geschichte Motivation Aktueller Stand Browserunterstützung Ecosystem Beispiele Kritik Zusammenfassung 2
  3. 3. Was ist WebGL OpenGL steht für Open Graphics Library. OpenGL ES(Embedded Systems) ist eine vereinfachte Version von OpenGL. WebGL = OpenGL ES + JavaScript. WebGL != CSS3D 3
  4. 4. Was ist WebGL Geschichte Entstanden aus einem Experiment von einem Mozilla Entwickler. Ende 2007 hatten Mozilla und Opera eigene Implementierungen. 2009 hat Khronos Group Entwicklung von WebGL in Zusammenarbeit mit Apple, Google, Mozilla und Opera gestartet. Erste Version wurde im März 2011 bereitgestellt. Seit 2013 wird Spezifikation von WebGL 2 entwickelt. 4
  5. 5. Motivation Vorteile: WebGL vs. Desktop Graphics Keine Installation Immer aktuell – keine Updates oder Patches Cross-platform WebGL vs. Flash Integration mit DOM-Elementen WebGL ist schneller und effizienter WebGL ist frei Wird künftig auch auf iPhone und iPad laufen 5
  6. 6. Motivation Einsatzgebiete: Cross-platform Applications Webseiten mit 3D Inhalten 3D Apps auf mobilen Geräten(künftig) 6
  7. 7. Aktueller Stand Browserunterstützung [1] 7
  8. 8. Aktueller Stand Browserunterstützung 74% 26% Desktop-Browser WebGL kein WebGL 8 6% 94% mobile Browser WebGL kein WebGL
  9. 9. Aktueller Stand Ecosystem Three.js – Javascript-3D-Bibliothek THREEx – Spielerweiterungen für Three.js Voodoo.js – Framework, verbindet 2D und 3D Welten. Kompatibel mit Three.js Emscripten – C/C++ -> JavaScript Compiler Unreal Engine – kommerzielle Gaming Engine 9
  10. 10. Beispiele Vorwissen Ohne Shader geht nichts. Bei WebGL werden nur Vertex-Shader und Fragment- Shader verwendet. Shader werden mit OpenGL Shading Language(GLSL) programmiert. Mesh ist ein Polygonnetz zur Modellierung von 3D- Objekten. Dreieck ist ein grundlegender Baustein in Computergrafik. 10
  11. 11. Beispiele Vorwissen Meshes bestehen meistens aus Dreiecken. 11
  12. 12. Beispiele „Hello World Programm“ 12
  13. 13. Beispiele „Hello World Programm“ 13
  14. 14. Beispiele „Hello World Programm“ 14 Shader
  15. 15. Beispiele „Hello World Programm“ 15 Koordinaten des Dreiecks Hintergrundfarbe
  16. 16. Beispiele „Hello World Programm“ 16 Daten für WebGL Dreieck zeichnen
  17. 17. Beispiele Three.js Programm 17 http://dpisarewski.github.io/
  18. 18. Beispiele Three.js Programm 18
  19. 19. Beispiele Three.js Programm 19
  20. 20. Beispiele Chrome Experiments Car Visualizer http://carvisualizer.plus360degrees.com/threejs/ Eye texture raytracer http://www.vill.ee/eye/ Interactive Globe http://workshop.chromeexperiments.com/projects/arms globe/ WebGL Bookcase http://workshop.chromeexperiments.com/bookcase/ 20
  21. 21. Kritik Es gab einen Bug, mit dem man Grafikspeicher stehlen konnte. 21 [2]
  22. 22. Zusammenfassung WebGL ist ein Subset von OpenGL für Webbrowser. WebGL ist noch im experimentellen Modus. Ohne Frameworks ist die Implementierung aufwendig. Es gibt heute schon jede Menge Bibliotheken/ Frameworks und Werkzeuge. 22
  23. 23. Fragen? 23
  24. 24. Quellen Abbildungen [1] http://caniuse.com/#search=WebGL (29.05.2014) [2] http://www.contextis.com/blog/webgl-more-webgl-security-flaws/ (29.05.2014) Themen http://de.wikipedia.org/wiki/WebGL (29.05.2014) http://codeflow.org/entries/2013/feb/02/why-you-should-use- webgl/#so-how-many-people-is-that(29.05.2014) http://www.peter-strohm.de/webgl/ (29.05.2014) http://threejs.org/examples/ (29.05.2014) http://www.voodoojs.com/ (29.05.2014) http://www.chromeexperiments.com/ (29.05.2014) 24

×