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