ВебГЛ
Оригинальный автор(ы) | Фонд Мозиллы |
---|---|
Разработчик(и) | Рабочая группа Khronos WebGL |
Первоначальный выпуск | 3 марта 2011 г [1] |
Стабильная версия | 2.0 / 17 января 2017 г |
Платформа | Кросс-платформенный |
Тип | API |
Веб-сайт | www |
HTML |
---|
Сравнения |
WebGL (сокращение от Web Graphics Library ) — это JavaScript API для рендеринга интерактивной 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] и Опера [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]
Реализации
[ редактировать ]Почти родной графический движок
[ редактировать ]Почти 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 в HLSL транспилятором с открытым исходным кодом . [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] Начиная с Android 5, Chrome используется для веб-просмотра системы Android. [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 — WebGL 1.0 поддерживается в браузере Sailfish по умолчанию. [54]
- Tizen — поддерживается WebGL 1.0. [55]
Инструменты и экосистема
[ редактировать ]Утилиты
[ редактировать ]Низкоуровневый характер API WebGL, который сам по себе мало что дает для быстрого создания желаемой трехмерной графики, побудил к созданию библиотек более высокого уровня, которые абстрагируют общие операции (например, загрузка графов сцен и трехмерных объектов в определенных форматах; применение линейных преобразований) . для шейдеров или просмотра усеченных пирамид ). Некоторые такие библиотеки были портированы на JavaScript с других языков. Примеры библиотек, предоставляющих функции высокого уровня, включают A-Frame (VR) , BabylonJS , PlayCanvas , Three.js , OSG.JS , Google средство просмотра моделей и CopperLicht . Web3D также создал проект под названием X3DOM, позволяющий запускать контент X3D и VRML на WebGL.
Игры
[ редактировать ]Появились 2D- и 3D- игровые движки для WebGL. [56] такие как Unreal Engine 4 и Unity . [57] Библиотека на основе Stage3D /Flash высокого уровня Away3D также имеет порт на 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]
См. также
[ редактировать ]- Список фреймворков WebGL
- Испытайте Curiosity – WebGL-симуляция марсохода Curiosity
- glTF - первоначально известный как формат передачи WebGL или WebGL TF.
- ВебXR
- Java OpenGL – библиотека OpenGL для языка программирования Java.
- Веб-графический процессор
Ссылки
[ редактировать ]- ^ Jump up to: а б «Хронос выпускает окончательную спецификацию WebGL 1.0» . 3 марта 2011 года . Проверено 18 мая 2015 г.
- ^ Jump up to: а б «Основы WebGL» . HTML5-рок.
- ^ Паризи, Тони (15 августа 2012 г.). «WebGL: все в порядке» . О'Рейли Медиа, Инкорпорейтед. Архивировано из оригинала 1 февраля 2013 г. Проверено 13 июля 2012 г.
- ^ Jump up to: а б с «WebGL – OpenGL ES 2.0 для Интернета» . Хронос.орг . Проверено 14 мая 2011 г.
- ^ «WebGL 2.0 обеспечивает повсеместную поддержку всех основных веб-браузеров» . Группа «Хронос» . 09.02.2022 . Проверено 13 февраля 2022 г.
- ^ «Спецификация WebGL» . Хронос.орг . Проверено 14 мая 2011 г.
- ^ «Спецификация WebGL 2.0» . Хронос.орг . Проверено 27 февраля 2017 г.
- ^ «Canvas 3D: мощь GL, веб-стиль» . Блог.vlad1.com. Архивировано из оригинала 17 июля 2011 г. Проверено 14 мая 2011 г.
- ^ «Перенос холста в другое измерение» . Мой.opera.com. 26 ноября 2007 г. Архивировано из оригинала 17 ноября 2007 г. Проверено 14 мая 2011 г.
- ^ «Хронос подробно описывает инициативу WebGL по внедрению в Интернет 3D-графики с аппаратным ускорением» . Хронос.орг. 04 августа 2009 г. Архивировано из оригинала 19 апреля 2012 г. Проверено 14 мая 2011 г.
- ^ «Тело Google – Лаборатории Google» . Bodybrowser.googlelabs.com. Архивировано из оригинала 13 мая 2011 г. Проверено 14 мая 2011 г.
- ^ Бхану, Синдия Н. (23 декабря 2010 г.). «Новинка от Google: Браузер тела» . Well.blogs.nytimes.com . Проверено 14 мая 2011 г.
- ^ «AUTODESK FUSION 360: БУДУЩЕЕ САПР, ЧАСТЬ 1» . 3dcadworld.com . Проверено 21 августа 2013 г.
- ^ «Спецификация WebGL 2» . khronos.org. 26 сентября 2013 г. Проверено 28 октября 2013 г.
- ^ «Спецификация WebGL 2.0» .
- ^ «WebGL — Веб-API» . МДН .
- ^ Jump up to: а б «ANGLE — почти собственный движок графического слоя» . 2019 . Проверено 21 июня 2019 г.
- ^ «Тестовая страница WebGL» . вебгл.орг .
- ^ «Отчет WebGL» . webglreport.com .
- ^ «Отчет о браузере WebGL — Обнаружение WebGL — Тестер WebGL — BrowserLeaks» . www.browserleaks.com .
- ^ Мах, Пол (8 февраля 2011 г.). «Google выпускает Chrome 9; поставляется с Google Instant, WebGL – FierceCIO:TechWatch» . Жестокий директор по информационным технологиям. Архивировано из оригинала 25 октября 2011 г. Проверено 20 марта 2012 г.
- ^ «WebGL в стабильной версии Chrome! — Изучение WebGL» . Learningwebgl.com . Архивировано из оригинала 28 мая 2015 г. Проверено 7 августа 2014 г.
- ^ Jump up to: а б с «(WebGL) Как включить встроенный OpenGL в вашем браузере (Windows)» . geeks3d.com .
- ^ «Блог Chromium: представляем проект ANGLE» . Блог Хрома .
- ^ Jump up to: а б «WebGL в сети, 17 октября 2013 г. — Изучение WebGL» . Learningwebgl.com . Архивировано из оригинала 8 августа 2014 года . Проверено 5 августа 2014 г.
- ^ «Наконец-то! Настал день Chrome D3D11!» . tojicode.com .
- ^ «Примечания к выпуску Mozilla Firefox 4» . Мозилла.com. 22 марта 2011 г. Проверено 20 марта 2012 г.
- ^ «Новое в OS X Lion: Safari 5.1 включает WebGL, Do Not Track и многое другое» . Fairerplatform.com. 03 мая 2011 г. Архивировано из оригинала 19 марта 2012 г. Проверено 20 марта 2012 г.
- ^ «Включить WebGL в Safari» . Икриз.нл. 2011-08-23. Архивировано из оригинала 4 марта 2012 г. Проверено 20 марта 2012 г.
- ^ «Получение реализации WebGL» . Хронос.орг. 13 января 2012 г. Проверено 20 марта 2012 г.
- ^ «Реализации/WebKit» . Хронос.орг. 3 сентября 2011 г. Проверено 20 марта 2012 г.
- ^ «WebGL теперь доступен в WebKit Nightlies» . Вебкит.орг. Архивировано из оригинала 8 марта 2012 г. Проверено 20 марта 2012 г.
- ^ немодальный (24 сентября 2021 г.). «Выпущен Safari 15. WebGL 2 теперь поддерживается всеми основными браузерами и платформами!» . г/вебгл . Проверено 18 октября 2023 г.
- ^ «WebGL и аппаратное ускорение» . Мой.opera.com. 28 февраля 2011 г. Архивировано из оригинала 3 марта 2011 г. Проверено 20 марта 2012 г.
- ^ «Представляем Opera 12 альфа» . Мой.opera.com. 13 октября 2011 г. Архивировано из оригинала 15 октября 2011 г. Проверено 20 марта 2012 г.
- ^ «WebGL (Windows)» . microsoft.com . Майкрософт.
- ^ «Руководство по предварительной версии Internet Explorer 11 для разработчиков» . Майкрософт. 17 июля 2013 г. Проверено 24 июля 2013 г.
- ^ «ВебГЛ» . Майкрософт. 17 июля 2013 г. Проверено 24 июля 2013 г.
- ^ «Internet Explorer 11 поддерживает WebGL и MPEG Dash» . Engadget. 26 июня 2013 г. Проверено 26 июня 2013 г.
- ^ «IE11 не проходит более половины тестов в официальном наборе тестов на соответствие WebGL» . Майкрософт Коннект.
- ^ «IEWebGL» . Иевебгл . Проверено 14 августа 2014 г.
- ^ «GitHub — реализация Microsoft Edge WebGL» . Майкрософт. 04.06.2016 . Проверено 10 июня 2016 г.
- ^ «WebGL: 2D и 3D-графика для Интернета — Веб-API — MDN» . Проверено 28 июня 2023 г.
- ^ Jump up to: а б с «WebGL 2.0 — Могу ли я использовать…» Проверено 28 июня 2023 г.
- ^ Макдонаф, Ларри. «WebGL: появление 3D-игр в сети» . Ягодный обзор . Архивировано из оригинала 13 апреля 2013 г. Проверено 9 апреля 2013 г.
- ^ Халеви, Ронен. «Бета-версия PlayBook OS 2.0 для разработчиков включает WebGL, Flash 11 и AIR 3.0» . Ягодный обзор . Проверено 15 ноября 2011 г.
- ^ «WebGL на мобильных устройствах» . iChemLabs. 2011-11-12. Архивировано из оригинала 27 января 2013 г. Проверено 25 ноября 2011 г.
- ^ Jump up to: а б с «Совместимость мобильного HTML5 на iPhone, Android, Windows Phone, BlackBerry, Firefox OS и других мобильных устройствах» . Проверено 16 сентября 2015 г.
- ^ Керси, Джейсон. «Бета-версия Chrome для обновления Android» . Блог о релизах Chrome . Проверено 23 августа 2013 г.
- ^ Войпио, Рику (07.06.2010). «WebGL на N900» . Suihkulokki.blogspot.com . Проверено 14 мая 2011 г.
- ^ «Руководство для разработчиков: WebGL – разработка Microsoft Edge» . Майкрософт . Проверено 10 июня 2016 г.
- ^ «Опера Мобайл 12» . Программное обеспечение Опера. Архивировано из оригинала 1 марта 2012 года . Проверено 27 февраля 2012 г.
- ^ Каннингем, Эндрю (17 сентября 2014 г.). «iOS 8, тщательный обзор» . Арс Техника . Проверено 19 сентября 2014 г.
- ^ «HTML5test – Насколько хорошо ваш браузер поддерживает HTML5?» . Проверено 16 сентября 2015 г.
- ^ «HTML5test – Насколько хорошо ваш браузер поддерживает HTML5?» . Проверено 16 сентября 2015 г.
- ^ Паризи, Тони (13 февраля 2014 г.). Программирование 3D-приложений с использованием HTML5 и WebGL: 3D-анимация и визуализация веб-страниц . «О'Рейли Медиа, Инк.». стр. 364–366. ISBN 978-1-4493-6395-6 .
- ^ Барретт, Стивен. «Tegra K1 появится в новейшем Chromebook от Acer» . anandtech.com .
- ^ «Блог > Away3D Typescript 4.1 Alpha > Away3D» . away3d.com . Архивировано из оригинала 8 августа 2014 г. Проверено 5 августа 2014 г.
- ^ Jump up to: а б Боресков, Алексей; Шикин, Евгений (2014). Компьютерная графика: от пикселей к программируемому графическому оборудованию . ЦРК Пресс. п. 370. ИСБН 978-1-4398-6730-3 .
- ^ Анюру, Андреас (2012). Профессиональное программирование WebGL: разработка 3D-графики для Интернета . Джон Уайли и сыновья. п. 140. ИСБН 978-1-119-94059-3 .
- ^ Фултон, Стив; Фултон, Джефф (2013). HTML5 Canvas (2-е изд.). «О'Рейли Медиа, Инк.». п. 624. ИСБН 978-1-4493-3588-5 .
- ^ Jump up to: а б «Потенциал WebGL — TypedArray.org» . typedarray.org .
- ^ «Официальный сайт Blend4Web — О программе» . Blend4Web.com . Проверено 22 июня 2015 г.
- ^ «Живое редактирование шейдеров WebGL с помощью инструментов разработчика Firefox» . Mozilla Hacks — блог веб-разработчиков .
- ^ «Рендеринг в реальном времени · Инструменты отладки и профилирования WebGL» . Realtimerendering.com .
Внешние ссылки
[ редактировать ]- Официальный сайт
- WebGL. Архивировано 26 июня 2010 г. на Wayback Machine в сети разработчиков Mozilla.