АссистентНовый вопросИсторияОбласти знаний
Партнёрские проектыСпецпроектыСтать автором
Сменить язык
2219276 статей на русском языкеО РУВИКИ

WebGL

Экспертиза РАН

Logo-ran.pngLogo-ran-black.png
Проводится экспертиза
Российской академией наук
Подробнее
Times2.svg

Экспертиза РАН

Arrow-Right.png
Logo-ran.png
Проводится экспертиза
Российской академией наук
Подробнее

WebGL — JavaScript-API для отображения интерактивной 2D и 3D-графики в любом совместимом веб-браузере без необходимости использования плагинов[1]. WebGL полностью интегрируется с другими веб-стандартами, что позволяет использовать графический процессор (GPU) для ускорения работы с физикой, обработкой изображений и эффектами в элементе HTML canvas. Элементы WebGL могут быть интегрированы вместе с другими элементами HTML и объединены с другими частями страницы или фоном страницы[2].

Программы на WebGL состоят из управляющего кода на JavaScript и шейдеров, написанных на языке OpenGL ES Shading Language (GLSL ES, иногда также ESSL), который схож с языками C и C++. Код WebGL исполняется на GPU пользователя.

WebGL разрабатывается и поддерживается некоммерческой организацией Khronos Group. 9 февраля 2022 года Khronos Group объявила о поддержке WebGL 2.0 во всех основных браузерах[3].

С 2024 года разрабатывается новый графический API — WebGPU, который в перспективе заменит WebGL. WebGPU предоставляет расширенные возможности, более современный интерфейс и прямой доступ к GPU, что востребовано для ресурсозатратной графики и задач искусственного интеллекта.

Общие сведения
WebGL
Тип API
Автор Mozilla Foundation
Разработчик Khronos WebGL Working Group
Первый выпуск 3 марта 2011
Аппаратная платформа кроссплатформенный
Последняя версия 2.1 (17 января 2017)
Сайт khronos.org/webgl/

Архитектура

WebGL 1.0 основан на OpenGL ES 2.0 и реализует API для 3D-графики. Для работы используется элемент HTML5 canvas, а доступ осуществляется через DOM-интерфейсы.

WebGL 2.0 базируется на OpenGL ES 3.0. Он гарантирует наличие многих опциональных расширений WebGL 1.0 и предоставляет новые API. Автоматическое управление памятью (garbage collection) реализовано встроенными средствами JavaScript.

Подобно OpenGL ES 2.0, WebGL не поддерживает fixed-function-API, устаревшие в OpenGL 3.0. Необходимая для этого функциональность может быть реализована программистом на шейдерах и JavaScript.

Шейдеры для WebGL пишутся на языке GLSL и передаются в WebGL API как текстовые строки, которые компилируются для исполнения на GPU. Этот код выполняется для каждой вершины и каждого пикселя, выводимого на экран.

История

WebGL возник из экспериментов с 3D Canvas, начатых Владимиром Вукичевичем в Mozilla. Вукичевич впервые продемонстрировал прототип Canvas 3D в 2006 году. К концу 2007 года свои собственные реализации были у Mozilla[4] и Opera[5].

В начале 2009 года технологический консорциум Khronos Group основал рабочую группу WebGL, в которую изначально вошли Apple, Google, Mozilla, Opera и другие. Версия 1.0 спецификации WebGL была опубликована в марте 2011 года.

Одной из первых практических реализаций WebGL стала Zygote Body[6].[7] В ноябре 2012 года Autodesk анонсировала перенос большинства своих приложений в облако с использованием WebGL — среди них Fusion 360 и AutoCAD 360[8].

Разработка спецификации WebGL 2 началась в 2013 году и завершилась в январе 2017 года[9]. Спецификация основана на OpenGL ES 3.0[10]. Впервые реализация появилась в Firefox 51, Chrome 56 и Opera 43[11].

Реализации

ANGLE (Almost Native Graphics Layer Engine)

Almost Native Graphics Layer Engine (ANGLE) — открытый графический движок, реализующий поддержку WebGL 1.0 (и 2.0, близко к спецификации ES 3.0) и стандартов OpenGL ES 2.0 и 3.0. ANGLE является стандартным бэкендом для Google Chrome и Mozilla Firefox на Windows и работает посредством трансляции вызовов WebGL и OpenGL в специфичные для платформы API. На данный момент ANGLE предоставляет доступ к OpenGL ES 2.0/3.0 через desktop OpenGL, OpenGL ES, Direct3D 9 и 11[12]. В частности, Chrome использует ANGLE для всего вывода графики на Windows, включая ускоренный Canvas2D и среду Native Client[12].

