---
title: WebGL
slug: Web/API/WebGL_API
tags:
  - WebGL
translation_of: Web/API/WebGL_API
---
<div>{{WebGLSidebar}}</div>

<p class="summary">WebGL (Web Graphics Library) to API języka JavaScript służące do renderowania (rysowania) interaktywnej grafiki 3D i 2D poprzez kompatybilną przeglądarkę bez używania pluginów. WebGL został oparty na API OpenGL ES 2.0 i może zostać wykorzystany do pracy z elementem {{HTMLElement("canvas")}}.</p>

<p>Aktualnie Jest wspierany przez <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+ i <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+; ponad to urządzenie użytkownika musi także spełniać odpowiednie warunki sprzętowe, aby móc obsłużyć WebGL (przede wszystkim obsługiwać OpenGL co najmniej w wersji 2.0).</p>

<div class="cleared row topicpage-table">
<div class="section">
<h2 class="Documentation" id="Tematy">Tematy</h2>

<dl>
 <dt><a href="/en-US/docs/WebGL/Getting_started_with_WebGL" title="WebGL/Getting started with WebGL">Rozpocznij pracę z WebGL </a></dt>
 <dd>Czyli jak stworzyć pierwszy kontekst WebGL.</dd>
 <dt><a href="/en-US/docs/WebGL/Adding_2D_content_to_a_WebGL_context" title="WebGL/Adding 2D content to a WebGL context">Dodawanie grafiki 2D do kontekstu WebGL</a></dt>
 <dd>Czyli jak wyświetlić proste kształty używając WebGL.</dd>
 <dt><a href="/en-US/docs/WebGL/Using_shaders_to_apply_color_in_WebGL" title="WebGL/Using shaders to apply color in WebGL">Nakładamy kolory używając shaderów w WebGL</a></dt>
 <dd>Czyli jak dodać nieco koloru naszym figurom w WebGL</dd>
 <dt><a href="/en-US/docs/WebGL/Animating_objects_with_WebGL" title="WebGL/Animating objects with WebGL">Animacja obiektów w WebGL</a></dt>
 <dd>Pokażemy jak zmieniać i przekształcać obiekty na potrzeby prostej animacji.</dd>
 <dt><a href="/en-US/docs/WebGL/Creating_3D_objects_using_WebGL" title="WebGL/Creating 3D objects using WebGL">Tworzenie obiektów 3D używając WebGL</a></dt>
 <dd>Pokażemy jak tworzyć i animować obiekty 3D (w tym przykładzie, sześcian).</dd>
 <dt><a href="/en-US/docs/WebGL/Using_textures_in_WebGL" title="WebGL/Using textures in WebGL">Tworzenie tekstur w WebGL</a></dt>
 <dd>Zademonstrowanie tworzenia map tekstur, na obiektach.</dd>
 <dt><a href="/en-US/docs/WebGL/Lighting_in_WebGL" title="WebGL/Lighting in WebGL">Światła w WebGL</a></dt>
 <dd>Jak zasymulować efekty świetlne w twoim kontekście WebGL.</dd>
 <dt><a href="/en-US/docs/WebGL/Animating_textures_in_WebGL" title="WebGL/Animating textures in WebGL">Animacja tekstur w WebGL</a></dt>
 <dd>Pokaz, jak animować tekstury, w tym przypadku mapowanie strumienia Ogg na obracającym się sześcianie.</dd>
 <dt><a href="/en-US/docs/WebGL/WebGL_best_practices" title="WebGL/WebGL best practices">WebGL - najlepsze praktyki</a></dt>
 <dd>Porady i sugestie na wdrożenie zawartości WebGL.</dd>
 <dt><a href="/en-US/docs/WebGL/Cross-Domain_Textures" title="WebGL/Cross-Domain Textures">Cross-domain textures</a></dt>
 <dd>Informacje na temat załadowania tekstur dla domen innych niż aktualne informacje, które są przetwarzane.</dd>
 <dt><a href="/en-US/docs/WebGL/Using_Extensions" title="WebGL/Using_Extensions">Używanie rozszerzeń</a></dt>
 <dd>Jak używać rozszerzeń aby włączyć je w WebGL.</dd>
</dl>
</div>

<div class="section">
<h2 class="Related_Topics" id="Zasoby">Zasoby</h2>

