Tutmee

Блог

Блог

Трехмерная графика в вебе

Разработка
Аватар
dmitrij
Баннер поста

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

В отличие от других технологий для работы с трехмерной графикой (таких как 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 и пишет шейдеры в блокноте. Однако всех объединяет желание создать качественные, легкие и производительные веб-приложения, активно использующие возможности трехмерной графики.