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
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!
| 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.