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_arrays
EXT_blend_minmax
EXT_color_buffer_float
EXT_color_buffer_half_float
EXT_disjoint_timer_query
EXT_frag_depth
EXT_sRGB
EXT_shader_texture_lod
EXT_texture_filter_anisotropic
OES_element_index_uint
OES_standard_derivatives
OES_texture_float
OES_texture_float_linear
OES_texture_half_float
OES_texture_half_float_linear
OES_vertex_array_object
WEBGL_color_buffer_float
WEBGL_compressed_texture_atc
WEBGL_compressed_texture_etc
WEBGL_compressed_texture_etc1
WEBGL_compressed_texture_pvrtc
WEBGL_compressed_texture_s3tc
WEBGL_debug_renderer_info
WEBGL_debug_shaders
WEBGL_depth_texture
WEBGL_draw_buffers
WEBGL_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
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 istfalse
. webgl.disable_extensions
- Ein boolescher Wert, der bei
true
alle 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
true
den bisher experimentellen WebGL2-Context im Browser aktiviert. Der Standarardwert istfalse
- ab Firefox 51 ist der Standardwerttrue
.