1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
|
---
title: WebGL
slug: Web/API/WebGL_API
tags:
- WebGL
- WebGL2
translation_of: Web/API/WebGL_API
---
<div>{{WebGLSidebar}}</div>
<div class="summary">
<p>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 <a class="external" href="http://www.khronos.org/webgl/" title="http://www.khronos.org/webgl/">WebGL</a> steht eine API zur Verfügung, die an <a class="external" href="http://www.khronos.org/opengles/">OpenGL ES 2.0</a> angelehnt ist und deren Inhalte mittels eines {{HTMLElement("canvas")}} Elements dargestellt werden.</p>
</div>
<p>WebGL steht ab <a href="/en-US/Firefox" title="Firefox 4 for developers">Firefox</a> 4+, <a href="http://www.google.com/chrome/" title="http://www.google.com/chrome/">Google Chrome</a> 9+, <a href="http://www.opera.com/" title="http://www.opera.com/">Opera</a> 12+, <a href="http://www.apple.com/safari/" title="http://www.apple.com/fr/safari/">Safari </a>5.1+ und <a href="http://windows.microsoft.com/en-us/internet-explorer/browser-ie">Internet Explorer</a> 11+ zur Verfügung. Allerdings muss auch die Hardware des Zielgerätes dieses Feature unterstützen.</p>
<p>WebGL2 steht ab <a href="/en-US/Firefox" title="Firefox 4 for developers">Firefox</a> 51+, <a href="http://www.google.com/chrome/" title="http://www.google.com/chrome/">Google Chrome</a> 56+ und <a href="http://www.opera.com/">Opera</a> 42+ standardmäßig zur Verfügung. WebGL2 wird derzeit nicht von Internet Explorer oder Edge unterstützt.</p>
<p>Das {{HTMLElement("canvas")}} Element kann auch von <a href="/de/docs/Web/API/Canvas_API">Canvas 2D</a> genutzt werden, um 2D Grafiken rendern zu können.</p>
<h2 id="Reference">Reference</h2>
<div class="index">
<ul>
<li>{{domxref("WebGLRenderingContext")}}</li>
<li>{{domxref("WebGL2RenderingContext")}} {{experimental_inline}}</li>
<li>{{domxref("WebGLActiveInfo")}}</li>
<li>{{domxref("WebGLBuffer")}}</li>
<li>{{domxref("WebGLContextEvent")}}</li>
<li>{{domxref("WebGLFramebuffer")}}</li>
<li>{{domxref("WebGLProgram")}}</li>
<li>{{domxref("WebGLQuery")}} {{experimental_inline}}</li>
<li>{{domxref("WebGLRenderbuffer")}}</li>
<li>{{domxref("WebGLSampler")}} {{experimental_inline}}</li>
<li>{{domxref("WebGLShader")}}</li>
<li>{{domxref("WebGLShaderPrecisionFormat")}}</li>
<li>{{domxref("WebGLSync")}} {{experimental_inline}}</li>
<li>{{domxref("WebGLTexture")}}</li>
<li>{{domxref("WebGLTransformFeedback")}} {{experimental_inline}}</li>
<li>{{domxref("WebGLUniformLocation")}}</li>
<li>{{domxref("WebGLVertexArrayObject")}} {{experimental_inline}}</li>
</ul>
</div>
<h3 id="Extensions">Extensions</h3>
<div class="index">
<ul>
<li>{{domxref("ANGLE_instanced_arrays")}}</li>
<li>{{domxref("EXT_blend_minmax")}}</li>
<li>{{domxref("EXT_color_buffer_float")}}</li>
<li>{{domxref("EXT_color_buffer_half_float")}}</li>
<li>{{domxref("EXT_disjoint_timer_query")}}</li>
<li>{{domxref("EXT_frag_depth")}}</li>
<li>{{domxref("EXT_sRGB")}}</li>
<li>{{domxref("EXT_shader_texture_lod")}}</li>
<li>{{domxref("EXT_texture_filter_anisotropic")}}</li>
<li>{{domxref("OES_element_index_uint")}}</li>
<li>{{domxref("OES_standard_derivatives")}}</li>
<li>{{domxref("OES_texture_float")}}</li>
<li>{{domxref("OES_texture_float_linear")}}</li>
<li>{{domxref("OES_texture_half_float")}}</li>
<li>{{domxref("OES_texture_half_float_linear")}}</li>
<li>{{domxref("OES_vertex_array_object")}}</li>
<li>{{domxref("WEBGL_color_buffer_float")}}</li>
<li>{{domxref("WEBGL_compressed_texture_atc")}}</li>
<li>{{domxref("WEBGL_compressed_texture_etc")}}</li>
<li>{{domxref("WEBGL_compressed_texture_etc1")}}</li>
<li>{{domxref("WEBGL_compressed_texture_pvrtc")}}</li>
<li>{{domxref("WEBGL_compressed_texture_s3tc")}}</li>
<li>{{domxref("WEBGL_debug_renderer_info")}}</li>
<li>{{domxref("WEBGL_debug_shaders")}}</li>
<li>{{domxref("WEBGL_depth_texture")}}</li>
<li>{{domxref("WEBGL_draw_buffers")}}</li>
<li>{{domxref("WEBGL_lose_context")}}</li>
</ul>
</div>
<h3 id="Events">Events</h3>
<ul>
<li><a href="/de/docs/Web/Events/webglcontextlost">webglcontextlost</a></li>
<li><a href="/de/docs/Web/Events/webglcontextrestored">webglcontextrestored</a></li>
<li><a href="/de/docs/Web/Events/webglcontextcreationerror">webglcontextcreationerror</a></li>
</ul>
<h3 id="Konstanten_und_Typen">Konstanten und Typen</h3>
<ul>
<li><a href="/de/docs/Web/API/WebGL_API/Constants">WebGL Konstanten</a></li>
<li><a href="/de/docs/Web/API/WebGL_API/Types">WebGL Typen</a></li>
</ul>
<h2 id="Themen">Themen</h2>
<p>Die folgenden acht Artikel bauen aufeinander auf.</p>
<dl>
<dt><a href="/de/WebGL/Einführung_in_WebGL" title="de/WebGL/Einführung in WebGL">Einführung in WebGL</a></dt>
<dd>Wie man einen WebGL-Kontext herstellt.</dd>
<dt><a href="/de/WebGL/Hinzufügen_von_2D_Inhalten_in_einen_WebGL-Kontext" title="de/WebGL/Hinzufügen von 2D Inhalten in einen WebGL-Kontext">Hinzufügen von 2D Inhalten in einen WebGL-Kontext</a></dt>
<dd>Wie eine einfache, flache Form mittels WebGL erstellt wird.</dd>
<dt><a href="/de/WebGL/Farben_mittels_Shader_in_einen_WebGL-Kontext_hinzufügen" title="en/WebGL/Farben mittels Shader in einen WebGL-Kontext hinzufügen">Farben mittels Shader in einen WebGL-Kontext hinzufügen</a></dt>
<dd>Zeigt wie Farben mit Shadern auf die Form gebracht werden können.</dd>
<dt><a href="/de/WebGL/Objekte_mit_WebGL_animieren" title="de/WebGL/Objekte mit WebGL animieren">Objekte mit WebGL animieren</a></dt>
<dd>Erklärt wie Objekte rotiert und verschiebt werden, um eine einfache Animation zu erstellen.</dd>
<dt><a href="/de/WebGL/3D-Objekte_mit_WebGL_erstellen" title="de/WebGL/3D-Objekte_mit_WebGL_erstellen">3D-Objekte mit WebGL erstellen</a></dt>
<dd>Erläutert wie dreidimensionale Objekte erstellt und animiert werden (ein Würfel dient als Beispiel).</dd>
<dt><a href="/de/WebGL/Texturen_in_WebGL_verwenden" title="de/WebGL/Texturen in WebGL verwenden">Texturen in WebGL verwenden</a></dt>
<dd>Demonstriert wie Texturen auf die Oberfläche eines Objektes gezeichnet werden können.</dd>
<dt><a href="/de/WebGL/Beleuchtung_in_WebGL" title="de/WebGL/Beleuchtung in WebGL">Beleuchtung in WebGL</a></dt>
<dd>Wie Beleuchtungseffekte in unserem WebGL-Kontext simuliert werden.</dd>
<dt><a href="/de/WebGL/Animierte_Texturen_in_WebGL" title="de/WebGL/Animierte Texturen in WebGL">Animierte Texturen in WebGL</a></dt>
<dd>Animierte Texturen werden mittels einem Ogg-Video auf der Oberfläche eines rotierenden Würfels realisiert.</dd>
</dl>
<h2 id="Ressourcen">Ressourcen</h2>
<dl>
<dt><a class="link-https" href="https://www.khronos.org/registry/webgl/specs/1.0/">WebGL Spezifikation</a></dt>
<dd>Der Entwurf der WebGL Spezifikation.</dd>
<dt><a class="external" href="http://www.khronos.org/webgl/">Khronos WebGL Seite</a></dt>
<dd>Die Hauptseite für WebGL der Khronos Group.</dd>
<dt><a class="external" href="http://learningwebgl.com/blog/">Learning WebGL</a></dt>
<dd>Eine Reihe von Tutorials über WebGL (Englisch).</dd>
<dt><a class="external" href="http://learningwebgl.com/cookbook/index.php/">Das WebGL Kochbuch</a></dt>
<dd>Rezepte für das Schreiben von WebGL-Code (Englisch).</dd>
<dt><a class="external" href="http://sylvester.jcoglan.com/">Sylvester</a></dt>
<dd>Eine Open-Source Bibliothek, die das Verarbeiten von Vektoren und Matrizen erleichtert.</dd>
<dt><a class="external" href="http://planet-webgl.org/">Planet WebGL</a></dt>
<dd>Eine Feed-Sammlung von Leuten, die in der WebGL Community aktiv sind.</dd>
</dl>
<h2 id="Spezifikationen">Spezifikationen</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Spezifikation</th>
<th scope="col">Status</th>
<th scope="col">Hinweis</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('WebGL')}}</td>
<td>{{Spec2('WebGL')}}</td>
<td>Grundlegende Definition. Basierend auf OpenGL ES 2.0</td>
</tr>
<tr>
<td>{{SpecName('WebGL2')}}</td>
<td>{{Spec2('WebGL2')}}</td>
<td>Erweiterung von WebGL1. Basierend auf OpenGL ES 3.0.</td>
</tr>
<tr>
<td>{{SpecName('OpenGL ES 2.0')}}</td>
<td>{{Spec2('OpenGL ES 2.0')}}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName('OpenGL ES 3.0')}}</td>
<td>{{Spec2('OpenGL ES 3.0')}}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2>
<div>{{CompatibilityTable}}</div>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Edge</th>
<th>Firefox (Gecko)</th>
<th>Chrome</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoDesktop("2.0")}}</td>
<td>9</td>
<td>11</td>
<td>12<sup>[1]</sup></td>
<td>5.1<sup>[1]</sup></td>
</tr>
<tr>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Edge</th>
<th>Firefox Mobile (Gecko)</th>
<th>Chrome for Android</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatVersionUnknown}}</td>
<td>4</td>
<td>25<sup>[1]</sup></td>
<td>{{CompatNo}}</td>
<td>12<sup>[1]</sup></td>
<td>8.1</td>
</tr>
</tbody>
</table>
</div>
<p>[1] Die Implementierung dieses Features ist experimentell.</p>
<h3 id="Kompatibilitätshinweise">Kompatibilitätshinweise</h3>
<p>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 {{domxref("HTMLCanvasElement.getContext", "WebGL-Context")}} durch den <code>webgl</code> Contextnamen zur Verfügung - ältere Browser benötigen hingegen manchmal stattdessen den Contextnamen <code>experimental-webgl</code>.</p>
<p>Das kommende <a href="/de/docs/Web/API/WebGL2RenderingContext">WebGL 2</a> ist vollständig abwärtskompatibel und wird über den Contextnamen <code>experimental-webgl2</code> aufgerufen. Ab Firefox 42.0 ist der Aufruf auch über den Contextnamen <code>webgl2</code> möglich - WebGL2 ist bis einschließlich Firefox 50 ein experimentelles Feature und kann zu Testzwecken über <a href="#WebGL2_enabling">Flag-Settings</a> des <a href="https://support.mozilla.org/de/kb/konfigurationseditor-fur-firefox" title="Der Konfigurationseditor von Firefox (about:config) listet Programmeinstellungen aus den Dateien prefs.js und user.js des Firefox-Profilordners sowie die Standardeinstellungen auf. Viele dieser erweiterten Optionen sind in den normalen Einstellungen nicht verfügbar.">Konfigurationseditors</a> 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.</p>
<h3 id="Anmerkungen_zu_Gecko">Anmerkungen zu Gecko</h3>
<h4 id="WebGL_Debugging_und_Testing">WebGL Debugging und Testing</h4>
<p>Ab Gecko 10.0 {{geckoRelease("10.0")}} werden zwei Möglichkeiten geboten, die WebGL-Fähigkeit des Browsers zu Testzwecken zu beeinflussen:</p>
<dl>
<dt><code>webgl.min_capability_mode</code></dt>
<dd>Ein boolescher Wert, der bei <code>true</code> 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 <code>false</code>.</dd>
<dt><code>webgl.disable_extensions</code></dt>
<dd>Ein boolescher Wert, der bei <code>true</code> alle WebGL Extensions deaktiviert. Der Standarardwert ist <code>false</code>.</dd>
</dl>
<h4 id="WebGL2_Aktivierung">WebGL2 Aktivierung</h4>
<dl>
<dt><code>webgl.enable-prototype-webgl2</code> (ab Firefox 38)</dt>
<dt><code>webgl.enable-webgl2</code> (ab Firefox 50)</dt>
<dd>Ein boolescher Wert, der bei <code>true</code> den bisher experimentellen WebGL2-Context im Browser aktiviert. Der Standarardwert ist <code>false</code> - ab Firefox 51 ist der Standardwert <code>true</code>.</dd>
</dl>
<h2 id="Siehe_auch">Siehe auch</h2>
<ul>
<li><a href="/de/docs/Web/API/Canvas_API">Canvas</a></li>
<li><a href="https://developer.mozilla.org/de/docs/Web/API/WebGLRenderingContext/getSupportedExtensions#Browser_compatibility">Kompatibilitäts-Hinweise zu WebGL Extensions</a></li>
</ul>
|