Совместимость браузеров

WebGL широко поддерживается современными браузерами, но его доступность может зависеть и от поддержки со стороны GPU. На официальном сайте WebGL доступна простая страница для тестирования[13]. Более подробную информацию (например, используемый рендерер и список поддерживаемых расширений) можно узнать на сторонних ресурсах[14].[15]

Десктопные браузеры

  • Google Chrome — поддержка WebGL 1.0 на всех платформах с подходящей видеокартой и драйверами с версии 9 (февраль 2011)[16].[17] По умолчанию на Windows Chrome использует ANGLE для трансляции OpenGL ES в DirectX 9.0c или 11.0[18]. На Linux и macOS — по умолчанию рендерер OpenGL[19]. Также можно вручную включить OpenGL-рендерер на Windows[18]. С сентября 2013 доступен рендерер на Direct3D 11 для новых видеокарт[20].[21] С версии 56 поддерживается WebGL 2.0.
  • Firefox — поддержка WebGL 1.0 на всех платформах с подходящими драйверами и видеокартой с версии 4.0[22]. С 2013 года на Windows реализована поддержка через ANGLE и DirectX[18]. С версии 51 — поддержка WebGL 2.0.
  • Safari — с версии 6.0 для OS X Mountain Lion, Mac OS X Lion, а также Safari 5.1 для Mac OS X Snow Leopard была реализована поддержка WebGL 1.0, по умолчанию отключённая до Safari 8.0[23].[24][25][26][27] В Safari 12 (на macOS Mojave) WebGL 2.0 доступен в виде экспериментальной функции. В Safari 15 WebGL 2.0 включён по умолчанию[28].
  • Opera — поддержка WebGL 1.0 реализована в Opera 11 и 12, но была отключена по умолчанию в 2014 году[29].[30] С версии 43 — поддержка WebGL 2.0.
  • Internet Explorer — частичная поддержка WebGL 1.0 реализована в Internet Explorer 11[31].[32][33][34] Для предыдущих версий возможен внешний плагин IEWebGL[35]. Начальная реализация IE не проходила большую часть тестов на совместимость, но в дальнейшем поддержка улучшилась — последняя версия движка (0.94) проходит ~97 % тестов Khronos[36].
  • Microsoft Edge — классическая версия Edge поддерживает WebGL 0.95 в виде приставки (experimental-webgl) и использует открытый транслятор GLSL → HLSL[37]. C версии 10240+ поддерживается WebGL 1.0. В Edge на базе Chromium реализована поддержка WebGL 2.0.

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

  • Google Chrome — поддержка WebGL 1.0 на Android с версии 25[38]. WebGL 2.0 поддерживается в Android с Chrome 114[39]. C Android 5 Chrome используется как веб-просмотрщик по умолчанию[40].
  • BlackBerry 10 — поддержка WebGL 1.0 с версии ОС 10.00[41].
  • BlackBerry PlayBook — WebGL 1.0 доступен через WebWorks и браузер с PlayBook OS 2.00[42].
  • Internet Explorer — WebGL 1.0 с приставкой доступен в Windows Phone 8.x (IE11+).
  • Firefox для мобильных — поддержка WebGL 1.0 для Android и MeeGo начиная с Firefox 4[43].[44]
  • Firefox OS[44]
  • Maemo — в Nokia N900 WebGL 1.0 доступен в браузере microB, начиная с прошивки PR1.2[45].
  • MeeGo — в штатном браузере поддержка отсутствует, но доступна в Firefox[44].
  • Microsoft Edge — с приставкой WebGL 1.0 в Windows 10 Mobile[46].
  • Opera Mobile — версия 12 поддерживает WebGL 1.0 (только на Android)[47].
  • Safari под iOS — WebGL 1.0 поддерживается с iOS 8[48]. WebGL 2.0 — с iOS 15[39]
  • Sailfish OS — поддержка WebGL 1.0 в стандартном браузере.[49].
  • Tizen — поддержка WebGL 1.0[50].

Инструменты и экосистема

Утилиты

