WebGL

Mit WebGL steht eine API zur Verfügung, die an OpenGL ES 2.0 angelehnt ist, um 3D-Grafik im HTML canvas Element zu ermöglichen. WebGL wird in einer zukünftigen Version von Firefox unterstützt und kann in den Nightly Trunks ausprobiert werden.

Reference

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.

Specifications

Specification	Status	Comment
WebGL 1.0	Empfehlung	Initial definition.
WebGL 2.0	Bearbeiterentwurf

Feature	Firefox (Gecko)	Chrome	Internet Explorer	Opera	Safari
Basic support	4.0 (2.0)	9	11	12 (experiment)	5.1 (experiment)
`OES_texture_float`	6.0 (6.0)	?	?	?	?
`OES_standard_derivatives`	10.0 (10.0)	?	?	?	?
`EXT_texture_filter_anisotropic`	13.0 (13.0)	?	?	?	?
`WEBGL_compressed_texture_s3tc`	15.0 (15.0)	?	?	?	?
`drawingBufferWidth` and `drawingBufferHeight` attributes	9.0 (9.0)	?	?	?	?

Feature	Firefox Mobile (Gecko)	Chrome for Android	IE Mobile	Opera Mobile	Safari Mobile
Basic support	4	25 (experiment)	Nicht unterstützt	12 (experiment)	8.1
`drawingBufferWidth` and `drawingBufferHeight` attributes	9.0 (9.0)	25	?	?	?
`OES_texture_float`	6.0 (6.0)	25	?	?	?
`OES_standard_derivatives`	10.0 (10.0)	25	?	?	?
`EXT_texture_filter_anisotropic`	13.0 (13.0)	25	?	?	?
`OES_element_index_uint`	?	25	?	?	?
`OES_vertex_array_object`	?	25	?	?	?
`WEBGL_compressed_texture_s3tc`	15.0 (15.0)	25 prefixed with WEBKIT_	?	?	?
`WEBKIT_EXT_texture_filter_nisotropic`	Nicht unterstützt	25	Nicht unterstützt	Nicht unterstützt	?

Compatibility notes

In addition to the browser, the GPU itself also needs to support the feature. So, for example, S3 Texture Compression (S3TC) is only available on Tegra-based tablets. Most browsers make the WebGL context available through the webgl context name, but older ones need experimental-webgl as well. In addition, the upcoming WebGL 2 is fully backwards-compatible and will have the context name experimental-webgl2 in the future for testing.

Gecko notes

WebGL debugging and testing

Starting with Gecko 10.0 (Firefox 10.0 / Thunderbird 10.0 / SeaMonkey 2.7), there are two preferences available which let you control the capabilities of WebGL for testing purposes:

webgl.min_capability_mode: A Boolean property that, when true, enables a minimum capability mode. When in this mode, WebGL is configured to only support the bare minimum feature set and capabilities required by the WebGL specification. This lets you ensure that your WebGL code will work on any device or browser, regardless of their capabilities. This is false by default.
webgl.disable_extensions: A Boolean property that, when true, disables all WebGL extensions. This is false by default.