diff options
Diffstat (limited to 'files/pl/web/api/webgl_api/index.html')
| -rw-r--r-- | files/pl/web/api/webgl_api/index.html | 252 |
1 files changed, 252 insertions, 0 deletions
diff --git a/files/pl/web/api/webgl_api/index.html b/files/pl/web/api/webgl_api/index.html new file mode 100644 index 0000000000..a3cc7bb3d0 --- /dev/null +++ b/files/pl/web/api/webgl_api/index.html @@ -0,0 +1,252 @@ +--- +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> |