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 (2011-03-03)
Стабільний випуск 2.0 (17 січня 2017 (2017-01-17))
Операційна система крос-платформова
Ліцензія різні
Вебсайт www.khronos.org/webgl/
 WebGL у Вікісховищі
HTML

Ця технологія дозволяє упроваджувати апаратно-прискорену 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 Владимира Вукичевича з 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, CopperLicht і GLGE. Також розвиваються [Гральний рушій|ігрові рушії] на WebGL,[40] включаючи Unreal Engine 4 і 5. Stage3D /Flash-based Away3D — бібліотека високого рівня, також має порт на WebGL реалізований на TypeScript.[41][42] Існують і простіші бібліотеки, котрі надають тільки векторні та матричні математичні можливості для шейдерів — sylvester.js. Іноді вона використовується в поєднанні з розширенням WebGL — glUtils.js.[43]

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

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

Створення контенту для WebGL сцен часто означає, використання стандартних 3D інструментів для створення та експорту сцен, відтворення їх у відповідних форматах для зовнішніх програм. Наприклад у авторському програмному забезпеченні для 3D, такому як Blender або Autodesk Maya. Але існує також деяке специфічне WebGL забезпечення, наприклад, CopperCube і онлайн редактор Clara.io на основі WebGL. Онлайн платформи, такі як Sketchfab і Clara.io дозволяють користувачам безпосередньо завантажувати свої 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.

Див. також