<dl>
 <dt><a href="https://www.youtube.com/embed/H4c8t6myAWU/?feature=player_detailpage">Raw WebGL: An introduction to WebGL</a></dt>
 <dd>Rozmowa z Nick Desaulniers o wprowadzająca do podstaw WebGL. To jest idealne miejsce aby zacząć jeśli nigdy nie programowałeś grafiki niskopoziomowej.</dd>
 <dt><a class="link-https" href="https://www.khronos.org/registry/webgl/specs/1.0/" title="https://www.khronos.org/registry/webgl/specs/1.0/">WebGL - Specyfikacje</a></dt>
 <dd>Specyfikacja WebGL.</dd>
 <dt><a href="http://www.khronos.org/webgl/" title="http://www.khronos.org/webgl/">Strona Khronos WebGL</a></dt>
 <dd>Strona domowa WebGL w Khronos Group.</dd>
 <dt><a href="http://learningwebgl.com/blog/?page_id=1217" title="http://learningwebgl.com/blog/">Learning WebGL</a></dt>
 <dd>Strona z tutorialami na temat jak używać WebGL.</dd>
 <dt><a href="http://www.html5rocks.com/en/tutorials/webgl/webgl_fundamentals/" title="http://www.html5rocks.com/en/tutorials/webgl/webgl_fundamentals/">WebGL Fundamentals</a></dt>
 <dd>Tutorial z podstawami WebGL.</dd>
 <dt><a href="http://games.greggman.com/game/webgl-2d-matrices/">WebGL Matrices</a></dt>
 <dd>Wprowadzenie metryk używając 2D WebGL. Ta seria wyjaśnia także matematyczne zależności perspektyw 3D.</dd>
 <dt><a href="http://learningwebgl.com/cookbook/index.php/" title="http://learningwebgl.com/cookbook/index.php/">The WebGL Cookbook</a></dt>
 <dd>Strona z poręcznymi przykładami kodu WebGL.</dd>
 <dt><a href="http://planet-webgl.org/" title="http://planet-webgl.org/">Planet WebGL</a></dt>
 <dd>Agregat dla ludzi zaangażowanych w społeczność WebGL.</dd>
 <dt><a href="http://code.google.com/p/ewgl-matrices/" title="http://code.google.com/p/ewgl-matrices/">ewgl-matrices</a></dt>
 <dd>Biblioteka 'blazing fast matrix' dla WebGL</dd>
 <dt><a class="link-https" href="https://github.com/toji/gl-matrix" title="https://github.com/toji/gl-matrix">glMatrix</a></dt>
 <dd>Biblioteka JavaScript Matrix and Vector dla wysoko wydajnych app WebGL.</dd>
 <dt><a href="http://code.google.com/p/webgl-mjs/" title="http://code.google.com/p/webgl-mjs/">mjs</a></dt>
 <dd><span>A JavaScript vector and matrix math library, optimized for WebGL usage.</span></dd>
 <dt><a href="http://sylvester.jcoglan.com/" title="http://sylvester.jcoglan.com/">Sylvester</a></dt>
 <dd>Biblioteka Open Source do manipulowania wektorami i metrykami. Nie zoptymalizowana pod WebGl (eksperymentalna).</dd>
 <dt><a href="http://webglplayground.net" title="http://webglplayground.net">WebGL playground</a></dt>
 <dd>Narzędzia online do twoarzenia i dzielenia się projektami WebGL. Dobra dla szybkich prototypów i eksperymenotwania.</dd>
 <dt><a href="http://www.webglacademy.com" title="http://www.webglacademy.com">WebGL Academy</a></dt>
 <dd>HTML/Javascript edytor z tutorialami do nauki podstaw programowania WebGL.</dd>
 <dt> </dt>
</dl>
</div>
</div>

<h2 id="Browser_compatibility">Browser compatibility</h2>

