---
title: WebGL
slug: Web/API/WebGL_API
tags:
  - WebGL
  - Графіка
  - Детально
  - Медіа
translation_of: Web/API/WebGL_API
---
<div>{{WebGLSidebar}}</div>

<div class="summary">
<p>WebGL (Web Graphics Library) - це JavaScript API для відображення інтерактивної 3D та 2D графіки в будь-якому сумісному веб-переглядачі без використання плагінів. WebGL робиць це вводячи API, яке точно відповідає OpenGL ES 2.0 та може бути використане в HTML5 {{HTMLElement("canvas")}} елементах.</p>
</div>

<p>Підтримка WebGL присутня в <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+ and <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+; проте, користувацький пристрій має також мати апаратне забезпечення, яке підтримує ці функції.</p>

<p>Елемент {{HTMLElement("canvas")}} також використовується Canvas 2D для побудови 2D графіки на веб-сторінках.</p>

<h2 id="Посилання">Посилання</h2>

<h3 id="Стандартні_інтерфейси">Стандартні інтерфейси</h3>

<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="Розширення">Розширення</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_es3")}}</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="Події">Події</h3>

<ul>
 <li>{{Event("webglcontextlost")}}</li>
 <li>{{Event("webglcontextrestored")}}</li>
 <li>{{Event("webglcontextcreationerror")}}</li>
</ul>

<h3 id="Константи_і_типи">Константи і типи</h3>

<ul>
 <li><a href="/en-US/docs/Web/API/WebGL_API/Constants">Константи WebGL</a></li>
 <li><a href="/en-US/docs/Web/API/WebGL_API/Types">Типи WebGL</a></li>
</ul>

<h2 id="Керівництва_і_навчальні_сторінки">Керівництва і навчальні сторінки</h2>

<ul>
 <li><a href="/en-US/docs/Web/API/WebGL_API/Tutorial">Керівництво по WebGL</a>: Основні поняття WebGL для початківця. Гарний початок, якщо ви не маєте досвіду роботи з WebGL.</li>
 <li><a href="/en-US/docs/Web/API/WebGL_API/WebGL_best_practices">Кращі практики WebGL</a>: Підказки та поради для покращення контенту WebGL.</li>
 <li><a href="/en-US/docs/Web/API/WebGL_API/Using_Extensions">Використання розширень</a>: Як використовувати доступні для WebGL розширення.</li>
</ul>

<h3 id="Детальні_керівництва">Детальні керівництва</h3>

<ul>
 <li><a href="/en-US/docs/Web/API/WebGL_API/WebGL_model_view_projection">WebGL model view projection</a>: Детальне пояснення трьох основних матриць, які переважно використовуються для представлення 3D виду об'єкту: матриця моделі, виду та проекції.</li>
 <li><a href="/en-US/docs/Web/API/WebGL_API/Matrix_math_for_the_web">Matrix math for the web</a>: Корисне керівництво про те, як працюють матриці 3D перетворення, та як вони можуть бути використані в web - як для розрахунків WebGL, так і для CSS3 перетворень .</li>
</ul>

<h2 id="Ресурси">Ресурси</h2>

<ul>
 <li><a href="https://www.youtube.com/embed/H4c8t6myAWU/?feature=player_detailpage">Raw WebGL: An introduction to WebGL</a> Розмова Ніка Дізолнірс який знайомить з основами WebGL. Це відмінне місце, щоб почати, якщо ви ніколи не займались низькорівневим програмуванням графіки.</li>
 <li><a href="http://www.khronos.org/webgl/" title="http://www.khronos.org/webgl/">Khronos WebGL site</a> Основний веб-сайт WebGL на Khronos Group.</li>
 <li><a href="http://learningwebgl.com/blog/?page_id=1217" title="http://learningwebgl.com/blog/">Learning WebGL</a> Сайт з керівництвами про використання WebGL.</li>
 <li><a href="http://www.html5rocks.com/en/tutorials/webgl/webgl_fundamentals/" title="http://www.html5rocks.com/en/tutorials/webgl/webgl_fundamentals/">WebGL Fundamentals</a> Базове керівництво про основи WebGL.</li>
 <li><a href="http://webglplayground.net" title="http://webglplayground.net">WebGL playground</a> An online tool for creating and sharing WebGL projects. Good for quick prototyping and experimenting.</li>
 <li><a href="http://www.webglacademy.com" title="http://www.webglacademy.com">WebGL Academy</a> Редактор HTML/JavaScript з керівництвами для вивчення основ програмування під WebGL.</li>
 <li><a href="http://webglstats.com/">WebGL Stats</a> Сайт зі статистикою про можливості WebGL в веб-переглядачах на різних платформах.</li>