Низкоуровневый характер WebGL стал причиной создания множества библиотек более высокого уровня, которые абстрагируют распространённые операции (например, загрузку сценографов или 3D-объектов в определённых форматах, применение матричных преобразований к шейдерам или области видимости). Некоторые такие библиотеки были портированы на JavaScript с других языков. Примеры: A-Frame (VR), BabylonJS, PlayCanvas, three.js, OSG.JS, модель-вьюер Google и CopperLicht. Проект X3DOM от Web3D позволяет запускать X3D и VRML-контент через WebGL.

Игры

Появилось множество 2D и 3D игровых движков для WebGL[51], таких как Unreal Engine 4 и Unity[52]. Библиотека Stage3D/Flash Away3D портирована для WebGL через TypeScript[20].[53] Для векторной и матричной математики в WebGL используется лёгкая библиотека sylvester.js[54].[55] Она иногда сочетается с расширением glUtils.js[54].[56]

Существуют и 2D-библиотеки, такие как Cocos2d-x и Pixi.js, которые реализованы над WebGL для повышения производительности (по аналогии с Starling Framework над Stage3D во Flash). Если WebGL недоступен, большинство подобных библиотек возвращаются к отрисовке на HTML5 canvas[57]. Рост производительности за счёт прямого доступа к GPU оголил и ограничения самих реализаций JavaScript, часть из которых была устранена с помощью asm.js и WebAssembly[57].

Создание контента

Для работы с WebGL-сценами требуется 3D-редактор с экспортом в подходящий формат для библиотеки или просмотрщика. Можно использовать настольные 3D-редакторы, такие как Blender, Autodesk Maya или SimLab Composer. Например, Blend4Web позволяет экспортировать сцену из Blender в браузер в один клик, вплоть до самостоятельной web-страницы[58]. Существуют и специализированные визуальные редакторы для WebGL, такие как CopperCube и онлайн-редактор Clara.io. Онлайн-платформы (Sketchfab, Clara.io) позволяют выкладывать собственные 3D-модели для просмотра через встроенный WebGL-видер.

Инструменты среды

Начиная с Firefox 27, Mozilla включает в Firefox встроенные WebGL-инструменты для живого редактирования вершинных и фрагментных шейдеров[59]. Также существуют отдельные утилиты для отладки и профилирования[60].