<div>{{CompatibilityTable}}</div>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</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>{{CompatGeckoDesktop("2.0")}}</td>
   <td>9</td>
   <td>11</td>
   <td>12 (experiment)</td>
   <td>5.1 (experiment)</td>
  </tr>
  <tr>
   <td><a href="http://www.khronos.org/registry/gles/extensions/OES/OES_texture_float.txt" title="http://www.khronos.org/registry/gles/extensions/OES/OES_texture_float.txt"><code>OES_texture_float</code></a></td>
   <td>{{CompatGeckoDesktop("6.0")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><a href="http://www.khronos.org/registry/webgl/extensions/OES_standard_derivatives/" title="http://www.khronos.org/registry/webgl/extensions/OES_standard_derivatives/"><code>OES_standard_derivatives</code></a></td>
   <td>{{CompatGeckoDesktop("10.0")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><a href="/en-US/docs/WebGL/Using_Extensions#EXT_texture_filter_anisotropic" title="WebGL/Using_Extensions#EXT_texture_filter_anisotropic"><code>EXT_texture_filter_anisotropic</code></a></td>
   <td>{{CompatGeckoDesktop("13.0")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><a href="/en-US/docs/WebGL/Using_Extensions#WEBGL_compressed_texture_s3tc" title="WebGL/Using_Extensions#WEBGL_compressed_texture_s3tc"><code>WEBGL_compressed_texture_s3tc</code></a></td>
   <td>{{CompatGeckoDesktop("15.0")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><code>drawingBufferWidth</code> and <code>drawingBufferHeight</code> attributes</td>
   <td>{{CompatGeckoDesktop("9.0")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</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>4</td>
   <td>25 (experiment)</td>
   <td>{{CompatNo}}</td>
   <td>12 (experiment)</td>
   <td>8.1</td>
  </tr>
  <tr>
   <td><code>drawingBufferWidth</code> and <code>drawingBufferHeight</code> attributes</td>
   <td>{{CompatGeckoMobile("9.0")}}</td>
   <td>25</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><a href="http://www.khronos.org/registry/gles/extensions/OES/OES_texture_float.txt" title="http://www.khronos.org/registry/gles/extensions/OES/OES_texture_float.txt"><code>OES_texture_float</code></a></td>
   <td>{{CompatGeckoMobile("6.0")}}</td>
   <td>25</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><a href="http://www.khronos.org/registry/webgl/extensions/OES_standard_derivatives/" title="http://www.khronos.org/registry/webgl/extensions/OES_standard_derivatives/"><code>OES_standard_derivatives</code></a></td>
   <td>{{CompatGeckoMobile("10.0")}}</td>
   <td>25</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><a href="/en-US/docs/WebGL/Using_Extensions#EXT_texture_filter_anisotropic" title="WebGL/Using_Extensions#EXT_texture_filter_anisotropic"><code>EXT_texture_filter_anisotropic</code></a></td>
   <td>{{CompatGeckoMobile("13.0")}}</td>
   <td>25</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><code>OES_element_index_uint</code></td>
   <td>{{CompatUnknown}}</td>
   <td>25</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><code>OES_vertex_array_object</code></td>
   <td>{{CompatUnknown}}</td>
   <td>25</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><a href="/en-US/docs/WebGL/Using_Extensions#WEBGL_compressed_texture_s3tc" title="WebGL/Using_Extensions#WEBGL_compressed_texture_s3tc"><code>WEBGL_compressed_texture_s3tc</code></a></td>
   <td>{{CompatGeckoMobile("15.0")}}</td>
   <td>25<br>
    prefixed with <span style="color: rgb(34, 34, 34); font-family: courier new,monospace; font-size: 12.66px; line-height: normal; white-space: pre-wrap;">WEBKIT_</span></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><code>WEBKIT_EXT_texture_filter_nisotropic</code></td>
   <td>{{CompatNo}}</td>
   <td>25</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<h3 id="Compatibility_notes">Compatibility notes</h3>

<p>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 <code>webgl</code> context name, but older ones need <code>experimental-webgl</code> as well. In addition, the upcoming WebGL 2 is fully backwards-compatible and will have the context name <code>experimental-webgl2</code> in the future for testing.</p>

<h3 id="Gecko_notes">Gecko notes</h3>

<h4 id="WebGL_debugging_and_testing">WebGL debugging and testing</h4>

<p>Starting with Gecko 10.0 {{geckoRelease("10.0")}}, there are two preferences available which let you control the capabilities of WebGL for testing purposes:</p>

<dl>
 <dt><code>webgl.min_capability_mode</code></dt>
 <dd>Boolean-owska stała, oznaczająca tryb w którym włączenie jej na true, przyczynia się do włączenia minimum kompatybilności. Kiedy ten tryb jest włączony, WebGL jest skonfigurowany w taki sposób, aby wspomagał w minimalnym zakresie jego możliwości, wymagane przez specyfikacje. Tryb ten zapewnia możliwość pracy kodu WebGL na urządzeniach i przeglądarkach niezależnie od ich kompatybilności. Opcja <code>false</code> jest ustawiona domyślnie.</dd>
 <dt> </dt>
 <dt><code>webgl.disable_extensions</code></dt>
 <dd>Boolean-owska stała, oznaczająca tryb w którym ustawienie jej na true, powoduje zamknięcie wszystkich rozszerzeń WebGL. Wartość <code>false</code> jest ustawiona domyślnie.</dd>
</dl>