WebGL
Привязки JavaScript для OpenGL в веб-браузерах
WebGL
Оригинальный автор(ы)Фонд Мозиллы
Разработчик(и)Рабочая группа Khronos WebGL
Первоначальный выпуск3 марта 2011 г. ; 13 лет назад [1] ( 2011-03-03 )
Стабильный релиз
2.0 / 17 января 2017 г. ; 7 лет назад ( 2017-01-17 )
ПлатформаКроссплатформенный
ТипAPI
Веб-сайтwww.khronos.org/webgl/
HTML
Сравнения

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

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

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

Дизайн

WebGL 1.0 основан на OpenGL ES 2.0 и предоставляет API для 3D-графики. [6] Он использует элемент HTML5 canvas и доступен с помощью интерфейсов Document Object Model (DOM).

WebGL 2.0 основан на OpenGL ES 3.0 . Он гарантирует доступность многих дополнительных расширений WebGL 1.0 и предоставляет новые API. [7] Автоматическое управление памятью неявно обеспечивается JavaScript . [4]

Как и OpenGL ES 2.0, WebGL не имеет API с фиксированными функциями , представленных в OpenGL 1.0 и устаревших в OpenGL 3.0. Эта функциональность, если требуется, должна быть реализована разработчиком с использованием кода шейдера и JavaScript.

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

История

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

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

Ранним приложением WebGL было Zygote Body . [11] [12] В ноябре 2012 года Autodesk объявила, что перенесла большую часть своих приложений в облако, работающее на локальных клиентах WebGL. Эти приложения включали Fusion 360 и AutoCAD 360. [13]

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

Реализации

Почти родной графический движок слоя

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

Программное обеспечение

WebGL широко поддерживается современными браузерами. Однако его доступность зависит и от других факторов, например, поддерживает ли его графический процессор. Официальный сайт WebGL предлагает простую тестовую страницу. [18] Более подробную информацию (например, какой рендерер использует браузер и какие расширения доступны) можно найти на сторонних сайтах. [19] [20]

Браузеры для настольных компьютеров[2]

  • Google Chrome – WebGL 1.0 был включен на всех платформах, имеющих подходящую видеокарту с обновленными драйверами, начиная с версии 9, выпущенной в феврале 2011 года. [21] [22] По умолчанию в Windows Chrome использует рендерер ANGLE (Almost Native Graphics Layer Engine) для перевода OpenGL ES в Direct X 9.0c или 11.0, которые имеют лучшую поддержку драйверов. [23] Однако в Linux и Mac OS X рендерером по умолчанию является OpenGL. [24] Также можно принудительно установить OpenGL в качестве рендерера в Windows. [23] С сентября 2013 года в Chrome также есть более новый рендерер Direct3D 11, для которого требуется более новая видеокарта. [25] [26] Chrome 56+ поддерживает WebGL 2.0.
  • Firefox – WebGL 1.0 был включен на всех платформах, имеющих совместимую видеокарту с обновленными драйверами, начиная с версии 4.0. [27] С 2013 года Firefox также использует DirectX на платформе Windows через ANGLE . [23] Firefox 51+ поддерживает WebGL 2.0.
  • Safari – 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. [28] [29] [30] [31] [32] Safari версии 12 (доступно в MacOS Mojave) имеет доступную поддержку WebGL 2.0 как «экспериментальную» функцию. Safari 15 включает WebGL 2.0 для всех пользователей. [33]
  • Opera – WebGL 1.0 был реализован в Opera 11 и 12, но был отключен по умолчанию в 2014 году. [34] [35] Opera 43+ поддерживает WebGL 2.0.
  • Internet Explorer – WebGL 1.0 частично поддерживается в Internet Explorer 11. [ 36] [37] [38] [39] Internet Explorer изначально провалил большинство официальных тестов соответствия WebGL, но Microsoft позже выпустила несколько обновлений. Последний движок WebGL 0.94 в настоящее время проходит ~97% тестов Khronos. [40] Поддержку WebGL также можно вручную добавить в более ранние версии Internet Explorer с помощью сторонних плагинов, таких как IEWebGL. [41]
  • Microsoft Edge – Для Microsoft Edge Legacy начальный стабильный релиз поддерживает WebGL версии 0.95 (контекстное имя: "experimental-webgl") с открытым исходным кодом GLSL to HLSL transpiler . [42] Версия 10240+ поддерживает WebGL 1.0 в качестве префикса. Последняя версия Edge на базе Chromium поддерживает WebGL 2.0.

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

  • Браузер Android – WebGL 1.0 поддерживается на Android, начиная с Chrome 25. [43] WebGL 2.0 поддерживается на Android, начиная с Chrome 114. [44] Chrome используется для системного веб-просмотра Android, начиная с Android 5. [44]
  • BlackBerry 10 – WebGL 1.0 доступен для устройств BlackBerry, начиная с версии ОС 10.00 [45]
  • BlackBerry PlayBook – WebGL 1.0 доступен через WebWorks и браузер в PlayBook OS 2.00 [46]
  • Internet Explorer – префикс WebGL 1.0 доступен на Windows Phone 8.x (11+)
  • Firefox для мобильных устройств – WebGL 1.0 доступен для устройств Android и MeeGo, начиная с Firefox 4. [47] [48]
  • ОС Firefox [48]
  • Google Chrome – WebGL 1.0 доступен для устройств Android, начиная с версии Google Chrome 25, и включен по умолчанию, начиная с версии 30. [49]
  • Maemo – В Nokia N900 WebGL 1.0 доступен в стандартном браузере microB, начиная с обновления прошивки PR1.2. [50]
  • MeeGo – WebGL 1.0 не поддерживается в стандартном браузере «Web». Однако он доступен через Firefox . [48]
  • Microsoft Edge – префикс WebGL 1.0 доступен на Windows 10 Mobile. [51]
  • Opera Mobile – Opera Mobile 12 поддерживает WebGL 1.0 (только на Android). [52]
  • Safari на iOS – WebGL 1.0 доступен для мобильного Safari в iOS 8. [ 53] WebGL 2.0 доступен для мобильного Safari в iOS 15. [44]
  • Sailfish OS – WebGL 1.0 поддерживается в браузере Sailfish по умолчанию. [54]
  • Tizen – WebGL 1.0 поддерживается [55]

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

