WebGL

WebGL (Web Graphics Library) ist eine Javascript-API zum Rendern interaktiver 3D und 2D Grafiken mittels eines kompatiblen Web-Browsers ohne Einsatz zusätzlicher Plugins. Mit WebGL steht eine API zur Verfügung, die an OpenGL ES 2.0 angelehnt ist und deren Inhalte mittels eines <canvas> Elements dargestellt werden.

WebGL steht ab Firefox 4+, Google Chrome 9+, Opera 12+, Safari 5.1+ und Internet Explorer 11+ zur Verfügung. Allerdings muss auch die Hardware des Zielgerätes dieses Feature unterstützen.

WebGL2 steht ab Firefox 51+, Google Chrome 56+ und Opera 42+ standardmäßig zur Verfügung. WebGL2 wird derzeit nicht von Internet Explorer oder Edge unterstützt.

Das <canvas> Element kann auch von Canvas 2D genutzt werden, um 2D Grafiken rendern zu können.

Reference

Extensions

Events

Konstanten und Typen

Themen

Die folgenden acht Artikel bauen aufeinander auf.

Einführung in WebGL: Wie man einen WebGL-Kontext herstellt.
Hinzufügen von 2D Inhalten in einen WebGL-Kontext: Wie eine einfache, flache Form mittels WebGL erstellt wird.
Farben mittels Shader in einen WebGL-Kontext hinzufügen: Zeigt wie Farben mit Shadern auf die Form gebracht werden können.
Objekte mit WebGL animieren: Erklärt wie Objekte rotiert und verschiebt werden, um eine einfache Animation zu erstellen.
3D-Objekte mit WebGL erstellen: Erläutert wie dreidimensionale Objekte erstellt und animiert werden (ein Würfel dient als Beispiel).
Texturen in WebGL verwenden: Demonstriert wie Texturen auf die Oberfläche eines Objektes gezeichnet werden können.
Beleuchtung in WebGL: Wie Beleuchtungseffekte in unserem WebGL-Kontext simuliert werden.
Animierte Texturen in WebGL: Animierte Texturen werden mittels einem Ogg-Video auf der Oberfläche eines rotierenden Würfels realisiert.

Ressourcen

WebGL Spezifikation: Der Entwurf der WebGL Spezifikation.
Khronos WebGL Seite: Die Hauptseite für WebGL der Khronos Group.
Learning WebGL: Eine Reihe von Tutorials über WebGL (Englisch).
Das WebGL Kochbuch: Rezepte für das Schreiben von WebGL-Code (Englisch).
Sylvester: Eine Open-Source Bibliothek, die das Verarbeiten von Vektoren und Matrizen erleichtert.
Planet WebGL: Eine Feed-Sammlung von Leuten, die in der WebGL Community aktiv sind.

Spezifikationen

Spezifikation	Status	Hinweis
WebGL 1.0	Empfehlung	Grundlegende Definition. Basierend auf OpenGL ES 2.0
WebGL 2.0	Bearbeiterentwurf	Erweiterung von WebGL1. Basierend auf OpenGL ES 3.0.
OpenGL ES 2.0	Standard
OpenGL ES 3.0	Standard

Browser-Kompatibilität

Wir konvertieren die Kompatibilitätsdaten in ein maschinenlesbares JSON Format. Diese Kompatibilitätstabelle liegt noch im alten Format vor, denn die darin enthaltenen Daten wurden noch nicht konvertiert. Finde heraus wie du helfen kannst!

Desktop
Mobile

Feature	Edge	Firefox (Gecko)	Chrome	Internet Explorer	Opera	Safari
Basic support	(Ja)	4.0 (2.0)	9	11	12^[1]	5.1^[1]

Feature	Edge	Firefox Mobile (Gecko)	Chrome for Android	IE Mobile	Opera Mobile	Safari Mobile
Basic support	(Ja)	4	25^[1]	Nicht unterstützt	12^[1]	8.1

[1] Die Implementierung dieses Features ist experimentell.

Kompatibilitätshinweise

Neben dem Browser muss auch die GPU selbst dieses Feature unterstützen. So ist zum Beispiel S3 Texture Compression (S3TC) derzeit nur auf Desktop-Rechnern und Tegra-basierenden Tablets verfügbar. Die meisten Browser stellen den WebGL-Context durch den webgl Contextnamen zur Verfügung - ältere Browser benötigen hingegen manchmal stattdessen den Contextnamen experimental-webgl.

Das kommende WebGL 2 ist vollständig abwärtskompatibel und wird über den Contextnamen experimental-webgl2 aufgerufen. Ab Firefox 42.0 ist der Aufruf auch über den Contextnamen webgl2 möglich - WebGL2 ist bis einschließlich Firefox 50 ein experimentelles Feature und kann zu Testzwecken über Flag-Settings des Konfigurationseditors aktiviert werden. WebGL2 ist ab Firefox 51+, Chrome 56+ und Opera 42+ standardmäßig aktiviert - Internet Explorer und Edge bieten derzeit noch keinen Support für WebGL2.

Anmerkungen zu Gecko

WebGL Debugging und Testing

Ab Gecko 10.0 (Firefox 10.0 / Thunderbird 10.0 / SeaMonkey 2.7) werden zwei Möglichkeiten geboten, die WebGL-Fähigkeit des Browsers zu Testzwecken zu beeinflussen:

webgl.min_capability_mode: Ein boolescher Wert, der bei true einen minimalen Kompatibiätsmodus zur Verfügung stellt. Ist dieser Modus aktiviert, wird WebGL ausschließlich mit dem geringsten Features betrieben, die von der WebGL-Spezifikation definiert wurden. Damit lässt sich sicherstellen, dass dein WebGL-Code auf jedem Gerät unabhängig besonderer Fähigkeiten lauffähig ist. Der Standarardwert ist false.
webgl.disable_extensions: Ein boolescher Wert, der bei true alle WebGL Extensions deaktiviert. Der Standarardwert ist false.

WebGL2 Aktivierung

webgl.enable-prototype-webgl2 (ab Firefox 38)
webgl.enable-webgl2 (ab Firefox 50): Ein boolescher Wert, der bei true den bisher experimentellen WebGL2-Context im Browser aktiviert. Der Standarardwert ist false - ab Firefox 51 ist der Standardwert true.