---
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/" title="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" title="http://windows.microsoft.com/en-us/internet-explorer/download-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/" title="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/" title="https://cvs.khronos.org/svn/repos/registry/trunk/public/webgl/doc/spec/WebGL-spec.html">WebGL Spezifikation</a></dt>
 <dd>Der Entwurf der WebGL Spezifikation.</dd>
 <dt><a class="external" href="http://www.khronos.org/webgl/" title="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/" title="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/" title="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/" title="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/" title="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>