stringtranslate.com

ВебГЛ

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

Программы WebGL состоят из управляющего кода, написанного на JavaScript, и кода шейдера , написанного на языке шейдинга OpenGL ES (GLSL ES), языке, похожем на 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 и доступен через интерфейсы объектной модели документа (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 компилирует эти строки в код графического процессора. Этот код выполняется для каждой вершины, отправленной через 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] По состоянию на март 2012 года председателем рабочей группы является Кен Рассел.

Ранним применением 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]

Реализации

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

Почти 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]

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

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

Утилиты

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

Игры

Для WebGL появились 2D- и 3D- игровые движки , [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, когда WebGL недоступен. [62] Устранение узкого места рендеринга путем предоставления почти прямого доступа к графическому процессору выявило ограничения производительности в реализациях JavaScript. Некоторые из них были решены с помощью asm.js и WebAssembly (аналогично появление Stage3D выявило проблемы с производительностью в ActionScript , которые решались такими проектами, как CrossBridge ). [62]

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

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

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

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

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

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

  1. ^ ab «Хронос выпускает окончательную спецификацию WebGL 1.0» . 3 марта 2011 года . Проверено 18 мая 2015 г.
  2. ^ ab «Основы WebGL». HTML5-рок.
  3. ^ Паризи, Тони (15 августа 2012 г.). «WebGL: все в порядке». О'Рейли Медиа, Инкорпорейтед. Архивировано из оригинала 1 февраля 2013 г. Проверено 13 июля 2012 г.
  4. ^ abc «WebGL – OpenGL ES 2.0 для Интернета». Хронос.орг . Проверено 14 мая 2011 г.
  5. ^ «WebGL 2.0 обеспечивает повсеместную поддержку всех основных веб-браузеров» . Группа «Хронос» . 09.02.2022 . Проверено 13 февраля 2022 г.
  6. ^ «Спецификация WebGL». Хронос.орг . Проверено 14 мая 2011 г.
  7. ^ «Спецификация WebGL 2.0» . Хронос.орг . Проверено 27 февраля 2017 г.
  8. ^ «Canvas 3D: мощность GL, веб-стиль» . Блог.vlad1.com. Архивировано из оригинала 17 июля 2011 г. Проверено 14 мая 2011 г.
  9. ^ «Перенос холста в другое измерение» . Мой.opera.com. 26 ноября 2007 г. Архивировано из оригинала 17 ноября 2007 г. Проверено 14 мая 2011 г.
  10. ^ «Хронос подробно описывает инициативу WebGL по внедрению в Интернет 3D-графики с аппаратным ускорением» . Хронос.орг. 04 августа 2009 г. Архивировано из оригинала 19 апреля 2012 г. Проверено 14 мая 2011 г.
  11. ^ "Тело Google - Лаборатории Google" . Bodybrowser.googlelabs.com. Архивировано из оригинала 13 мая 2011 г. Проверено 14 мая 2011 г.
  12. ^ Бхану, Синдия Н. (23 декабря 2010 г.). «Новинка от Google: Браузер тела». Well.blogs.nytimes.com . Проверено 14 мая 2011 г.
  13. ^ «AUTODESK FUSION 360: БУДУЩЕЕ САПР, ЧАСТЬ 1» . 3dcadworld.com . Проверено 21 августа 2013 г.
  14. ^ «Спецификация WebGL 2» . khronos.org. 26 сентября 2013 г. Проверено 28 октября 2013 г.
  15. ^ «Спецификация WebGL 2.0» .
  16. ^ «WebGL — Веб-API» . МДН .
  17. ^ ab «ANGLE — почти собственный механизм графического слоя». 2019 . Проверено 21 июня 2019 г.
  18. ^ «Тестовая страница WebGL» . вебгл.орг .
  19. ^ «Отчет WebGL». webglreport.com .
  20. ^ «Отчет браузера WebGL — Обнаружение WebGL — Тестер WebGL — BrowserLeaks» . www.browserleaks.com .
  21. ↑ Ма, Пол (8 февраля 2011 г.). «Google выпускает Chrome 9; поставляется с Google Instant, WebGL – FierceCIO:TechWatch». Жестокий директор по информационным технологиям. Архивировано из оригинала 25 октября 2011 г. Проверено 20 марта 2012 г.
  22. ^ «WebGL в стабильной версии Chrome! - Изучение WebGL» . Learningwebgl.com . Архивировано из оригинала 28 мая 2015 г. Проверено 7 августа 2014 г.
  23. ^ abc «(WebGL) Как включить встроенный OpenGL в вашем браузере (Windows)» . geeks3d.com .
  24. ^ «Блог Chromium: Представляем проект ANGLE» . Блог Хрома .
  25. ^ ab «WebGL в сети, 17 октября 2013 г. — Изучение WebGL» . Learningwebgl.com . Архивировано из оригинала 8 августа 2014 года . Проверено 5 августа 2014 г.
  26. ^ «Наконец-то! Настал день Chrome D3D11!». tojicode.com .
  27. ^ «Примечания к выпуску Mozilla Firefox 4» . Мозилла.com. 22 марта 2011 г. Проверено 20 марта 2012 г.
  28. ^ «Новое в OS X Lion: Safari 5.1 включает WebGL, Do Not Track и многое другое» . Fairerplatform.com. 03.05.2011. Архивировано из оригинала 19 марта 2012 г. Проверено 20 марта 2012 г.
  29. ^ «Включить WebGL в Safari». Икриз.нл. 2011-08-23. Архивировано из оригинала 4 марта 2012 г. Проверено 20 марта 2012 г.
  30. ^ «Получение реализации WebGL» . Хронос.орг. 13 января 2012 г. Проверено 20 марта 2012 г.
  31. ^ «Реализации/WebKit». Хронос.орг. 3 сентября 2011 г. Проверено 20 марта 2012 г.
  32. ^ «WebGL теперь доступен в WebKit Nightlies» . Вебкит.орг. Архивировано из оригинала 8 марта 2012 г. Проверено 20 марта 2012 г.
  33. ^ немодальный (24 сентября 2021 г.). «Выпущен Safari 15. WebGL 2 теперь поддерживается всеми основными браузерами и платформами!». г/вебгл . Проверено 18 октября 2023 г.
  34. ^ «WebGL и аппаратное ускорение». Мой.opera.com. 28 февраля 2011 г. Архивировано из оригинала 3 марта 2011 г. Проверено 20 марта 2012 г.
  35. ^ «Представляем Opera 12 альфа» . Мой.opera.com. 13 октября 2011 г. Архивировано из оригинала 15 октября 2011 г. Проверено 20 марта 2012 г.
  36. ^ «WebGL (Windows)» . microsoft.com . Майкрософт.
  37. ^ «Руководство по предварительной версии Internet Explorer 11 для разработчиков» . Майкрософт. 17 июля 2013 г. Проверено 24 июля 2013 г.
  38. ^ "ВебГЛ". Майкрософт. 17 июля 2013 г. Проверено 24 июля 2013 г.
  39. ^ «Internet Explorer 11 для поддержки WebGL и MPEG Dash» . Engadget. 26 июня 2013 г. Проверено 26 июня 2013 г.
  40. ^ «IE11 не проходит более половины тестов в официальном наборе тестов на соответствие WebGL» . Майкрософт Коннект.
  41. ^ "IEWebGL". Иевебгл . Проверено 14 августа 2014 г.
  42. ^ «GitHub — реализация Microsoft Edge WebGL» . Майкрософт. 04.06.2016 . Проверено 10 июня 2016 г.
  43. ^ «WebGL: 2D- и 3D-графика для Интернета — Веб-API — MDN» . Проверено 28 июня 2023 г.
  44. ^ abc «WebGL 2.0 — Могу ли я использовать…» Проверено 28 июня 2023 г.
  45. ^ Макдонаф, Ларри. «WebGL: появление 3D-игр в Интернете». Ягодный обзор . Архивировано из оригинала 13 апреля 2013 г. Проверено 9 апреля 2013 г.
  46. ^ Халеви, Ронен. «Бета-версия PlayBook OS 2.0 для разработчиков включает WebGL, Flash 11 и AIR 3.0» . Ягодный обзор . Проверено 15 ноября 2011 г.
  47. ^ «WebGL на мобильных устройствах». iChemLabs. 2011-11-12. Архивировано из оригинала 27 января 2013 г. Проверено 25 ноября 2011 г.
  48. ^ abc «Совместимость мобильного HTML5 на iPhone, Android, Windows Phone, BlackBerry, Firefox OS и других мобильных устройствах» . Проверено 16 сентября 2015 г.
  49. ^ Керси, Джейсон. «Бета-версия Chrome для обновления Android». Блог о релизах Chrome . Проверено 23 августа 2013 г.
  50. ^ Voipio, Рику (07.06.2010). «WebGL на N900». Suihkulokki.blogspot.com . Проверено 14 мая 2011 г.
  51. ^ «Руководство для разработчиков: WebGL – Разработка Microsoft Edge» . Майкрософт . Проверено 10 июня 2016 г.
  52. ^ "Опера Мобайл 12" . Программное обеспечение Опера. Архивировано из оригинала 1 марта 2012 года . Проверено 27 февраля 2012 г.
  53. ^ Каннингем, Эндрю (17 сентября 2014 г.). «iOS 8, тщательно рассмотренный». Арс Техника . Проверено 19 сентября 2014 г.
  54. ^ «HTML5test – Насколько хорошо ваш браузер поддерживает HTML5?» . Проверено 16 сентября 2015 г.
  55. ^ «HTML5test – Насколько хорошо ваш браузер поддерживает HTML5?» . Проверено 16 сентября 2015 г.
  56. ↑ Паризи, Тони (13 февраля 2014 г.). Программирование 3D-приложений с использованием HTML5 и WebGL: 3D-анимация и визуализация веб-страниц. «О'Рейли Медиа, Инк.». стр. 364–366. ISBN 978-1-4493-6395-6.
  57. ^ Барретт, Стивен. «Tegra K1 появится в новейшем Chromebook от Acer». anandtech.com .
  58. ^ «Блог> Away3D Typescript 4.1 Alpha> Away3D» . away3d.com . Архивировано из оригинала 8 августа 2014 г. Проверено 5 августа 2014 г.
  59. ^ аб Боресков, Алексей; Шикин, Евгений (2014). Компьютерная графика: от пикселей к программируемому графическому оборудованию. ЦРК Пресс. п. 370. ИСБН 978-1-4398-6730-3.
  60. ^ Анюру, Андреас (2012). Профессиональное программирование WebGL: разработка 3D-графики для Интернета. Джон Уайли и сыновья. п. 140. ИСБН 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 июня 2015 г.
  64. ^ «Живое редактирование шейдеров WebGL с помощью инструментов разработчика Firefox». Mozilla Hacks — блог веб-разработчиков .
  65. ^ «Рендеринг в реальном времени · Инструменты отладки и профилирования WebGL» . Realtimerendering.com .

Внешние ссылки