WebGL - WebGL

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

WebGL (Библиотека веб-графики) это JavaScript API для рендеринга интерактивной 2D и 3D графики в любых совместимых веб-браузер без использования плагины.[2] WebGL полностью интегрирован с другими веб-стандарты, позволяя использовать физику, обработку изображений и эффекты с ускорением на GPU как часть холста веб-страницы. Элементы WebGL можно смешивать с другими элементами HTML и комбинировать с другими частями страницы или фоном страницы.[3] Программы WebGL состоят из управляющего кода, написанного на JavaScript и шейдер код, написанный на Язык шейдинга OpenGL ES (GLSL ES), язык, похожий на C или же C ++, и выполняется на компьютере графический процессор (GPU) .WebGL разработан и поддерживается некоммерческий Хронос Групп.[4]

Дизайн

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

WebGL 2.0 основан на OpenGL ES 3.0 и сделал гарантированную доступность многих дополнительных расширений WebGL 1.0 и предоставляет новые API.[6]

Автоматическое управление памятью неявно предоставляется JavaScript.[4]

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

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

История

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

В начале 2009 г. некоммерческий технологии консорциум Хронос Групп основал рабочую группу WebGL с первоначальным участием яблоко, Google, Mozilla, Опера, и другие.[4][9] Версия 1.0 спецификации WebGL была выпущена в марте 2011 года.[1] По состоянию на март 2012 года председателем рабочей группы является Кен Рассел.

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

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

Реализации

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

Основная статья: УГОЛ (программное обеспечение)

Почти 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 для настольных OpenGL, OpenGL ES, Direct3D 9 и Direct3D 11 API.[16] "[Google] Chrome использует ANGLE для отрисовки всей графики в Windows, включая ускоренную реализацию Canvas2D и среду песочницы собственного клиента. ″[16]

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

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

Настольные браузеры

  • Гугл Хром - WebGL 1.0 был включен на всех платформах, на которых есть соответствующая видеокарта с обновленными драйверами, начиная с версии 9, выпущенной в феврале 2011 года.[20][21] По умолчанию в Windows Chrome использует УГОЛ (Почти Native Graphics Layer Engine) средство визуализации для преобразования OpenGL ES в Direct X 9.0c или 11.0, которые имеют лучшую поддержку драйверов.[22] Однако в Linux и Mac OS X средством визуализации по умолчанию является OpenGL.[23] Также возможно принудительно использовать OpenGL в качестве средства визуализации в Windows.[22] С сентября 2013 года в Chrome также появилась более новая Direct3D 11, но для этого требуется более новая видеокарта.[24][25] Chrome 56+ поддерживает WebGL 2.0.
  • Mozilla Firefox - WebGL 1.0 был включен на всех платформах, которые имеют совместимую видеокарту с обновленными драйверами, начиная с версии 4.0.[26] С 2013 года Firefox также использует DirectX на платформе Windows через УГОЛ.[22] Firefox 51+ поддерживает WebGL 2.0.
  • Сафари - Safari 6.0 и более новые версии, установленные на OS X Mountain Lion, Mac OS X Lion и Safari 5.1 на Mac OS X Снежный барс реализована поддержка WebGL 1.0, которая была отключена по умолчанию до Safari 8.0.[27][28][29][30][31] В Safari версии 12 (доступной в MacOS Mojave) доступна поддержка WebGL 2.0, которая в настоящее время является «экспериментальной» функцией.
  • Опера - WebGL 1.0 был реализован в Opera 11 и 12, хотя был отключен по умолчанию в 2014 году.[32][33] Opera 43+ поддерживает WebGL 2.0.
  • Internet Explorer - WebGL 1.0 частично поддерживается в Internet Explorer 11.[34][35][36][37] Первоначально он не прошел большинство официальных тестов на соответствие WebGL, но позже Microsoft выпустила несколько обновлений. Последний движок 0.94 WebGL в настоящее время проходит ~ 97% тестов Khronos.[38] Поддержка WebGL также может быть добавлена ​​вручную в более ранние версии Internet Explorer с помощью сторонних плагинов, таких как IEWebGL.[39]
  • Microsoft Edge - Первоначальный стабильный выпуск поддерживает WebGL версии 0.95 (контекстное имя: «экспериментально-webgl») с GLSL с открытым исходным кодом для HLSL транспилятор.[40] Версия 10240+ поддерживает WebGL 1.0 с префиксом. WebGL 2.0 планируется со средним приоритетом в будущих выпусках.[41]

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

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

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

