Відкрити головне меню

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

WebGL
WebGL logo
Тип API
Автор(и) Mozilla Foundation
Розробник Khronos Group
Перший випуск 3 березня, 2011; 8 років тому (2011-03-03)
Стабільний випуск 2.0 (17 січня, 2017; 2 роки тому (2017-01-17))
Операційна система крос-платформова
Ліцензія різні
www.khronos.org/webgl/

CMNS: 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]

Мобільні браузериРедагувати

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

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

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

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

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

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

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

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
  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. Архів оригіналу за 2012-04-12. Процитовано 2011-05-14. 
  8. Taking the canvas to another dimension. My.opera.com. 2007-11-26. Архів оригіналу за 2007-11-17. Процитовано 2011-05-14. 
  9. Google Body – Google Labs. Bodybrowser.googlelabs.com. Архів оригіналу за 2011-05-13. Процитовано 2011-05-14. 
  10. Bhanoo, Sindya N. (2010-12-23). New From Google: The Body Browser. Well.blogs.nytimes.com. Процитовано 2011-05-14. 
  11. AUTODESK FUSION 360: THE FUTURE OF CAD, PT. 1. 3dcadworld.com. Процитовано 2013-08-21. 
  12. WebGL 2 Specification. khronos.org. 2013-09-26. Процитовано 2013-10-28. 
  13. а б WebGL test page
  14. http://www.browserleaks.com/webgl
  15. http://webglreport.com/
  16. Paul Mah (February 8, 2011). Google releases Chrome 9; comes with Google Instant, WebGL – FierceCIO:TechWatch. FierceCIO. Процитовано 2012-03-20. 
  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. 2011-03-22. Процитовано 2012-03-20. 
  20. New in OS X Lion: Safari 5.1 brings WebGL, Do Not Track and more. Fairerplatform.com. 2011-05-03. Архів оригіналу за 2012-03-19. Процитовано 2012-03-20. 
  21. Enable WebGL in Safari. Ikriz.nl. 2011-08-23. Процитовано 2012-03-20. 
  22. Getting a WebGL Implementation. Khronos.org. 2012-01-13. Процитовано 2012-03-20. 
  23. Implementations/WebKit. Khronos.org. 2011-09-03. Процитовано 2012-03-20. 
  24. WebGL Now Available in WebKit Nightlies. Webkit.org. Архів оригіналу за 2012-03-08. Процитовано 2012-03-20. 
  25. WebGL and Hardware Acceleration. My.opera.com. 2011-02-28. Архів оригіналу за 2011-03-03. Процитовано 2012-03-20. 
  26. Introducing Opera 12 alpha. My.opera.com. 2011-10-13. Архів оригіналу за 2011-10-15. Процитовано 2012-03-20. 
  27. http://msdn.microsoft.com/en-US/library/ie/bg182648%28v=vs.85%29
  28. Internet Explorer 11 Preview guide for developers. Microsoft. 2013-07-17. Процитовано 2013-07-24. 
  29. WebGL. Microsoft. 2013-07-17. Процитовано 2013-07-24. 
  30. Internet Explorer 11 to support WebGL and MPEG Dash. Engadget. 2013-06-26. Процитовано 2013-06-26. 
  31. McDonough, Larry. WebGL: 3D Gaming on the Web Arrives. BerryReview. Архів оригіналу за 2013-04-13. Процитовано 2013-04-09. 
  32. Halevy, Ronen. PlayBook OS 2.0 Developer Beta Includes WebGL, Flash 11, & AIR 3.0. BerryReview. Процитовано 2011-11-15. 
  33. Xperia™ phones first to support WebGL™ – Developer World. blogs.sonyericsson.com. The Sony Ericsson Developer Program. 2011-11-29. Процитовано 2011-12-05. 
  34. iclkevin (2011-11-12). WebGL on Mobile Devices. iChemLabs. Процитовано 2011-11-25. 
  35. Kersey, Jason. Chrome Beta for Android Update. Chrome Releases Blog. Google. Процитовано 2013-08-23. 
  36. Opera Mobile 12. Opera Software. Архів оригіналу за 1 березень 2012. Процитовано 27 February 2012. 
  37. Cunningham, Andrew. iOS 8, Thoroughly Reviewed. Процитовано 2014-09-19. 
  38. Tony Parisi (13 February 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. 
  39. Архівована копія. Архів оригіналу за 8 серпень 2014. Процитовано 28 травень 2015. 
  40. http://away3d.com/comments/away3d_typescript_4.1_alpha
  41. Steve Fulton; Jeff Fulton (2013). HTML5 Canvas (вид. 2nd). "O'Reilly Media, Inc.". с. 624. ISBN 978-1-4493-3588-5. 
  42. а б http://typedarray.org/the-webgl-potential/
  43. https://hacks.mozilla.org/2013/11/live-editing-webgl-shaders-with-firefox-developer-tools/
  44. http://www.realtimerendering.com/blog/webgl-debugging-and-profiling-tools/

ПосиланняРедагувати