Коммунальные услуги

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

Игры

Появились 2D и 3D игровые движки для WebGL, [56] такие как Unreal Engine 4 и Unity . [57] Библиотека высокого уровня Away3D на основе Stage3D /Flash также имеет порт для WebGL через TypeScript . [25] [58] Более легкая библиотека утилит, которая предоставляет только векторные и матричные математические утилиты для шейдеров, — это sylvester.js. [59] [60] Иногда она используется вместе со специальным расширением WebGL, называемым glUtils.js. [59] [61]

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

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

Как и в случае с любым другим графическим API, создание контента для сцен WebGL требует использования инструмента создания 3D-контента и экспорта сцены в формат, который может быть прочитан средством просмотра или вспомогательной библиотекой. Для этой цели можно использовать программное обеспечение для настольного 3D-авторства, такое как Blender , Autodesk Maya или SimLab Composer. В частности, Blend4Web позволяет полностью создавать сцену WebGL в Blender и экспортировать ее в браузер одним щелчком мыши, даже в качестве отдельной веб-страницы. [63] Также существует некоторое специфичное для WebGL программное обеспечение, такое как CopperCube и онлайн-редактор на основе WebGL Clara.io . Онлайн-платформы, такие как Sketchfab и Clara.io, позволяют пользователям напрямую загружать свои 3D-модели и отображать их с помощью размещенного средства просмотра WebGL.

Инструменты, основанные на окружающей среде

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

Смотрите также

