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
ANGLE_instanced_arraysEXT_blend_minmaxEXT_color_buffer_floatEXT_color_buffer_half_floatEXT_disjoint_timer_queryEXT_frag_depthEXT_sRGBEXT_shader_texture_lodEXT_texture_filter_anisotropicOES_element_index_uintOES_standard_derivativesOES_texture_floatOES_texture_float_linearOES_texture_half_floatOES_texture_half_float_linearOES_vertex_array_objectWEBGL_color_buffer_floatWEBGL_compressed_texture_atcWEBGL_compressed_texture_etcWEBGL_compressed_texture_etc1WEBGL_compressed_texture_pvrtcWEBGL_compressed_texture_s3tcWEBGL_debug_renderer_infoWEBGL_debug_shadersWEBGL_depth_textureWEBGL_draw_buffersWEBGL_lose_context
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
| 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
trueeinen 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 istfalse. webgl.disable_extensions- Ein boolescher Wert, der bei
truealle WebGL Extensions deaktiviert. Der Standarardwert istfalse.
WebGL2 Aktivierung
webgl.enable-prototype-webgl2(ab Firefox 38)webgl.enable-webgl2(ab Firefox 50)- Ein boolescher Wert, der bei
trueden bisher experimentellen WebGL2-Context im Browser aktiviert. Der Standarardwert istfalse- ab Firefox 51 ist der Standardwerttrue.