Примечания

  1. ↑ WebGL Fundamentals. HTML5 Rocks. Дата обращения: 23 июня 2024. Архивировано 15 февраля 2012 года.
  2. ↑ Parisi, Tony WebGL: Up and Running (англ.). O'Reilly Media, Incorporated (15 августа 2012). Дата обращения: 13 июля 2012. Архивировано 1 февраля 2013 года.
  3. ↑ WebGL 2.0 Achieves Pervasive Support from all Major Web Browsers (англ.). The Khronos Group (9 февраля 2022). Дата обращения: 13 февраля 2022. Архивировано 5 октября 2024 года.
  4. ↑ Canvas 3D: GL power, web-style. Blog.vlad1.com. Дата обращения: 14 мая 2011. Архивировано 17 июля 2011 года.
  5. ↑ Taking the canvas to another dimension. My.opera.com (26 ноября 2007). Дата обращения: 14 мая 2011. Архивировано 17 ноября 2007 года.
  6. ↑ Google Body – Google Labs. Bodybrowser.googlelabs.com. Дата обращения: 14 мая 2011. Архивировано 13 мая 2011 года.
  7. ↑ Bhanoo, Sindya N. New From Google: The Body Browser. Well.blogs.nytimes.com (23 декабря 2010). Дата обращения: 14 мая 2011. Архивировано 25 декабря 2010 года.
  8. ↑ AUTODESK FUSION 360: THE FUTURE OF CAD, PT. 1. 3dcadworld.com (29 ноября 2012). Дата обращения: 21 августа 2013. Архивировано 24 декабря 2012 года.
  9. ↑ WebGL 2 Specification. khronos.org (26 сентября 2013). Дата обращения: 28 октября 2013. Архивировано 12 октября 2013 года.
  10. ↑ WebGL 2.0 Specification. Дата обращения: 23 июня 2024. Архивировано 20 сентября 2013 года.
  11. ↑ WebGL - Web APIs. MDN (28 сентября 2024). Дата обращения: 23 июня 2024. Архивировано 12 октября 2025 года.
  12. ↑ 1 2 ANGLE - Almost Native Graphics Layer Engine (2019). Дата обращения: 21 июня 2019. Архивировано 4 сентября 2025 года.
  13. ↑ WebGL test page. webgl.org. Дата обращения: 23 июня 2024.
  14. ↑ WebGL Report. webglreport.com. Дата обращения: 23 июня 2024.
  15. ↑ WebGL Browser Report — WebGL Detection — WebGL Tester — BrowserLeaks. browserleaks.com. Дата обращения: 23 июня 2024. Архивировано 10 октября 2025 года.
  16. ↑ Mah, Paul Google releases Chrome 9; comes with Google Instant, WebGL. FierceCIO (8 февраля 2011). Дата обращения: 20 марта 2012. Архивировано 25 октября 2011 года.
  17. ↑ WebGL in Chrome Stable! - Learning WebGL. learningwebgl.com. Дата обращения: 7 августа 2014. Архивировано 28 мая 2015 года.
  18. ↑ 1 2 3 (WebGL) How to Enable Native OpenGL in your Browser (Windows). geeks3d.com (11 июня 2013). Архивировано 8 сентября 2025 года.
  19. ↑ Chromium Blog: Introducing the ANGLE Project. Chromium Blog. Дата обращения: 23 июня 2024. Архивировано 11 октября 2025 года.
  20. ↑ 1 2 WebGL around the net, 17 Oct 2013 - Learning WebGL. learningwebgl.com. Дата обращения: 5 августа 2014. Архивировано 8 августа 2014 года.
  21. ↑ At last! Chrome D3D11 day has come! tojicode.com. Дата обращения: 23 июня 2024. Архивировано 2 сентября 2025 года.
  22. ↑ Mozilla Firefox 4 Release Notes. Mozilla.com (22 марта 2011). Дата обращения: 20 марта 2012. Архивировано 23 марта 2011 года.
  23. ↑ New in OS X Lion: Safari 5.1 brings WebGL, Do Not Track and more. Fairerplatform.com (3 мая 2011). Дата обращения: 20 марта 2012. Архивировано 19 марта 2012 года.
  24. ↑ Enable WebGL in Safari. Ikriz.nl (23 августа 2011). Дата обращения: 20 марта 2012. Архивировано 4 марта 2012 года.
  25. ↑ Getting a WebGL Implementation. Khronos.org (13 января 2012). Дата обращения: 20 марта 2012. Архивировано 14 декабря 2009 года.
  26. ↑ Implementations/WebKit. Khronos.org (3 сентября 2011). Дата обращения: 20 марта 2012. Архивировано 22 декабря 2009 года.
  27. ↑ WebGL Now Available in WebKit Nightlies. Webkit.org. Дата обращения: 20 марта 2012. Архивировано 8 марта 2012 года.
  28. ↑ modeless Safari 15 is released. WebGL 2 is now supported in every major browser and platform! r/webgl (24 сентября 2021). Дата обращения: 18 октября 2023. Архивировано 1 декабря 2024 года.
  29. ↑ WebGL and Hardware Acceleration. My.opera.com (28 февраля 2011). Дата обращения: 20 марта 2012. Архивировано 3 марта 2011 года.
  30. ↑ Introducing Opera 12 alpha. My.opera.com (13 октября 2011). Дата обращения: 20 марта 2012. Архивировано 15 октября 2011 года.
  31. ↑ WebGL (Windows). microsoft.com. Microsoft. Дата обращения: 23 июня 2024. Архивировано 30 июня 2013 года.
  32. ↑ Internet Explorer 11 Preview guide for developers. Microsoft (17 июля 2013). Дата обращения: 24 июля 2013. Архивировано 21 сентября 2013 года.
  33. ↑ WebGL. Microsoft (17 июля 2013). Дата обращения: 24 июля 2013. Архивировано 21 сентября 2013 года.
  34. ↑ Internet Explorer 11 to support WebGL and MPEG Dash. Engadget (26 июня 2013). Дата обращения: 26 июня 2013. Архивировано 15 января 2024 года.
  35. ↑ IEWebGL. Iewebgl. Дата обращения: 14 августа 2014. Архивировано 15 августа 2025 года.
  36. ↑ IE11 fails more than half tests in official WebGL conformance test suite. Microsoft Connect. Дата обращения: 23 июня 2024. Архивировано 12 августа 2014 года.
  37. ↑ GitHub - Microsoft Edge WebGL Implementation. Microsoft (4 июня 2016). Дата обращения: 10 июня 2016. Архивировано 9 июня 2016 года.
  38. ↑ WebGL: 2D and 3D graphics for the web - Web APIs - MDN. Дата обращения: 28 июня 2023. Архивировано 12 октября 2025 года.
  39. ↑ 1 2 WebGL 2.0 - Can I use... Дата обращения: 28 июня 2023. Архивировано 13 сентября 2025 года.
  40. ↑ Chrome for Android and Webview. Дата обращения: 9 июня 2025. Архивировано 11 сентября 2025 года.
  41. ↑ McDonough, Larry WebGL: 3D Gaming on the Web Arrives. BerryReview. Дата обращения: 9 апреля 2013. Архивировано 13 апреля 2013 года.
  42. ↑ Halevy, Ronen PlayBook OS 2.0 Developer Beta Includes WebGL, Flash 11, & AIR 3.0. BerryReview. Дата обращения: 15 ноября 2011. Архивировано 20 октября 2011 года.
  43. ↑ WebGL on Mobile Devices. iChemLabs (12 ноября 2011). Дата обращения: 25 ноября 2011. Архивировано 27 января 2013 года.
  44. ↑ 1 2 3 Mobile HTML5 compatibility on iPhone, Android, Windows Phone, BlackBerry, Firefox OS and other mobile devices. Дата обращения: 16 сентября 2015.
  45. ↑ Voipio, Riku WebGL on N900. Suihkulokki.blogspot.com (7 июня 2010). Дата обращения: 14 мая 2011. Архивировано 17 мая 2025 года.
  46. ↑ Dev guide: WebGL – Microsoft Edge Development. Microsoft. Дата обращения: 10 июня 2016. Архивировано 8 октября 2016 года.
  47. ↑ Opera Mobile 12. Opera Software. Дата обращения: 27 февраля 2012. Архивировано 1 марта 2012 года.
  48. ↑ Cunningham, Andrew iOS 8, Thoroughly Reviewed. Ars Technica (17 сентября 2014). Дата обращения: 19 сентября 2014. Архивировано 20 сентября 2014 года.
  49. ↑ HTML5test – How well does your browser support HTML5? Дата обращения: 16 сентября 2015. Архивировано 30 ноября 2024 года.
  50. ↑ HTML5test – How well does your browser support HTML5? Дата обращения: 16 сентября 2015. Архивировано 30 ноября 2024 года.
  51. ↑ Parisi, Tony. Programming 3D Applications with HTML5 and WebGL: 3D Animation and Visualization for Web Pages. — O'Reilly Media, Inc., 13 февраля 2014. — P. 364–366. — ISBN 978-1-4493-6395-6.
  52. ↑ Barrett, Stephen Tegra K1 Lands in Acer's Newest Chromebook. anandtech.com. Архивировано 11 августа 2014 года.
  53. ↑ Blog > Away3D Typescript 4.1 Alpha > Away3D. away3d.com. Дата обращения: 5 августа 2014. Архивировано 8 августа 2014 года.
  54. ↑ 1 2 Boreskov, Alexey. Computer Graphics: From Pixels to Programmable Graphics Hardware / Alexey Boreskov, Evgeniy Shikin. — CRC Press, 2014. — P. 370. — ISBN 978-1-4398-6730-3.
  55. ↑ Anyuru, Andreas. Professional WebGL Programming: Developing 3D Graphics for the Web. — John Wiley & Sons, 2012. — P. 140. — ISBN 978-1-119-94059-3.
  56. ↑ Fulton, Steve. HTML5 Canvas / Steve Fulton, Jeff Fulton. — 2nd. — O'Reilly Media, Inc., 2013. — P. 624. — ISBN 978-1-4493-3588-5.
  57. ↑ 1 2 The WebGL potential - TypedArray.org. typedarray.org. Дата обращения: 23 июня 2024. Архивировано 9 апреля 2013 года.
  58. ↑ Blend4Web Official Site - About. Blend4Web.com. Дата обращения: 22 июня 2015. Архивировано 15 апреля 2014 года.
  59. ↑ Live editing WebGL shaders with Firefox Developer Tools. Mozilla Hacks – the Web developer blog. Дата обращения: 23 июня 2024. Архивировано 28 апреля 2025 года.
  60. ↑ Real-Time Rendering · WebGL Debugging and Profiling Tools. realtimerendering.com (19 ноября 2013). Дата обращения: 23 июня 2024. Архивировано 1 августа 2025 года.

Ссылки

Категории