Ссылки

  1. ^ ab "Khronos выпускает финальную спецификацию WebGL 1.0". 3 марта 2011 г. Получено 18 мая 2015 г.
  2. ^ ab "Основы WebGL". HTML5 Rocks.
  3. ^ Паризи, Тони (2012-08-15). "WebGL: Up and Running". O'Reilly Media, Incorporated. Архивировано из оригинала 2013-02-01 . Получено 2012-07-13 .
  4. ^ abc "WebGL – OpenGL ES 2.0 для Интернета". Khronos.org . Получено 2011-05-14 .
  5. ^ "WebGL 2.0 получает всеобъемлющую поддержку от всех основных веб-браузеров". Группа Khronos . 2022-02-09 . Получено 2022-02-13 .
  6. ^ "Спецификация WebGL". Khronos.org . Получено 2011-05-14 .
  7. ^ "Спецификация WebGL 2.0". Khronos.org . Получено 27.02.2017 .
  8. ^ "Canvas 3D: GL power, web-style". Blog.vlad1.com. Архивировано из оригинала 2011-07-17 . Получено 2011-05-14 .
  9. ^ "Переводим холст в другое измерение". My.opera.com. 2007-11-26. Архивировано из оригинала 2007-11-17 . Получено 2011-05-14 .
  10. ^ "Khronos представляет подробности инициативы WebGL по внедрению аппаратно-ускоренной 3D-графики в Интернет". Khronos.org. 2009-08-04. Архивировано из оригинала 2012-04-19 . Получено 2011-05-14 .
  11. ^ "Google Body – Google Labs". Bodybrowser.googlelabs.com. Архивировано из оригинала 2011-05-13 . Получено 2011-05-14 .
  12. ^ Бхану, Синдья Н. (2010-12-23). ​​"Новинки от Google: The Body Browser". Well.blogs.nytimes.com . Получено 2011-05-14 .
  13. ^ "AUTODESK FUSION 360: БУДУЩЕЕ САПР, ЧАСТЬ 1". 3dcadworld.com. 29 ноября 2012 г. Получено 21 августа 2013 г.
  14. ^ "Спецификация WebGL 2". khronos.org. 2013-09-26 . Получено 2013-10-28 .
  15. ^ «Спецификация WebGL 2.0».
  16. ^ "WebGL - Web API". MDN . 28 сентября 2024 г.
  17. ^ ab "ANGLE - Almost Native Graphics Layer Engine". 2019 . Получено 21 июня 2019 .
  18. ^ "Тестовая страница WebGL". webgl.org .
  19. ^ "Отчет WebGL". webglreport.com .
  20. ^ «Отчет о браузере WebGL — Обнаружение WebGL — Тестер WebGL — BrowserLeaks». browserleaks.com .
  21. ^ Мах, Пол (8 февраля 2011 г.). "Google выпускает Chrome 9; поставляется с Google Instant, WebGL – FierceCIO:TechWatch". FierceCIO. Архивировано из оригинала 2011-10-25 . Получено 2012-03-20 .
  22. ^ "WebGL в Chrome Stable! - Изучаем WebGL". learningwebgl.com . Архивировано из оригинала 2015-05-28 . Получено 2014-08-07 .
  23. ^ abc "(WebGL) Как включить собственный OpenGL в вашем браузере (Windows)". geeks3d.com . 11 июня 2013 г.
  24. ^ "Блог Chromium: Знакомство с проектом ANGLE". Блог Chromium .
  25. ^ ab "WebGL в сети, 17 октября 2013 г. - Изучение WebGL". learningwebgl.com . Архивировано из оригинала 8 августа 2014 г. . Получено 5 августа 2014 г. .
  26. ^ "Наконец-то! Настал день Chrome D3D11!". tojicode.com .
  27. ^ "Заметки о выпуске Mozilla Firefox 4". Mozilla.com. 2011-03-22 . Получено 2012-03-20 .
  28. ^ "Новое в OS X Lion: Safari 5.1 приносит WebGL, Do Not Track и многое другое". Fairerplatform.com. 2011-05-03. Архивировано из оригинала 2012-03-19 . Получено 2012-03-20 .
  29. ^ "Включить WebGL в Safari". Ikriz.nl. 2011-08-23. Архивировано из оригинала 2012-03-04 . Получено 2012-03-20 .
  30. ^ "Получение реализации WebGL". Khronos.org. 2012-01-13 . Получено 2012-03-20 .
  31. ^ "Implementations/WebKit". Khronos.org. 2011-09-03 . Получено 2012-03-20 .
  32. ^ "WebGL теперь доступен в WebKit Nightlies". Webkit.org. Архивировано из оригинала 2012-03-08 . Получено 2012-03-20 .
  33. ^ modeless (24.09.2021). "Safari 15 выпущен. WebGL 2 теперь поддерживается во всех основных браузерах и платформах!". r/webgl . Получено 18.10.2023 .
  34. ^ "WebGL и аппаратное ускорение". My.opera.com. 2011-02-28. Архивировано из оригинала 2011-03-03 . Получено 2012-03-20 .
  35. ^ "Представляем Opera 12 alpha". My.opera.com. 2011-10-13. Архивировано из оригинала 2011-10-15 . Получено 2012-03-20 .
  36. ^ "WebGL (Windows)". microsoft.com . Microsoft.
  37. ^ "Руководство по предварительной версии Internet Explorer 11 для разработчиков". Microsoft. 2013-07-17 . Получено 2013-07-24 .
  38. ^ "WebGL". Microsoft. 2013-07-17 . Получено 2013-07-24 .
  39. ^ "Internet Explorer 11 будет поддерживать WebGL и MPEG Dash". Engadget. 2013-06-26 . Получено 2013-06-26 .
  40. ^ «IE11 проваливает более половины тестов в официальном наборе тестов на соответствие WebGL». Microsoft Connect.
  41. ^ "IEWebGL". Iewebgl . Получено 2014-08-14 .
  42. ^ "GitHub - Реализация Microsoft Edge WebGL". Microsoft. 2016-06-04 . Получено 2016-06-10 .
  43. ^ "WebGL: 2D и 3D графика для веба - Web API - MDN" . Получено 2023-06-28 .
  44. ^ abc "WebGL 2.0 - Могу ли я использовать..." Получено 28.06.2023 .
  45. ^ Макдоноу, Ларри. "WebGL: 3D-игры в Интернете уже здесь". BerryReview . Архивировано из оригинала 2013-04-13 . Получено 2013-04-09 .
  46. ^ Халеви, Ронен. "PlayBook OS 2.0 Developer Beta включает WebGL, Flash 11 и AIR 3.0". BerryReview . Получено 15 ноября 2011 г.
  47. ^ "WebGL на мобильных устройствах". iChemLabs. 2011-11-12. Архивировано из оригинала 2013-01-27 . Получено 2011-11-25 .
  48. ^ abc "Совместимость Mobile HTML5 на iPhone, Android, Windows Phone, BlackBerry, Firefox OS и других мобильных устройствах" . Получено 16 сентября 2015 г.
  49. ^ Керси, Джейсон. "Обновление Chrome Beta для Android". Блог Chrome Releases . Получено 23.08.2013 .
  50. ^ Voipio, Riku (2010-06-07). "WebGL на N900". Suihkulokki.blogspot.com . Получено 2011-05-14 .
  51. ^ "Dev guide: WebGL – Microsoft Edge Development". Microsoft. Архивировано из оригинала 2016-10-08 . Получено 2016-06-10 .
  52. ^ "Opera Mobile 12". Opera Software. Архивировано из оригинала 1 марта 2012 года . Получено 27 февраля 2012 года .
  53. ^ Каннингем, Эндрю (17.09.2014). «iOS 8, тщательно рассмотрен». Ars Technica . Получено 19.09.2014 .
  54. ^ "HTML5test – Насколько хорошо ваш браузер поддерживает HTML5?" . Получено 16.09.2015 .
  55. ^ "HTML5test – Насколько хорошо ваш браузер поддерживает HTML5?" . Получено 16.09.2015 .
  56. ^ Паризи, Тони (13 февраля 2014 г.). Программирование 3D-приложений с HTML5 и WebGL: 3D-анимация и визуализация для веб-страниц. "O'Reilly Media, Inc.". С.  364– 366. ISBN 978-1-4493-6395-6.
  57. ^ Барретт, Стивен. «Tegra K1 в новейшем Chromebook от Acer». anandtech.com .
  58. ^ "Блог > Away3D Typescript 4.1 Alpha > Away3D". away3d.com . Архивировано из оригинала 2014-08-08 . Получено 2014-08-05 .
  59. ^ ab Боресков, Алексей; Шикин, Евгений (2014). Компьютерная графика: от пикселей до программируемого графического оборудования. CRC Press. стр. 370. ISBN 978-1-4398-6730-3.
  60. ^ Анюру, Андреас (2012). Профессиональное программирование WebGL: разработка 3D-графики для Интернета. John Wiley & Sons. стр. 140. ISBN 978-1-119-94059-3.
  61. ^ Фултон, Стив; Фултон, Джефф (2013). HTML5 Canvas (2-е изд.). «О'Рейли Медиа, Инк.». п. 624. ИСБН 978-1-4493-3588-5.
  62. ^ ab "Потенциал WebGL - TypedArray.org". typedarray.org .
  63. ^ "Официальный сайт Blend4Web - О нас". Blend4Web.com . Получено 22.06.2015 .
  64. ^ "Редактирование шейдеров WebGL в реальном времени с помощью инструментов разработчика Firefox". Mozilla Hacks – блог веб-разработчиков .
  65. ^ "Рендеринг в реальном времени · Инструменты отладки и профилирования WebGL". realtimerendering.com . 19 ноября 2013 г.
Взято с "https://en.wikipedia.org/w/index.php?title=WebGL&oldid=1265315367"