В отличие от других технологий для работы с трехмерной графикой (таких как OpenGL и Direct3D), WebGL предназначена для использования в веб-страницах и не требует установки специализированных расширений или библиотек. Одно из преимуществ WebGL — приложения конструируются как веб-страницы, то есть одна и та же программа будет успешно выполняться на самых разных устройствах (к примеру, на смартфонах, планшетных компьютерах и игровых консолях). Это означает, что WebGL будет оказывать все более усиливающееся влияние на сообщество разработчиков и станет одним из основных инструментов программирования графики.
Достоинства WebGL
С развитием HTML разработчики получили возможность создавать все более сложные веб-приложения. На заре своего развития язык HTML предлагал только возможность отображения статического контента, но с добавлением поддержки JavaScript стало возможным реализовывать более сложные взаимодействия элементов и отображения динамического контента. Внедрение стандарта HTML5 позволило использовать новые возможности, включая поддержку двухмерной графики в виде тега canvas. Создание технологии WebGL позволило отображать и манипулировать трехмерной графикой на веб-страницах с помощью JavaScript. При помощи WebGL разработчики могут создавать совершенно новые пользовательские интерфейсы, трехмерные игры и использовать трехмерную графику для визуализации различной информации. Несмотря на внушительные возможности, WebGL отличается от других технологий доступностью и простотой использования, что способствует ее быстрому распространению.
Поддержка браузерами
В настоящий момент WebGL поддерживается следующими браузерами:
Десктопные браузеры
- Mozilla Firefox (с 4-й версии)
- Google Chrome (с 9-й версии)
- Safari (с 6-й версии, по умолчанию поддержка WebGL отключена)
- Opera (с 12-й версии, по умолчанию поддержка WebGL отключена)
- IE (с 11-й версии, для других версий можно воспользоваться сторонними плагинами, например, IEWebGL)
Мобильные браузеры и платформы
- Android-браузер (поддерживает WebGL только на некоторых устройствах)
- Opera Mobile (начиная с 12-й версии и только для ОС Android)
- IOS (полная поддержка с версии 8.1)
- Firefox for mobile (с 4-й версии)
- Google Chrome для Android (с 25-й версии)
Преимущества использования WebGL:
- Кроссбраузерность и отсутствие привязки к определенной платформе. Windows, MacOS, Linux — все это неважно, главное, чтобы ваш браузер поддерживал WebGL.
- Использование языка JavaScript, который достаточно распространен.
- Автоматическое управление памятью. В отличие от OpenGL, в WebGL не надо выполнять специальные действия для выделения и очистки памяти.
- Поскольку WebGL для рендеринга графики использует графический процессор на видеокарте (GPU), для этой технологии характерна высокая производительность, которая сравнима с производительностью нативных приложений.
История создания
Наиболее распространенными технологиями отображения компьютерной графики на персональных компьютерах являются Direct3D и OpenGL.
Direct3D — составная часть пакета технологий Microsoft DirectX.
Альтернативная ей технология OpenGL, благодаря ее открытости, получила гораздо более широкое распространение. Реализации OpenGL доступны для различных операционных систем и аппаратных платформ. Спецификация OpenGL была разработана компанией Silicon Graphics Inc. и опубликована как открытый стандарт в 1992 году. Технология оказала огромное влияние на развитие трехмерной графики.
WebGL уходит корнями в OpenGL, однако назвать его прямым потомком нельзя. Непосредственным прототипом WebGL принято считать OpenGL ES (for Embedded Systems для встраиваемых систем), создана в 2003--2004 годах и обновлена в 2007-м (ES 2.0) и в 2012-м (ES 3.0) годах. Переход к версии OpenGL 2.0 обозначился появлением новой важной особенности — поддержкой программных шейдеров. Эта поддержка была перенесена в OpenGL ES 2.0 и стала одним из основных элементов спецификации WebGL 1.0.
В начале 2009 года консорциум Khronos Group (некоммерческий промышленный консорциум, образованный для разработки, публикации и продвижения различных открытых стандартов) учредил рабочую группу WebGL и запустил процесс стандартизации WebGL на основе OpenGL ES 2.0. В 2011-м под его эгидой была выпущена первая версия WebGL. Однако в июне того же года корпорация Microsoft выразила свою обеспокоенность безопасностью технологии WebGL, сославшись на чрезмерные права доступа к оборудованию и ненадежность механизмов защиты. Вице-президент Mozilla Марк Шавер отверг критику Microsoft, назвав опасения преувеличенными. В то время корпорация Microsoft обладала собственной 3D веб-технологией Silverlight 5, основанной на тех же принципах, что и WebGL, которую, тем не менее, корпорация считала достаточно надежной. Позднее Microsoft изменила своё отношение к технологии WebGL, реализовав её поддержку в своем браузере Internet Explorer 11. Корпорация Apple приняла решение о поддержке WebGL в браузере Safari на конференции WWDC в 2014 году.
Обзор фреймворков для разработки на WebGL
Технология WebGL использует низкоуровневое API, этот аспект облегчает внедрение технологии разработчиками браузеров в свои продукты, но создает достаточно большие трудности при создании интерфейсов. Большое количество времени и сил было вложено в разработку библиотек, фреймворков и сторонних программных средств, которые упростили работу разработчикам сайтов.
Библиотека WebGLU
Первой общедоступной библиотекой стала WebGLU — набор утилит низкого и высокого уровня для разработки приложений на WebGL. WebGLU сконструирован таким образом, что разработчик может сосредоточиться на конечном результате с минимумом суеты и кода, но библиотека не ограничивает разработчиков, которые хотят больше контроля. Это достигается за счет возможности использования низкоуровневых функций для работы с WebGL API.
Неполный список функций:
- Можно загрузить шейдеры непосредственно из .frag / .vert / .vp / .fp файлов
- Автоматическая загрузка и настройка шейдера
- Все компиляции и компоновки обрабатываются автоматически
- Автоматическая установка любой проекции и вида модели
- Обеспечивает проекции и матрицы-стеки вида модели, которые примерно соответствуют режимам матрицы в OpenGL
- Автоматически создает при необходимости массив / элемент буферов и связывает их по мере необходимости во время рендеринга
- Каждому объекту может быть назначена отдельная шейдерная программа
- Хранение данных атрибутов шейдера, простой вызов
- Частичный .obj анализатор реализован для загрузки объектов
- Поддерживает иерархии объектов
- Статические изображения и видео текстуры
- Поддержка процедурной анимации
- Поддержка покадровой анимации
- Возможность смешивать типы анимации и иерархию объектов
- GameGLU — библиотека компаньон обеспечивает легкое отслеживание событий клавиатуры
Библиотека GLGE
Достаточно именитая библиотека для разработки приложений с использованием WebGL. Библиотека ориентирована больше на динамическое изменение сцены. Однако последние изменения в репозитории датированы 2014 годом, поэтому есть причины усомниться в актуальности библиотеки на сегодняшний день.
Неполный список функций:
- Покадровая анимация
- Поддержка общего освещения, направленного освещения (spot) и точечных источников света
- Поддержка карты нормалей
- Анимирование материалов
- Скелетная анимация
- Поддержка формата Collada
- Поддержка карт смещения
- Рендеринг текста
- Туман
- Глубина теней
- Карты окружения
- Отражение / преломление
- Анимация Collada
- 2d фильтры
- Culling — удаления скрытых частей сцены из процесса обработки
- Поддержка LOD — уровни детализации объекта
- Физика
Библиотека Three JS
Наиболее популярная и активно развивающаяся библиотека на сегодняшний день. Подробная и доступная документация и огромное количество рабочих примеров делают эту библиотеку одним из лидеров среди аналогичных систем.
Неполный список функций:
- Рендереры — Canvas, SVG или WebGL
- Добавление и удаление объектов в режиме реального времени
- Туман
- Перспективная или ортографическая камеры
- Каркасная анимация, различные виды кинематики, покадровая анимация
- Несколько типов источников света — внешний, направленный, точечный
- Брошенные и полученные тени
- Шейдеры (GLSL)
- Объекты — сети, частицы, спрайты, линии, скелетная анимация и так далее
- Множество предустановленных типов геометрии — плоскость, куб, сфера, тор, 3D текст и так далее
- Активная поддержка модификаторов — ткань, выдавливание
- Возможность загрузки множества типов данных — двоичный, изображения, JSON и сцена
- Экспорт и импорт обьектов Blender, openCTM, FBX, 3D Studio Max и Wavefront .obj файл
Библиотека Babylon JS
Библиотека с открытым исходным кодом для создания полноценных 3D приложений и игр, работающих в веб-браузере без использования сторонних плагинов и расширений. Babylon JS по своим возможностям близок к ThreeJS, однако имеет в своем арсенале некоторые встроенные функции, недоступные в Three JS из коробки. К таким приятным особенностям относятся встроенный физический движок oimo.js — достаточно простой способ создать реалистичный ландшафт, используя карту высот. Разумеется, в three js также присутствуют такие возможности, но реализованы они при помощи различных дополнительных приложений. Однако за функциональность библиотеки приходиться платить нескромным весом в 800 кб.
Список функций:
- Сцена — использование готовых мешей, туман, скайбоксы
- Физический движок (модуль oimo.js)
- Сглаживание
- Анимационный движок
- Звуковой движок
- Система частиц (партиклов)
- Аппаратное масштабирование
- Поддержка LOD-ов
- Пошаговая загрузка сцены
- Автоматическая оптимизация сцены
- Панель отладки
- 4 источника освещения — точечный, излучаемый повсюду, прожектор и реалистичное
- Пользовательские материалы и шейдеры
- Широкие возможности текстурирования
- SSAO
- Блики
- 9 видов камеры, в том числе и для сенсорного управления
- Экспортеры для 3ds Max, Blender, Unity3D, Cheetah 3d
- Карта высот
Все более активное внедрение компьютерной графики в повседневную деятельность пользователей требует от разработчиков освоения новых горизонтов. Разумеется, различные задачи требуют индивидуального подхода к реализации приложений. Представленные в статье библиотеки — это всего лишь вершина айсберга.
Каждый разработчик может выбрать библиотеку под свои конкретные нужды — кому-то важна скелетная анимация, кому-то — реалистичный свет или физика, а кто-то является действительно ортодоксальным профессионалом, который не признает ничего кроме чистейшего WebGL API и пишет шейдеры в блокноте. Однако всех объединяет желание создать качественные, легкие и производительные веб-приложения, активно использующие возможности трехмерной графики.
Комментарии (24)
ssezya
04.04.2017 16:11+1У three.js на версиях r70 и ниже была не подробная документация, тогда это был минус этой библиотеки, сейчас к счастью очень хорошо ее подтянули, это радует.
xtala
04.04.2017 16:47+2Хабр предложил интересные публикации по похожим темам. Захожу в эту https://habrahabr.ru/post/247811/. Статья написана 2 года назад в 2015. В комментариях взрываются пуканы хомячья недовольных размером шапки в 400кб и общей тормознутостью сайта. Сейчас 2017 рок, захожу на сайт приведенный в примере https://www.phyramid.com/en/ из статьи. Есть ужасающий дизайн, кровоточиво-глазные сочетание цветов, но нет трехмерной шапки. Даже такие упоротые в плане дизайна, как создатели этого сайта (у них наверняка в каждом глазу по включенному миксеру), осознали за 2 года, как говорят на этих ваших оманьяченных лорах: "не нужно" и выпилили 3 мерную шапку к херам.
Веб игры? Ну если только всякие казино и прочие вулканы. Продвинутые геймеры ставят титаны и затариваются в стимах кризисами да батлами разными.maniacscientist
04.04.2017 22:05+1Почти невозможно сделать WebGL вставку, чтобы хипстерский какбы-ноутбук не шел на взлет, даже в 30 fps. Потому и убрали.
NeuroZ
05.04.2017 07:25+1Не всегда десктопные (монолитные) решения могут полностью заменить мобильные (браузерные). Если брать те же игрушки и «геймеров тарящихся титанами» — это далеко не показатель. Крутая игра может быть и в пиксельной графике (миллионы успешных инди игр заслужили признание мировой общественности).
Так вот, если игра не требовательна к большему числу полигонов модели — то ресурсов компьютера и технологий современных браузеров вполне хватит, чтобы рендерить вполне себе крутые игрушки. Так что 3D в бразуерах — это скорее светлое будущее, чем утопия. Просто такие технологии надо применять с умом. Да и сами проекты должны привлекать геймера в первую очередь не красотой картинки, а качеством геймплея. А тут уж и браузер и десктоп и мобильное приложение — все равны. Вопрос на что хватит фантазии.
MrGobus
04.04.2017 21:49+1Статья чистая, красивая, мне в целом понравилась, только вот 2017 на дворе, уже WebGL 2.0) Даже с браузерами шаманить вроде не надо (хром поддерживает сразу)
Мозила вот не отстает https://hacks.mozilla.org/2017/01/webgl-2-lands-in-firefox/
Ну и вот потрогать немного
https://playcanv.as/e/p/44MRmJRU/
http://toji.github.io/webgl2-particles-2/
http://toji.github.io/webgl2-crowd/
TutmeeAgency
05.04.2017 09:16Без сомнения WebGL 2.0 вкусная технология и со временем она возьмет свое, однако на данный момент суммарная поддержка по браузерам менее 30% и это печально. Я даже не беру в расчет «любимый» всеми фронтэндщиками IE, все печально и со стороны Apple, а это приличная доля пользователей.
DenimTornado
05.04.2017 11:10+1Эх, а я вот со своей HD3000 на Маке пролетаю с WebGL2.0.
http://take.ms/2z4rD вот такое на всех примерах, при этом всё, естественно включено!TutmeeAgency
05.04.2017 12:03Перейдите в chrome://settings
Нажмите кнопку + Показать дополнительные настройки
В разделе Система, найдите пункт Использование аппаратного ускорение включите кликнув на флажок ( и далее вам необходимо перезапустить Chrome для того чтобы изменения вступили в силу)
Затем включите WebGL:
Перейти в chrome://flags
Найдите пункт Включить прототип WebGL 2.0
Убедитесь в том, что WebGL активирован (вам необходимо перезапустить Chrome чтобы любые изменения вступили в силу)
Затем проверьте состояние WebGL:
Перейти в chrome://gpu
Найдите элемент WebGL: Hardware accelerated в списке Graphics Feature Status. Надпись Hardware accelerated должна гореть зеленым
Вот такой есть мануал
Ну судя по тому что сафари не поддерживает WebGl 2.0 Apple не сильно торопиться с внедрением стандарта, так что могут быть проблемы на аппаратном уровне. Хром на эпловских осях иногда выдает такие финты что волосы дыбом становятся.
bukt
06.04.2017 15:59+1Было бы интересно почитать сравнение с существующими и давно работающими решениями в области браузерной трёхмерки.
gshep
06.04.2017 22:59+1не требует установки специализированных расширений или библиотек
без драйверов видеокарты, а в случае Линукса ещё и правильно настроенных тех самых библиотек, ничего не взлетит.
втоматическое управление памятью. В отличие от OpenGL, в WebGL не надо выполнять специальные действия для выделения и очистки памяти.
если прошлое замечание больше похоже на придирку, то в этом случае всё серьёзно — это уже откровенная ложь. Лучше уберите этот пункт. Все данные, которые будут отображаться с помощью WebGL выделяются в памяти видеокарты. Соответственно, их также надо вручную освобождать, никакой сборщик мусора не поможет.TutmeeAgency
07.04.2017 11:33Касательно замечания по управлению памятью, для WebGL родным языком является JavaScript.
В данном языке конкретных функций ручного управления памятью не предусмотрено, значение переменной в памяти остается до тех пор пока есть хотя бы одна ссылка на переменную далее вступает в действие сборщик мусора.
Понятно, что если бездумно плодить переменные и оставлять их висеть в памяти ничего хорошего не будет, но это уже вопрос оптимизации программы.Так как WebGL программируется в JavaScript эти принципы так же применимы.
Тезис об автоматическом управлении памятью подтверждается и печатными источниками. Однако я не буду утверждать, что вы не правы в своем высказывании, если у вас есть информация или конкретное руководство по ручному управлению памятью при разработке WebGL приложений прошу поделиться. Очень интересно будет почитать и применить на практике для создания качественных, оптимизированных приложений.gshep
07.04.2017 12:57+1вот на примере буфера: https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/deleteBuffer
Да, когда переменная buffer выйдет из блока (т.е. попадёт к сборщику в руки), он что-то связанное с ней подчистит, однако deleteBuffer вызывать не будет (Конечно, может в обозревателях и реализовали такую возможность, но я сильно сомневаюсь), произойдёт потеря идентификатора, с помощью которого адресуются данные и освободить их в данном процессе уже никак не получится. Происходит это из-за того, что buffer "держит" данные непосредственно в памяти видеоускорителя.
Конечно, если речь идёт о какой-нибудь демке, то там всё равно, вызывать дилит объектам или нет — при закрытии вкладки/обозревателя ОС всё подчистит — кстати также, как и при закрытии родного приложения.
Однако для долгоиграющих приложений (игры, 2Д/3Д-редакторы графики, редакторы видео, ПО для моделирования) это должно учитываться. И выглядеть этот код будет один-в-один, как на C++. =)
И для каждого GL-ного объекта такая пара методов есть:
- текстуры — https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/deleteTexture
- шейдеры — https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/deleteShader, https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/deleteProgram
- буфер отображения — https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/deleteRenderbuffer
- буфер кадра — https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/deleteFramebuffer
Развивая тему, хотелось бы отметить, что это не проблема JavaScript/WebGL в частности. Это вообще проблема сборщиков мусора — все думают, что они могут всё и ни за чем следить не нужно. Самое большое заблуждение! В общем случае приходится управлять ресурсами (память же — лишь частный её случай) и тут сборщики мусора никак не облегчают задачу, но даже мешают.
TutmeeAgency
07.04.2017 17:22Очень интересные примеры, получается, что присутствует только частичная автоматизация управления ресурсами на уровне JavaScript, однако чтобы освободить ресурсы железа, придется чистить руками. Большое спасибо за разъяснение, учтем этот аспект в будущем.
dmitry_ch
А зачем? VRML (а это стандарт аж с 1997 года!) за столько лет так и не прижился, что означается лишь одно — неудобно с компьютера с 2D управлением пользоваться 3D интерфейсами. Кроме того, нет прямой нужны сделать 3D, кроме как для очень специальных задач. Тянуть поддержку 3D в браузеры… Зачем?
degorov
Не поддержку 3D, а поддержку использования ресурсов GPU.
Sundagy
WebGL уже прижился, в картах Google его уже давно используют.
elmon
DOM, между прочим, вполне себе является проекцией из 3D в 2D. Как следствие, никто не запрещает использовать аппаратное ускорение для расчета тяжелых анимаций. Google Maps, между прочим, уже года два этим пользуется, и текущие десктопные карты перенесены на WebGL.
dmitry_ch
Ну речь-то в статье идет про поддержку разработки полноценных 3D приложений и игр, а не просто про аппаратную поддержку вывода графики с трансформациями и прочими полезностями).
maria-tyan
Да и в тысячах веб-игрушек вполне себе он прижился.
TutmeeAgency
«А зачем ?» — что вы имели ввиду? Если речь идет об использовании трехмерной графики, то тут я с вами не соглашусь. Презентации, карты, виртуальные гиды высокой детализации, дополненная реальность в конце концов, браузерные игры. Примеров множество, вычислительные мощности растут, пользователь требует все более и более продвинутых интерфейсов.
egoroof
2gis этажи сделали на webgl https://habrahabr.ru/company/2gis/blog/282207/
helg1978
Для игр конечно.
Например мы разрабатываем видеослоты, и смотрим в сторону WEB — не на флеше же писать