</ul>

<h3 id="Бібліотеки">Бібліотеки</h3>

<ul>
 <li><a class="link-https" href="https://github.com/toji/gl-matrix" title="https://github.com/toji/gl-matrix">glMatrix</a> JavaScript-бібліотека матриці і вектору для WebGL додатків з високою ефективністю.</li>
 <li><a href="http://sylvester.jcoglan.com/" title="http://sylvester.jcoglan.com/">Sylvester</a> Бібліотека з відкритим початковим кодом для маніпулювання векторами і матрицями. Не оптимізована для WebGL але надзвичайно міцна.</li>
</ul>

<h2 id="Специфікації">Специфікації</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Специфікація</th>
   <th scope="col">Статус</th>
   <th scope="col">Коментар</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('WebGL')}}</td>
   <td>{{Spec2('WebGL')}}</td>
   <td>Початкове визначення. Базується на OpenGL ES 2.0</td>
  </tr>
  <tr>
   <td>{{SpecName('WebGL2')}}</td>
   <td>{{Spec2('WebGL2')}}</td>
   <td>Будується поверх WebGL1. На основі 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="Сумісність">Сумісність</h2>

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

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Функція</th>
   <th>Firefox (Gecko)</th>
   <th>Chrome</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Базова підтримка</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>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Функція</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>Базова підтримка</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] Реалізація цієї функції є експериментальною.</p>

<h3 id="Зауваження_по_сумісності">Зауваження по сумісності</h3>

<p>На додаток до веб-переглядача, сам графічний процесор також має підтримувати цю функцію. Так, наприклад, стиснення текстур S3 (S3TC) доступне тільки для планшетів на основі Tegra . Більшість браузерів роблять контекст WebGL доступним через контекстне ім'я <code>webgl</code>, але старішим також потрібно <code>experimental-webgl</code>. Крім того, майбутній WebGL 2 повністю сумісний і матиме ім'я контексту <code>webgl2</code>.</p>

<h3 id="Зауваження_Gecko">Зауваження Gecko</h3>

<h4 id="Налагодження_і_тестування_WebGL">Налагодження і тестування WebGL</h4>

<p>Починаючи з Gecko 10.0 {{geckoRelease("10.0")}}, є дві доступні опції, які дозволяють контролювати можливості WebGL з метою тестування:</p>

<dl>
 <dt><code>webgl.min_capability_mode</code></dt>
 <dd>Властивість типу Boolean яка, коли <code>true</code>, вмикає режим мінімальної сумісності. Коли WebGL знаходиться в даному режимі, він налаштований підтримувати тільки мінімальний набір функцій і можливостей, необхідних специфікації WebGL. Це дозволяє вам бути впевненими, що важ WebGL код буде працювати на будь-якому пристрої або веб-переглядачі, незалежно від інших можливостей. Має значення <code>false</code> за замовчування.</dd>
 <dt><code>webgl.disable_extensions</code></dt>
 <dd>Властивість типу Boolean яка, коли <code>true</code>, вимикає всі розширення WebGL. Має значення <code>false</code> за замовчуванням.</dd>
</dl>

<h2 id="Дивіться_також">Дивіться також</h2>

<ul>
 <li><a href="/en-US/docs/Web/API/Canvas_API">Canvas</a></li>
 <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/getSupportedExtensions#Browser_compatibility">Інформація про сумісніть розширень WebGL</a></li>
</ul>