Утилиты

Низкоуровневый характер WebGL API, который сам по себе мало что предоставляет для быстрого создания желаемой трехмерной графики, способствовал созданию библиотек, которые обычно используются для построения вещей в трехмерной графике (например, просмотреть преобразования за шейдеры, вид усеченной вершины так далее.). Основные задачи, такие как загрузка графики сцены и 3D-объекты в популярных отраслевых форматах также абстрагированный библиотеками (некоторые из которых портирован в JavaScript с других языков) для обеспечения дополнительных функций. Неполный список библиотек, которые предоставляют множество высокоуровневых функций, включает А-образная рамка (VR), BabylonJS, PlayCanvas, three.js, OSG.JS и МедьLicht. X3D также сделал проект под названием X3DOM, чтобы сделать X3D и VRML контент, работающий на WebGL. 3D-модель будет в теге XML. <X3D> в HTML5 и интерактивном скрипте будут использоваться JavaScript и DOM. BS Content Studio и InstantReality X3D экспортер могут экспортировать X3D в HTML и запускать через WebGL.[нужна цитата ]

Игровые движки

Также было быстрое появление игровые движки для WebGL оба 2D и 3D,[54] включая Unreal Engine 4 и Единство.[55] В Stage3D / На основе Flash В гостях3D библиотека высокого уровня также имеет порт на WebGL через Машинопись.[24][56] Более легкая служебная библиотека, которая предоставляет только векторные и матричные математические утилиты для шейдеров, - sylvester.js.[57][58] Иногда он используется вместе со специальным расширением WebGL, называемым glUtils.js.[57][59]

Есть также некоторые 2D-библиотеки, построенные поверх WebGL, например Cocos2d -x или Pixi.js, которые были реализованы таким образом из соображений производительности, параллельно с тем, что произошло с Starling Framework над Stage3D в мире Flash. 2D-библиотеки на основе WebGL возвращаются к холсту HTML5, когда WebGL недоступен.[60]

Устранение узких мест при рендеринге путем предоставления почти прямого доступа к графическому процессору также выявило ограничения производительности в реализациях JavaScript. К некоторым обратился asm.js и WebAssembly (аналогично, введение Stage3D выявило проблемы с производительностью внутри ActionScript, над которыми работали такие проекты, как CrossBridge.)[60]

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

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

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

Кроме того, Mozilla Foundation в своем браузере Firefox реализовала встроенные инструменты WebGL, начиная с версии 27, которые позволяют редактировать вершинные и фрагментные шейдеры.[62] Ряд других отладочных и профилирование инструменты также появились.[63]

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

