WebGL

Матеріал з Вікіпедії — вільної енциклопедії.
Перейти до: навігація, пошук
WebGL [1]
WebGL logo
Тип API
Автор(и) Mozilla Foundation
Розробник(и) Khronos Group
Стабільний випуск 1.0.2[2] (1 березня 2013 )
Версії 1.0.3[3]
Нестабільний випуск 2.0[4] (26 вересня 2013)
Операційна система крос-платформова
Ліцензія різні
Веб-сайт www.khronos.org/webgl/

CMNS: WebGL на Вікісховищі
HTML

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

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

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

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

Про підтримку специфікації у своєму браузері Chrome, починаючи з версії 9[10], оголосив 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[11], і Opera[12] розробили свої окремі реалізації.

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

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

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

Реалізація[ред.ред. код]

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

  • Google Chrome — WebGL доступний для всіх платформ, котрі мають необхідну графічну карту з оновленими драйверами, починаючи з 9 версії, випущеної у 2011 році.[20][21] За замовченням у Windows Chrome використовує ANGLE рендер для перекладу з OpenGL ES у DirectX 9.0c або 11.0, котрий має більш якісну підтримку драйверів.[22] На Linux та Mac OS X за замовченням засобом візуалізації є OpenGL. Також можливо змусити Windows використовувати OpenGL як рендер. Починаючи з вересня 2013 року, Chrome також має новіший Direct3D 10 рендер, котрий, однак потребує більш нову графічну карту.
  • Mozilla Firefox — WebGL доступний для всіх платформ, котрі мають необхідну графічну карту з оновленими драйверами, починаючи з версії 4.0.[23] Починаючи з 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.[24][25][26][27][28]
  • Opera — WebGL реалізований у Opera 11 та 12, хоча вимкнений за замовчуванням.[29][30]
  • Internet Explorer — WebGL частково підтримується у Internet Explorer 11. Спершу він не витримував жодного тесту на сумісність від WebGL, пізніше Microsoft випустив декілька оновлень. Остання версія 0.94 WebGL на даний момент проходить близько ~97% тестів від Khronos. Підтримка WebGL також може бути підключена вручну до попередніх версій Internet Explorer, використовуючи сторонні плагіни, такі як IEWebGL наприклад.[31][32][33][34]

Мобільні браузери[ред.ред. код]

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

Створення контенту та його експорт[ред.ред. код]

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

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

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

Створення контенту для 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 і фрагменти шейдерів.[47] З'явився також ряд інших інструментів задля налагодження й профілювання проектів.[48]

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

Посилання[ред.ред. код]