WebGL
DIETER PISAREWSKI@HAW HAMBURG
1
Gliederung
Was ist WebGL
Geschichte
Motivation
Aktueller Stand
Browserunterstützung
Ecosystem
Beispiele
Kritik
Zusammenfas...
Was ist WebGL
OpenGL steht für Open Graphics Library.
OpenGL ES(Embedded Systems) ist eine vereinfachte
Version von OpenGL...
Was ist WebGL
Geschichte
Entstanden aus einem Experiment von einem Mozilla
Entwickler.
Ende 2007 hatten Mozilla und Opera ...
Motivation
Vorteile:
WebGL vs. Desktop Graphics
Keine Installation
Immer aktuell – keine Updates oder Patches
Cross-platfo...
Motivation
Einsatzgebiete:
Cross-platform Applications
Webseiten mit 3D Inhalten
3D Apps auf mobilen Geräten(künftig)
6
Aktueller Stand
Browserunterstützung
[1]
7
Aktueller Stand
Browserunterstützung
74%
26%
Desktop-Browser
WebGL
kein WebGL
8
6%
94%
mobile Browser
WebGL
kein WebGL
Aktueller Stand
Ecosystem
Three.js – Javascript-3D-Bibliothek
THREEx – Spielerweiterungen für Three.js
Voodoo.js – Framewo...
Beispiele
Vorwissen
Ohne Shader geht nichts.
Bei WebGL werden nur Vertex-Shader und Fragment-
Shader verwendet.
Shader wer...
Beispiele
Vorwissen
Meshes bestehen meistens aus Dreiecken.
11
Beispiele
„Hello World Programm“
12
Beispiele
„Hello World Programm“
13
Beispiele
„Hello World Programm“
14
Shader
Beispiele
„Hello World Programm“
15
Koordinaten des
Dreiecks
Hintergrundfarbe
Beispiele
„Hello World Programm“
16
Daten für
WebGL
Dreieck zeichnen
Beispiele
Three.js Programm
17
http://dpisarewski.github.io/
Beispiele
Three.js Programm
18
Beispiele
Three.js Programm
19
Beispiele
Chrome Experiments
Car Visualizer
http://carvisualizer.plus360degrees.com/threejs/
Eye texture raytracer
http://...
Kritik
Es gab einen Bug, mit dem man Grafikspeicher stehlen konnte.
21
[2]
Zusammenfassung
WebGL ist ein Subset von OpenGL für Webbrowser.
WebGL ist noch im experimentellen Modus.
Ohne Frameworks i...
Fragen?
23
Quellen
Abbildungen
[1] http://caniuse.com/#search=WebGL (29.05.2014)
[2] http://www.contextis.com/blog/webgl-more-webgl-s...
Nächste SlideShare
Wird geladen in …5
×

WebGL

491 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
491
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
8
Aktionen
Geteilt
0
Downloads
5
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

×