Виноски
  1. Canvas 3D. Архів оригіналу за 12 квітня 2012. Процитовано 14 грудня 2009.
  2. Firefox nightly builds
  3. WebKit nightly builds
  4. WebGL slips into Chrome, too, for 3D Web. Архів оригіналу за 20 грудня 2012. Процитовано 14 грудня 2009.
  5. WebGL 3D web standard reaches draft stages — Techradar, 11.12.2009
  6. http://chrome.blogspot.com/2011/02/dash-of-speed-3d-and-apps.html
  7. Canvas 3D: GL power, web-style. Blog.vlad1.com. Архів оригіналу за 12 квітня 2012. Процитовано 14 травня 2011.
  8. Taking the canvas to another dimension. My.opera.com. 26 листопада 2007. Архів оригіналу за 17 листопада 2007. Процитовано 14 травня 2011.
  9. Google Body – Google Labs. Bodybrowser.googlelabs.com. Архів оригіналу за 13 травня 2011. Процитовано 14 травня 2011.
  10. Bhanoo, Sindya N. (23 грудня 2010). New From Google: The Body Browser. Well.blogs.nytimes.com. Процитовано 14 травня 2011.
  11. AUTODESK FUSION 360: THE FUTURE OF CAD, PT. 1. 3dcadworld.com. Процитовано 21 серпня 2013.
  12. WebGL 2 Specification. khronos.org. 26 вересня 2013. Процитовано 28 жовтня 2013.
  13. WebGL test page
  14. http://www.browserleaks.com/webgl
  15. http://webglreport.com/
  16. Paul Mah (8 лютого 2011). Google releases Chrome 9; comes with Google Instant, WebGL – FierceCIO:TechWatch. FierceCIO. Процитовано 20 березня 2012.
  17. Архівована копія. Архів оригіналу за 28 травня 2015. Процитовано 28 травня 2015.
  18. http://blog.tojicode.com/2013/09/at-last-chrome-d3d11-day-has-come.html
  19. Mozilla Firefox 4 Release Notes. Mozilla.com. 22 березня 2011. Архів оригіналу за 23 березня 2011. Процитовано 20 березня 2012.
  20. New in OS X Lion: Safari 5.1 brings WebGL, Do Not Track and more. Fairerplatform.com. 3 травня 2011. Архів оригіналу за 19 березня 2012. Процитовано 20 березня 2012.
  21. Enable WebGL in Safari. Ikriz.nl. 23 серпня 2011. Архів оригіналу за 4 березня 2012. Процитовано 20 березня 2012.
  22. Getting a WebGL Implementation. Khronos.org. 13 січня 2012. Процитовано 20 березня 2012.
  23. Implementations/WebKit. Khronos.org. 3 вересня 2011. Процитовано 20 березня 2012.
  24. WebGL Now Available in WebKit Nightlies. Webkit.org. Архів оригіналу за 8 березня 2012. Процитовано 20 березня 2012.
  25. WebGL and Hardware Acceleration. My.opera.com. 28 лютого 2011. Архів оригіналу за 3 березня 2011. Процитовано 20 березня 2012.
  26. Introducing Opera 12 alpha. My.opera.com. 13 жовтня 2011. Архів оригіналу за 15 жовтня 2011. Процитовано 20 березня 2012.
  27. http://msdn.microsoft.com/en-US/library/ie/bg182648%28v=vs.85%29
  28. Internet Explorer 11 Preview guide for developers. Microsoft. 17 липня 2013. Процитовано 24 липня 2013.
  29. WebGL. Microsoft. 17 липня 2013. Процитовано 24 липня 2013.
  30. Internet Explorer 11 to support WebGL and MPEG Dash. Engadget. 26 червня 2013. Процитовано 26 червня 2013.
  31. GitHub - Microsoft Edge WebGL Implementation. Microsoft. 4 червня 2016. Процитовано 10 червня 2016.
  32. The status of WebGL 2.0 in Microsoft Edge is Under Considieration. Microsoft Edge Development. Архів оригіналу за 27 грудня 2018. Процитовано 2 жовтня 2019.
  33. McDonough, Larry. WebGL: 3D Gaming on the Web Arrives. BerryReview. Архів оригіналу за 13 квітня 2013. Процитовано 9 квітня 2013.
  34. Halevy, Ronen. PlayBook OS 2.0 Developer Beta Includes WebGL, Flash 11, & AIR 3.0. BerryReview. Процитовано 15 листопада 2011.
  35. Xperia™ phones first to support WebGL™ – Developer World. blogs.sonyericsson.com. The Sony Ericsson Developer Program. 29 листопада 2011. Архів оригіналу за 12 березня 2013. Процитовано 5 грудня 2011.
  36. iclkevin (12 листопада 2011). WebGL on Mobile Devices. iChemLabs. Архів оригіналу за 12 березня 2013. Процитовано 25 листопада 2011.
  37. Kersey, Jason. Chrome Beta for Android Update. Chrome Releases Blog. Google. Процитовано 23 серпня 2013.
  38. Opera Mobile 12. Opera Software. Архів оригіналу за 1 березня 2012. Процитовано 27 лютого 2012.
  39. Cunningham, Andrew. iOS 8, Thoroughly Reviewed. Процитовано 19 вересня 2014.
  40. Tony Parisi (13 лютого 2014). Programming 3D Applications with HTML5 and WebGL: 3D Animation and Visualization for Web Pages. "O'Reilly Media, Inc.". с. 364–366. ISBN 978-1-4493-6395-6.
  41. Архівована копія. Архів оригіналу за 8 серпня 2014. Процитовано 28 травня 2015.
  42. Архівована копія. Архів оригіналу за 8 серпня 2014. Процитовано 28 травня 2015.
  43. Steve Fulton; Jeff Fulton (2013). HTML5 Canvas (вид. 2nd). "O'Reilly Media, Inc.". с. 624. ISBN 978-1-4493-3588-5.
  44. http://typedarray.org/the-webgl-potential/
  45. https://hacks.mozilla.org/2013/11/live-editing-webgl-shaders-with-firefox-developer-tools/
  46. http://www.realtimerendering.com/blog/webgl-debugging-and-profiling-tools/

Посилання
This article is issued from Wikipedia. The text is licensed under Creative Commons - Attribution - Sharealike. Additional terms may apply for the media files.