Веб-технологии прочно вошли в нашу повседневную жизнь. Мы проводим во всемирной паутине достаточно большое количество времени — смотрим новости, совершаем покупки, общаемся и работаем. Индустрия услуг и развлечений в сети Интернет стремительно развивается, ведущие разработчики программного обеспечения улучшают поддержку трехмерной графики в своих продуктах. Традиционно ее поддержка ограничивалась высокопроизводительными компьютерами или специализированными игровыми консолями, а программирование требовало применения сложных алгоритмов. Однако благодаря росту производительности персональных компьютеров и расширению возможностей браузеров стало возможным создание и отображение трехмерной графики с применением веб-технологий.

В отличие от других технологий для работы с трехмерной графикой (таких как OpenGL и Direct3D), WebGL предназначена для использования в веб-страницах и не требует установки специализированных расширений или библиотек. Одно из преимуществ WebGL — приложения конструируются как веб-страницы, то есть одна и та же программа будет успешно выполняться на самых разных устройствах (к примеру, на смартфонах, планшетных компьютерах и игровых консолях). Это означает, что WebGL будет оказывать все более усиливающееся влияние на сообщество разработчиков и станет одним из основных инструментов программирования графики.

image

Достоинства 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)


  1. dmitry_ch
    04.04.2017 15:43

    А зачем? VRML (а это стандарт аж с 1997 года!) за столько лет так и не прижился, что означается лишь одно — неудобно с компьютера с 2D управлением пользоваться 3D интерфейсами. Кроме того, нет прямой нужны сделать 3D, кроме как для очень специальных задач. Тянуть поддержку 3D в браузеры… Зачем?


    1. degorov
      04.04.2017 16:00
      +4

      Не поддержку 3D, а поддержку использования ресурсов GPU.


    1. Sundagy
      04.04.2017 16:03
      +4

      WebGL уже прижился, в картах Google его уже давно используют.


    1. elmon
      04.04.2017 16:03
      +2

      DOM, между прочим, вполне себе является проекцией из 3D в 2D. Как следствие, никто не запрещает использовать аппаратное ускорение для расчета тяжелых анимаций. Google Maps, между прочим, уже года два этим пользуется, и текущие десктопные карты перенесены на WebGL.


      1. dmitry_ch
        04.04.2017 16:07
        +2

        Ну речь-то в статье идет про поддержку разработки полноценных 3D приложений и игр, а не просто про аппаратную поддержку вывода графики с трансформациями и прочими полезностями).


    1. maria-tyan
      04.04.2017 16:11
      +1

      Да и в тысячах веб-игрушек вполне себе он прижился.


    1. TutmeeAgency
      04.04.2017 16:13

      «А зачем ?» — что вы имели ввиду? Если речь идет об использовании трехмерной графики, то тут я с вами не соглашусь. Презентации, карты, виртуальные гиды высокой детализации, дополненная реальность в конце концов, браузерные игры. Примеров множество, вычислительные мощности растут, пользователь требует все более и более продвинутых интерфейсов.


    1. egoroof
      04.04.2017 17:52
      +1

      2gis этажи сделали на webgl https://habrahabr.ru/company/2gis/blog/282207/


    1. helg1978
      04.04.2017 21:01

      Для игр конечно.
      Например мы разрабатываем видеослоты, и смотрим в сторону WEB — не на флеше же писать


  1. ssezya
    04.04.2017 16:11
    +1

    У three.js на версиях r70 и ниже была не подробная документация, тогда это был минус этой библиотеки, сейчас к счастью очень хорошо ее подтянули, это радует.


  1. xtala
    04.04.2017 16:47
    +2

    Хабр предложил интересные публикации по похожим темам. Захожу в эту https://habrahabr.ru/post/247811/. Статья написана 2 года назад в 2015. В комментариях взрываются пуканы хомячья недовольных размером шапки в 400кб и общей тормознутостью сайта. Сейчас 2017 рок, захожу на сайт приведенный в примере https://www.phyramid.com/en/ из статьи. Есть ужасающий дизайн, кровоточиво-глазные сочетание цветов, но нет трехмерной шапки. Даже такие упоротые в плане дизайна, как создатели этого сайта (у них наверняка в каждом глазу по включенному миксеру), осознали за 2 года, как говорят на этих ваших оманьяченных лорах: "не нужно" и выпилили 3 мерную шапку к херам.
    Веб игры? Ну если только всякие казино и прочие вулканы. Продвинутые геймеры ставят титаны и затариваются в стимах кризисами да батлами разными.


    1. maniacscientist
      04.04.2017 22:05
      +1

      Почти невозможно сделать WebGL вставку, чтобы хипстерский какбы-ноутбук не шел на взлет, даже в 30 fps. Потому и убрали.


    1. NeuroZ
      05.04.2017 07:25
      +1

      Не всегда десктопные (монолитные) решения могут полностью заменить мобильные (браузерные). Если брать те же игрушки и «геймеров тарящихся титанами» — это далеко не показатель. Крутая игра может быть и в пиксельной графике (миллионы успешных инди игр заслужили признание мировой общественности).
      Так вот, если игра не требовательна к большему числу полигонов модели — то ресурсов компьютера и технологий современных браузеров вполне хватит, чтобы рендерить вполне себе крутые игрушки. Так что 3D в бразуерах — это скорее светлое будущее, чем утопия. Просто такие технологии надо применять с умом. Да и сами проекты должны привлекать геймера в первую очередь не красотой картинки, а качеством геймплея. А тут уж и браузер и десктоп и мобильное приложение — все равны. Вопрос на что хватит фантазии.


  1. 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/


    1. TutmeeAgency
      05.04.2017 09:16

      Без сомнения WebGL 2.0 вкусная технология и со временем она возьмет свое, однако на данный момент суммарная поддержка по браузерам менее 30% и это печально. Я даже не беру в расчет «любимый» всеми фронтэндщиками IE, все печально и со стороны Apple, а это приличная доля пользователей.


    1. DenimTornado
      05.04.2017 11:10
      +1

      Эх, а я вот со своей HD3000 на Маке пролетаю с WebGL2.0.

      http://take.ms/2z4rD вот такое на всех примерах, при этом всё, естественно включено!


      1. 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 не сильно торопиться с внедрением стандарта, так что могут быть проблемы на аппаратном уровне. Хром на эпловских осях иногда выдает такие финты что волосы дыбом становятся.


        1. DenimTornado
          05.04.2017 12:13
          +1

          вот такая вот балалайка

          http://take.ms/n9mjm


  1. bukt
    06.04.2017 15:59
    +1

    Было бы интересно почитать сравнение с существующими и давно работающими решениями в области браузерной трёхмерки.


    1. TutmeeAgency
      06.04.2017 21:25

      Расскажу об этом в следующих статьях ;)


  1. gshep
    06.04.2017 22:59
    +1

    не требует установки специализированных расширений или библиотек


    без драйверов видеокарты, а в случае Линукса ещё и правильно настроенных тех самых библиотек, ничего не взлетит.

    втоматическое управление памятью. В отличие от OpenGL, в WebGL не надо выполнять специальные действия для выделения и очистки памяти.


    если прошлое замечание больше похоже на придирку, то в этом случае всё серьёзно — это уже откровенная ложь. Лучше уберите этот пункт. Все данные, которые будут отображаться с помощью WebGL выделяются в памяти видеокарты. Соответственно, их также надо вручную освобождать, никакой сборщик мусора не поможет.


    1. TutmeeAgency
      07.04.2017 11:33

      Касательно замечания по управлению памятью, для WebGL родным языком является JavaScript.
      В данном языке конкретных функций ручного управления памятью не предусмотрено, значение переменной в памяти остается до тех пор пока есть хотя бы одна ссылка на переменную далее вступает в действие сборщик мусора.
      Понятно, что если бездумно плодить переменные и оставлять их висеть в памяти ничего хорошего не будет, но это уже вопрос оптимизации программы.Так как WebGL программируется в JavaScript эти принципы так же применимы.
      Тезис об автоматическом управлении памятью подтверждается и печатными источниками. Однако я не буду утверждать, что вы не правы в своем высказывании, если у вас есть информация или конкретное руководство по ручному управлению памятью при разработке WebGL приложений прошу поделиться. Очень интересно будет почитать и применить на практике для создания качественных, оптимизированных приложений.


      1. 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-ного объекта такая пара методов есть:


        1. текстуры — https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/deleteTexture
        2. шейдеры — https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/deleteShader, https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/deleteProgram
        3. буфер отображения — https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/deleteRenderbuffer
        4. буфер кадра — https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/deleteFramebuffer

        Развивая тему, хотелось бы отметить, что это не проблема JavaScript/WebGL в частности. Это вообще проблема сборщиков мусора — все думают, что они могут всё и ни за чем следить не нужно. Самое большое заблуждение! В общем случае приходится управлять ресурсами (память же — лишь частный её случай) и тут сборщики мусора никак не облегчают задачу, но даже мешают.


        1. TutmeeAgency
          07.04.2017 17:22

          Очень интересные примеры, получается, что присутствует только частичная автоматизация управления ресурсами на уровне JavaScript, однако чтобы освободить ресурсы железа, придется чистить руками. Большое спасибо за разъяснение, учтем этот аспект в будущем.