Einblick in WebGL auf Deutsch

1. WebGL
DIETER PISAREWSKI@HAW HAMBURG
1

2. Gliederung
Was ist WebGL
Geschichte
Motivation
Aktueller Stand
Browserunterstützung
Ecosystem
Beispiele
Kritik
Zusammenfassung
2

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. 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. 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. Motivation
Einsatzgebiete:
Cross-platform Applications
Webseiten mit 3D Inhalten
3D Apps auf mobilen Geräten(künftig)
6

7. Aktueller Stand
Browserunterstützung
[1]
7

8. Aktueller Stand
Browserunterstützung
74%
26%
Desktop-Browser
WebGL
kein WebGL
8
6%
94%
mobile Browser
WebGL
kein WebGL

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. 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. Beispiele
Vorwissen
Meshes bestehen meistens aus Dreiecken.
11

12. Beispiele
„Hello World Programm“
12

13. Beispiele
„Hello World Programm“
13

14. Beispiele
„Hello World Programm“
14
Shader

15. Beispiele
„Hello World Programm“
15
Koordinaten des
Dreiecks
Hintergrundfarbe

16. Beispiele
„Hello World Programm“
16
Daten für
WebGL
Dreieck zeichnen

17. Beispiele
Three.js Programm
17
http://dpisarewski.github.io/

18. Beispiele
Three.js Programm
18

19. Beispiele
Three.js Programm
19

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. Kritik
Es gab einen Bug, mit dem man Grafikspeicher stehlen konnte.
21
[2]

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. Fragen?
23

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