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

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

Программы WebGL состоят из управляющего кода, написанного на JavaScript, и кода шейдера , написанного на OpenGL ES Shading Language (GLSL ES), языке, похожем на C или C ++ , и выполняются на графическом процессоре компьютера (GPU). WebGL разработан и поддерживается некоммерческой организацией Khronos Group . [4]

Дизайн [ править ]

WebGL 1.0 основан на OpenGL ES 2.0 и предоставляет API для трехмерной графики. [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], и Opera [8] сделали свои собственные отдельные реализации.

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

Ранние приложения WebGL включают Zygote Body . [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 и среду песочницы Native Client. ″ [16]

Программное обеспечение [ править ]

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

Настольные браузеры [ править ]

  • Google Chrome - WebGL 1.0 был включен на всех платформах, которые имеют совместимую видеокарту с обновленными драйверами, начиная с версии 9, выпущенной в феврале 2011 года. [20] [21] По умолчанию в Windows Chrome использует ANGLE (почти нативный графический движок) ) renderer для перевода 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 через ANGLE . [22] 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. [27] [28] [29] [30] [31] Safari версии 12 (доступной в MacOS Mojave) имеет доступную поддержку WebGL 2.0, которая в настоящее время является «экспериментальной» функцией.
  • Opera - 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 OS [46]
  • Google Chrome - 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 OS - WebGL 1.0 поддерживается в браузере Sailfish по умолчанию. [51]
  • Tizen - поддерживается WebGL 1.0 [52]
  • iOS - WebGL 1.0 доступен для мобильного Safari в iOS 8 . [53]

Инструменты и экосистема [ править ]

Утилиты [ править ]

Низкоуровневый характер WebGL API, который сам по себе мало что дает для быстрого создания желаемой трехмерной графики, способствовал созданию библиотек, которые обычно используются для создания вещей в трехмерной графике (например, преобразования представления для шейдеров , пирамиды представления и т. Д. ). Базовые задачи, такие как загрузка графов сцены и 3D-объектов в популярных отраслевых форматах, также абстрагируются библиотеками (некоторые из которых были перенесены на JavaScript с других языков) для обеспечения дополнительных функций. Неполный список библиотек, которые предоставляют множество высокоуровневых функций, включает A-Frame (VR) , BabylonJS , PlayCanvas ,three.js , OSG.JS и CopperLicht . 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 и Unity . [55] Stage3D / основе флэш- Away3D библиотека высокого уровня также имеет порт для 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-контента и экспорта сцены в формат, читаемый программой просмотра или вспомогательной библиотекой. Для этой цели можно использовать программное обеспечение для создания трехмерных настольных компьютеров, такое как Blender , Autodesk Maya или SimLab Composer . В частности, Blend4Web позволяет полностью создавать WebGL-сцену в Blender и экспортировать в браузер одним щелчком мыши, даже как отдельную веб-страницу. [61] Существует также некоторое программное обеспечение для WebGL, такое как CopperCube и онлайн-редактор Clara.io на основе WebGL . Интернет-платформы, такие как Sketchfab и Clara.io позволяют пользователям напрямую загружать свои 3D-модели и отображать их с помощью размещенной программы просмотра WebGL.

Инструменты на основе окружающей среды [ править ]

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

См. Также [ править ]

  • Список фреймворков WebGL
  • Испытайте любопытство - WebGL-симуляцию марсохода Curiosity
  • WebVR
  • Java OpenGL - библиотека OpenGL для языка программирования Java
  • WebGPU

Ссылки [ править ]

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

Дальнейшее чтение [ править ]

Внешние ссылки [ править ]

  • Официальный веб-сайт
  • WebGL, заархивировано 26 июня 2010 г. на Wayback Machine в сети разработчиков Mozilla.