Рекомендации

  1. ^ а б «Khronos выпускает окончательную спецификацию WebGL 1.0». Получено 2015-05-18.
  2. ^ Таварес, Грегг (09.02.2012). "Основы WebGL". HTML5 Rocks.
  3. ^ Паризи, Тони (2012-08-15). "WebGL: готово". O'Reilly Media, Incorporated. Архивировано из оригинал на 2013-02-01. Получено 2012-07-13.
  4. ^ а б c «WebGL - OpenGL ES 2.0 для Интернета». Khronos.org. Получено 2011-05-14.
  5. ^ «Спецификация WebGL». Khronos.org. Получено 2011-05-14.
  6. ^ «Спецификация WebGL 2.0». Khronos.org. Получено 2017-02-27.
  7. ^ "Canvas 3D: сила GL, веб-стиль". Blog.vlad1.com. Архивировано из оригинал на 2011-07-17. Получено 2011-05-14.
  8. ^ «Перенести холст в другое измерение». My.opera.com. 2007-11-26. Архивировано из оригинал на 2007-11-17. Получено 2011-05-14.
  9. ^ «Инициатива Khronos Details WebGL по внедрению аппаратно-ускоренной 3D-графики в Интернет». Khronos.org. 2009-08-04. Архивировано из оригинал на 2012-04-12. Получено 2011-05-14.
  10. ^ "Google Body - Google Labs". Bodybrowser.googlelabs.com. Архивировано из оригинал на 2011-05-13. Получено 2011-05-14.
  11. ^ Бхану, Синдья Н. (23 декабря 2010 г.). "Новое от Google: основной браузер". Well.blogs.nytimes.com. Получено 2011-05-14.
  12. ^ "AUTODESK FUSION 360: БУДУЩЕЕ САПР, PT. 1". 3dcadworld.com. Получено 2013-08-21.
  13. ^ «Спецификация WebGL 2». khronos.org. 2013-09-26. Получено 2013-10-28.
  14. ^ «Спецификация WebGL 2.0».
  15. ^ «WebGL - веб-API». MDN.
  16. ^ а б «ANGLE - Почти нативный графический слой». 2019. Получено 21 июня, 2019.
  17. ^ «Тестовая страница WebGL». webgl.org.
  18. ^ "Отчет WebGL". webglreport.com.
  19. ^ "Отчет браузера WebGL - Обнаружение WebGL - Тестер WebGL - Утечки браузера". browserleaks.com.
  20. ^ Ма, Пол (8 февраля 2011 г.). "Google выпускает Chrome 9; поставляется с Google Instant, WebGL - FierceCIO: TechWatch". FierceCIO. Получено 2012-03-20.
  21. ^ «WebGL в стабильной версии Chrome! - Изучение WebGL». Learningwebgl.com. Архивировано из оригинал на 2015-05-28. Получено 2014-08-07.
  22. ^ а б c «(WebGL) Как включить собственный OpenGL в вашем браузере (Windows)». geeks3d.com.
  23. ^ «Блог Chromium: знакомство с проектом ANGLE». Блог Chromium.
  24. ^ а б «WebGL в сети, 17 октября 2013 г. - изучение WebGL». Learningwebgl.com. Архивировано из оригинал 8 августа 2014 г.. Получено 5 августа 2014.
  25. ^ «Наконец-то! Настал день Chrome D3D11!». tojicode.com.
  26. ^ «Примечания к выпуску Mozilla Firefox 4». Mozilla.com. 2011-03-22. Получено 2012-03-20.
  27. ^ «Новое в OS X Lion: Safari 5.1 включает WebGL, функцию« Не отслеживать »и многое другое». Fairerplatform.com. 2011-05-03. Архивировано из оригинал на 2012-03-19. Получено 2012-03-20.
  28. ^ «Включить WebGL в Safari». Ikriz.nl. 2011-08-23. Получено 2012-03-20.
  29. ^ «Получение реализации WebGL». Khronos.org. 2012-01-13. Получено 2012-03-20.
  30. ^ «Реализации / WebKit». Khronos.org. 2011-09-03. Получено 2012-03-20.
  31. ^ «WebGL теперь доступен в WebKit Nightlies». Webkit.org. Архивировано из оригинал на 2012-03-08. Получено 2012-03-20.
  32. ^ «WebGL и аппаратное ускорение». My.opera.com. 2011-02-28. Архивировано из оригинал на 2011-03-03. Получено 2012-03-20.
  33. ^ "Представляем Opera 12 alpha". My.opera.com. 2011-10-13. Архивировано из оригинал на 2011-10-15. Получено 2012-03-20.
  34. ^ «WebGL (Windows)». microsoft.com. Microsoft.
  35. ^ «Руководство по предварительной версии Internet Explorer 11 для разработчиков». Microsoft. 2013-07-17. Получено 2013-07-24.
  36. ^ "WebGL". Microsoft. 2013-07-17. Получено 2013-07-24.
  37. ^ «Internet Explorer 11 для поддержки WebGL и MPEG Dash». Engadget. 2013-06-26. Получено 2013-06-26.
  38. ^ «IE11 не прошел более половины тестов в официальном наборе тестов на соответствие WebGL». Microsoft Connect.
  39. ^ "IEWebGL". Iewebgl. Получено 2014-08-14.
  40. ^ «GitHub - реализация Microsoft Edge WebGL». Microsoft. 2016-06-04. Получено 2016-06-10.
  41. ^ «Статус WebGL 2.0 в Microsoft Edge находится на рассмотрении». Разработка Microsoft Edge.
  42. ^ Макдонаф, Ларри. "WebGL: 3D-игры в Интернете приходят". BerryReview. Получено 2013-04-09.
  43. ^ Халеви, Ронен. «Бета-версия разработчика PlayBook OS 2.0 включает WebGL, Flash 11 и AIR 3.0». BerryReview. Получено 2011-11-15.
  44. ^ «Телефоны Xperia ™ первыми поддерживают WebGL ™ - Developer World». blogs.sonyericsson.com. Программа для разработчиков Sony Ericsson. 2011-11-29. Архивировано из оригинал на 2011-12-03. Получено 2011-12-05.
  45. ^ «WebGL на мобильных устройствах». iChemLabs. 2011-11-12. Получено 2011-11-25.
  46. ^ а б c «Совместимость с мобильным HTML5 на iPhone, Android, Windows Phone, BlackBerry, Firefox OS и других мобильных устройствах». Получено 2015-09-16.
  47. ^ Керси, Джейсон. «Обновление Chrome Beta для Android». Блог о выпусках Chrome. Получено 2013-08-23.
  48. ^ Voipio, Рику (07.06.2010). "WebGL на N900". Suihkulokki.blogspot.com. Получено 2011-05-14.
  49. ^ «Руководство разработчика: WebGL - Microsoft Edge Development». Microsoft. Получено 2016-06-10.
  50. ^ «Opera Mobile 12». Программное обеспечение Opera. Архивировано из оригинал 1 марта 2012 г.. Получено 27 февраля 2012.
  51. ^ «HTML5test - Насколько хорошо ваш браузер поддерживает HTML5?». Получено 2015-09-16.
  52. ^ «HTML5test - Насколько хорошо ваш браузер поддерживает HTML5?». Получено 2015-09-16.
  53. ^ Каннингем, Эндрю (17 сентября 2014 г.). «iOS 8, тщательная проверка». Ars Technica. Получено 2014-09-19.
  54. ^ Паризи, Тони (13 февраля 2014 г.). Программирование 3D-приложений с помощью HTML5 и WebGL: 3D-анимация и визуализация для веб-страниц. "O'Reilly Media, Inc.". С. 364–366. ISBN  978-1-4493-6395-6.
  55. ^ Барретт, Стивен. «Tegra K1 появляется в новейшем Chromebook от Acer». anandtech.com.
  56. ^ «Блог> Away3D Typescript 4.1 Alpha> Away3D». away3d.com.
  57. ^ а б Боресков Алексей; Шикин, Евгений (2014). Компьютерная графика: от пикселей до оборудования с программируемой графикой. CRC Press. п. 370. ISBN  978-1-4398-6730-3.
  58. ^ Аньюру, Андреас (2012). Профессиональное программирование на WebGL: разработка трехмерной графики для Интернета. Джон Вили и сыновья. п. 140. ISBN  978-1-119-94058-6.
  59. ^ Фултон, Стив; Фултон, Джефф (2013). HTML5 Canvas (2-е изд.). "O'Reilly Media, Inc.". п. 624. ISBN  978-1-4493-3588-5.
  60. ^ а б «Потенциал WebGL - TypedArray.org». typedarray.org.
  61. ^ "Официальный сайт Blend4Web - О нас". Blend4Web.com. Получено 2015-06-22.
  62. ^ «Живое редактирование шейдеров WebGL с помощью инструментов разработчика Firefox». Mozilla Hacks - блог веб-разработчиков.
  63. ^ «Визуализация в реальном времени · Инструменты отладки и профилирования WebGL». realtimerendering.com.

дальнейшее чтение

внешняя ссылка