WebGL (Web Graphics Library) - це JavaScript API для відображення інтерактивної 3D та 2D графіки в будь-якому сумісному веб-переглядачі без використання плагінів. WebGL робиць це вводячи API, яке точно відповідає OpenGL ES 2.0 та може бути використане в HTML5 <canvas>
елементах.
Підтримка WebGL присутня в Firefox 4+, Google Chrome 9+, Opera 12+, Safari 5.1+ and Internet Explorer 11+; проте, користувацький пристрій має також мати апаратне забезпечення, яке підтримує ці функції.
Елемент <canvas>
також використовується Canvas 2D для побудови 2D графіки на веб-сторінках.
Посилання
Стандартні інтерфейси
Розширення
ANGLE_instanced_arrays
EXT_blend_minmax
EXT_color_buffer_float
EXT_color_buffer_half_float
EXT_disjoint_timer_query
EXT_frag_depth
EXT_sRGB
EXT_shader_texture_lod
EXT_texture_filter_anisotropic
OES_element_index_uint
OES_standard_derivatives
OES_texture_float
OES_texture_float_linear
OES_texture_half_float
OES_texture_half_float_linear
OES_vertex_array_object
WEBGL_color_buffer_float
WEBGL_compressed_texture_atc
WEBGL_compressed_texture_es3
WEBGL_compressed_texture_etc1
WEBGL_compressed_texture_pvrtc
WEBGL_compressed_texture_s3tc
WEBGL_debug_renderer_info
WEBGL_debug_shaders
WEBGL_depth_texture
WEBGL_draw_buffers
WEBGL_lose_context
Події
Константи і типи
Керівництва і навчальні сторінки
- Керівництво по WebGL: Основні поняття WebGL для початківця. Гарний початок, якщо ви не маєте досвіду роботи з WebGL.
- Кращі практики WebGL: Підказки та поради для покращення контенту WebGL.
- Використання розширень: Як використовувати доступні для WebGL розширення.
Детальні керівництва
- WebGL model view projection: Детальне пояснення трьох основних матриць, які переважно використовуються для представлення 3D виду об'єкту: матриця моделі, виду та проекції.
- Matrix math for the web: Корисне керівництво про те, як працюють матриці 3D перетворення, та як вони можуть бути використані в web - як для розрахунків WebGL, так і для CSS3 перетворень .
Ресурси
- Raw WebGL: An introduction to WebGL Розмова Ніка Дізолнірс який знайомить з основами WebGL. Це відмінне місце, щоб почати, якщо ви ніколи не займались низькорівневим програмуванням графіки.
- Khronos WebGL site Основний веб-сайт WebGL на Khronos Group.
- Learning WebGL Сайт з керівництвами про використання WebGL.
- WebGL Fundamentals Базове керівництво про основи WebGL.
- WebGL playground An online tool for creating and sharing WebGL projects. Good for quick prototyping and experimenting.
- WebGL Academy Редактор HTML/JavaScript з керівництвами для вивчення основ програмування під WebGL.
- WebGL Stats Сайт зі статистикою про можливості WebGL в веб-переглядачах на різних платформах.
Бібліотеки
Специфікації
Специфікація | Статус | Коментар |
---|---|---|
WebGL 1.0 | Recommendation | Початкове визначення. Базується на OpenGL ES 2.0 |
WebGL 2.0 | Editor's Draft | Будується поверх WebGL1. На основі OpenGL ES 3.0. |
OpenGL ES 2.0 | Standard | |
OpenGL ES 3.0 | Standard |
Сумісність
Функція | Firefox (Gecko) | Chrome | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Базова підтримка | 4.0 (2.0) | 9 | 11 | 12[1] | 5.1[1] |
Функція | Firefox Mobile (Gecko) | Chrome for Android | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Базова підтримка | 4 | 25[1] | No support | 12[1] | 8.1 |
[1] Реалізація цієї функції є експериментальною.
Зауваження по сумісності
На додаток до веб-переглядача, сам графічний процесор також має підтримувати цю функцію. Так, наприклад, стиснення текстур S3 (S3TC) доступне тільки для планшетів на основі Tegra . Більшість браузерів роблять контекст WebGL доступним через контекстне ім'я webgl
, але старішим також потрібно experimental-webgl
. Крім того, майбутній WebGL 2 повністю сумісний і матиме ім'я контексту webgl2
.
Зауваження Gecko
Налагодження і тестування WebGL
Починаючи з Gecko 10.0 (Firefox 10.0 / Thunderbird 10.0 / SeaMonkey 2.7), є дві доступні опції, які дозволяють контролювати можливості WebGL з метою тестування:
webgl.min_capability_mode
- Властивість типу Boolean яка, коли
true
, вмикає режим мінімальної сумісності. Коли WebGL знаходиться в даному режимі, він налаштований підтримувати тільки мінімальний набір функцій і можливостей, необхідних специфікації WebGL. Це дозволяє вам бути впевненими, що важ WebGL код буде працювати на будь-якому пристрої або веб-переглядачі, незалежно від інших можливостей. Має значенняfalse
за замовчування. webgl.disable_extensions
- Властивість типу Boolean яка, коли
true
, вимикає всі розширення WebGL. Має значенняfalse
за замовчуванням.