Der Inhalt dieser Seite wurde von der Community übersetzt, jedoch wird er nicht mehr aktiv gepflegt und kann daher veraltet sein. Wenn du mithelfen möchtest, kannst du hier herausfinden wie deaktivierte Übersetzungen reaktiviert werden können.

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! (en-US)
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 (en-US) durch den webgl Contextnamen zur Verfügung - ältere Browser benötigen hingegen manchmal stattdessen den Contextnamen experimental-webgl.

Das kommende WebGL 2 (en-US) 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.

Siehe auch