WebGL

WebGL — це стандарт на базі OpenGL ES 2.0, що дозволяє розробникам вебконтенту вбудовувати в вебоглядачі, які підтримують HTML5, повноцінну 3D-графіку, не вдаючись до посередництва плагінів. В намірах розробників поширити стандарт WebGL не тільки в браузерах персональних комп'ютерів, а й у мобільних інтернет-пристроях. До робочої групи WebGL входять Khronos Group, представники провідних розробників інтернет-браузерів, таких як Apple Safari, Google Chrome, Mozilla Firefox і Opera, а також фахівці AMD і Nvidia.

WebGL

Тип	API
Автор	Mozilla Foundation
Розробник	Khronos Group
Перший випуск	3 березня 2011; 14 років тому (2011-03-03)
Стабільний випуск	2.0 (17 січня 2017; 8 років тому (2017-01-17))
Операційна система	крос-платформова
Ліцензія	різні
Онлайн-документація	khronos.org/webgl/wiki/Main_Page​(англ.)
Вебсайт	www.khronos.org/webgl/
Медіафайли у Вікісховищі

Ця технологія дозволяє упроваджувати апаратно-прискорену 3D графіку у вебсторінки без необхідності використовувати спеціальні плагіни веббраузера на будь-якій платформі, що підтримує OpenGL або OpenGL ES. Технічно це буде прив'язкою скриптів JavaScript до функцій, визначених в бібліотеках OpenGL ES 2.0, реалізовану на рівні браузера.

WebGL є подальшим розвитком експерименту Canvas 3D^[1] в Mozilla і вже представлена у збірках розробників Mozilla Firefox^[2] і WebKit^[3], а також в попередніх релізах Google Chrome 4^[4].

В листопаді 2009 компанія Khronos Group анонсувала першу чорнову специфікацію WebGL.^[5] Робота над специфікацією продовжується.

Про підтримку специфікації у своєму браузері Chrome, починаючи з версії 9^[6], оголосив Google. Підтримку WebGL у ближчих версіях продуктів оголосили Mozilla (починаючи з Firefox 4) та Apple Safari.

Принципи

WebGL створений на основі OpenGL ES 2.0 з підтримкою API для 3D-графіки. Він використовує елемент canvas з HTML5, а також взаємодіє з DOM. Автоматичне управління пам'яттю відбувається завдяки мові JavaScript. Шейдери у WebGL запрограмовані безпосередньо на GLSL.

Історія

WebGL виник в результаті експериментів з Canvas 3D Владимира Вукичевича^[en] з Mozilla, котрий розробив прототип Canvas 3D у 2006 році. В кінці 2007 року і Mozilla^[7], і Opera^[8] розробили свої окремі реалізації.

На початку 2009 року некомерційне об'єднання Khronos організувало робочу групу WebGL, за участі Apple, Google, Mozilla, Opera та ін. Версія WebGL 1.0 була випущена у березні 2011 року. Станом на березень 2012 року робочою групою керував Кен Рассел(Ken Russell).

Перші випуски WebGL включали Zygote Body.^[9][10] Останнім часом, Autodesk реалізував за допомогою хмарних рішень більшу частину своїх програм, які працюють завдяки WebGL. Наприклад такі програми як: Fusion 360 і AutoCAD 360.^[11]

Розробка WebGL 2 розпочалася у 2013 році.^[12] Ця специфікація мала за основу OpenGL ES 3.0.

Реалізація

WebGL широко підтримується у сучасних браузерах. Хоча можливість його використання залежить від інших факторів, а саме від GPU. Офіційний сайт WebGL пропонує просту тестову сторінку для перевірки на сумісність.^[13][13] Більш детальна інформація (наприклад, те, який рендер використовує браузер, чи які розширення доступні) надається на сторонніх вебсайтах^[14][15]. Робота WebGL у різноманітних браузерах:

• Google Chrome — WebGL доступний для всіх платформ, котрі мають необхідну графічну карту з оновленими драйверами, починаючи з 9 версії, випущеної у 2011 році.^[16][17] За замовченням у Windows Chrome використовує ANGLE рендер для перекладу з OpenGL ES у DirectX 9.0c або 11.0, котрий має більш якісну підтримку драйверів.^[18] На Linux та Mac OS X за замовченням засобом візуалізації є OpenGL. Також можливо змусити Windows використовувати OpenGL як рендер. Починаючи з вересня 2013 року, Chrome також має новіший Direct3D 10 рендер, котрий, однак потребує більш нову графічну карту.
• Mozilla Firefox — WebGL доступний для всіх платформ, котрі мають необхідну графічну карту з оновленими драйверами, починаючи з версії 4.0.^[19] Починаючи з 2013 року, Firefox також використовує ANGLE на платформі Windows за допомоги DirectX.
• Safari — Safari 6.0, а також більш нові версії встановлені на OS X Mountain Lion, Mac OS X Lion і Safari 5.1 на Mac OS X Snow Leopard підтримують WebGL, котрий був недоступний до випуску Safari 8.0.^{[20][21][22][23][24]}
• Opera — WebGL реалізований у Opera 11 та 12, хоча вимкнений за замовчуванням.^[25][26]
• Internet Explorer — WebGL частково підтримується у Internet Explorer 11. Спершу він не витримував жодного тесту на сумісність від WebGL, пізніше Microsoft випустив декілька оновлень. Остання версія 0.94 WebGL на даний момент проходить близько ~97% тестів від Khronos. Підтримка WebGL також може бути підключена вручну до попередніх версій Internet Explorer, використовуючи сторонні плагіни, такі як IEWebGL наприклад.^{[27][28][29][30]}
• Microsoft Edge – З моменту випуску підтримував WebGL версії 0.95 (контекстне ім'я: "experimental-webgl") з вільними вихідними кодами GLSL до HLSL transpiler.^[31] Версії 10240+ підтримують WebGL 1.0 згідно специфікації. Версія WebGL 2.0 запланована і має середній пріоритет важливості щодо імплементації в майбутніх релізах.^[32]

Мобільні браузери

• BlackBerry 10 — WebGL доступний для пристроїв BlackBerry, починаючи з 10.00 версії ОП.^[33]
• BlackBerry PlayBook — WebGL доступний за допомоги WebWorks і браузера у PlayBook OS 2.00.^[34]
• Android Browser — Взагалі то не підтримується, але ряд Android смартфонів, наприклад: Sony Ericsson Xperia підтримує можливість WebGL завдяки вбудованим можливостям. Смартфони Samsung також мають підтримку WebGL (перевірено на Galaxy SII (4.1.2) і Galaxy Note 8.0 (4.2)).^[35] Підтримується у Google Chrome браузері, що заміщає у багатьох телефонах вбудований браузер Android.
• Internet Explorer — WebGL доступний, починаючи з Windows Phone 8.1.
• Firefox for mobile — WebGL доступний для Android пристроїв, починаючи з Firefox 4.^[36]
• Google Chrome — WebGL доступний для Android пристроїв, починаючи з Google Chrome 25 і включений за замовчуванням, починаючи з 30 версії.^[37]
• Opera Mobile — Opera Mobile 12 підтримує WebGL (тільки для Android).^[38]
• Tizen
• Ubuntu Touch
• webOS
• Safari для IOS — підтримує WebGL у версії iOS 8.^[39]

Створення контенту та його експорт

Використання WebGL API може дуже стомлювати якщо не використовувати деякі корисні бібліотеки наприклад створені для легкої роботи з шейдерами, чи для завантаження графічних сцен та 3D об'єктів у популярних на сьогодення форматах. JavaScript бібліотеки вбудовані (або портовані у WebGL) забезпечують додатковими функціональними можливостями. Неповний перелік бібліотек, які надають багато високотехнічних можливостей: three.js, O3D, OSG.JS^[en], CopperLicht^[en] і GLGE^[en]. Також розвиваються [Гральний рушій|ігрові рушії] на WebGL,^[40] включаючи Unreal Engine 4 і 5. Stage3D^[en] /Flash-based Away3D^[en] — бібліотека високого рівня, також має порт на WebGL реалізований на TypeScript.^[41][42] Існують і простіші бібліотеки, котрі надають тільки векторні та матричні математичні можливості для шейдерів — sylvester.js. Іноді вона використовується в поєднанні з розширенням WebGL — glUtils.js.^[43]

Є також деякі 2D бібліотеки, побудовані на основі WebGL, такі як Cocos2d-х або Pixi.js, які були реалізовані для підвищення продуктивності (так само, як Starling Framework відносно Stage3D у світі Flash). Коли WebGL не доступний, вирішення задач 2D бібліотек перекладається на HTML5 canvas.^[44]

Видалення помилок рендерингу через надання майже повного доступу до GPU обмежує продуктивність реалізацій JavaScript. Деякі з них були переадресовані на asm.js^[en]. (Точно так само, як впровадження Stage3D відкрило проблеми продуктивності в межах ActionScript, які були розглянуті в рамках проектів, таких як CrossBridge^[en]).^[44]

Створення контенту для WebGL сцен часто означає, використання стандартних 3D інструментів для створення та експорту сцен, відтворення їх у відповідних форматах для зовнішніх програм. Наприклад у авторському програмному забезпеченні для 3D, такому як Blender або Autodesk Maya. Але існує також деяке специфічне WebGL забезпечення, наприклад онлайн редактор Clara.io^[en] на основі WebGL. Онлайн платформи, такі як Sketchfab^[en] і Clara.io^[en] дозволяють користувачам безпосередньо завантажувати свої 3D моделі і зображати їх за допомогою вбудованого WebGL переглядача.

Крім того, Mozilla Firefox реалізувала інструменти з вбудованим WebGL, починаючи з версії 27, котрі дозволяють редагування vertex і фрагменти шейдерів.^[45] З'явився також ряд інших інструментів задля налагодження й профілювання проектів.^[46]

X3D також виконали проект під назвою X3DOM для створення X3D і VRML контенту, що працює на WebGL. 3D модель розташовують між XML тегами <X3D> у HTML5, а інтерактивний скрипт використовує JavaScript і DOM для відображення. BS Content Studio разом з InstantReality X3D експортером може експортувати X3D у HTML і опрацювати його на WebGL.

Подібні технології для 3D у браузерах

Прошарок Java OpenGL дуже схожий на WebGL у світі Java, в той час як Stage3D є еквівалентом Adobe Flash Player 11 і пізніших версій. Google Native Client також підтримує OpenGL ES 2.0.

Див. також

• O3D
• GLSL
• VRML
• X3D
• Java OpenGL