Среда, 05 апреля 2017 03:13

Обзор фреймворков для разработки на WebGL

Автор 

Технология WebGL использует низкоуровневое API, этот аспект облегчает внедрение технологии разработчиками браузеров в свои продукты, но создает достаточно большие трудности при создании интерфейсов. Большое количество времени и сил было вложено в разработку библиотек, фреймворков и сторонних программных средств, которые упростили работу разработчикам сайтов.



Библиотека WebGLU

Библиотека WebGLU

Первой общедоступной библиотекой стала WebGLU — набор утилит низкого и высокого уровня для разработки приложений на WebGL. WebGLU сконструирован таким образом, что разработчик может сосредоточиться на конечном результате с минимумом суеты и кода, но библиотека не ограничивает разработчиков, которые хотят больше контроля. Это достигается за счет возможности использования низкоуровневых функций для работы с WebGL API.

Неполный список функций:

  • Можно загрузить шейдеры непосредственно из .frag / .vert / .vp / .fp файлов
  • Автоматическая загрузка и настройка шейдера
  • Все компиляции и компоновки обрабатываются автоматически
  • Автоматическая установка любой проекции и вида модели
  • Обеспечивает проекции и матрицы-стеки вида модели, которые примерно соответствуют режимам матрицы в OpenGL
  • Автоматически создает при необходимости массив / элемент буферов и связывает их по мере необходимости во время рендеринга
  • Каждому объекту может быть назначена отдельная шейдерная программа
  • Хранение данных атрибутов шейдера, простой вызов
  • Частичный .obj анализатор реализован для загрузки объектов
  • Поддерживает иерархии объектов
  • Статические изображения и видео текстуры
  • Поддержка процедурной анимации
  • Поддержка покадровой анимации
  • Возможность смешивать типы анимации и иерархию объектов
  • GameGLU — библиотека компаньон обеспечивает легкое отслеживание событий клавиатуры



Библиотека GLGE

Библиотека GLGE

Достаточно именитая библиотека для разработки приложений с использованием WebGL. Библиотека ориентирована больше на динамическое изменение сцены. Однако последние изменения в репозитории датированы 2014 годом, поэтому есть причины усомниться в актуальности библиотеки на сегодняшний день.

Неполный список функций:

  • Покадровая анимация
  • Поддержка общего освещения, направленного освещения (spot) и точечных источников света
  • Поддержка карты нормалей
  • Анимирование материалов
  • Скелетная анимация
  • Поддержка формата Collada
  • Поддержка карт смещения
  • Рендеринг текста
  • Туман
  • Глубина теней
  • Карты окружения
  • Отражение / преломление
  • Анимация Collada
  • 2d фильтры
  • Culling — удаления скрытых частей сцены из процесса обработки
  • Поддержка LOD — уровни детализации объекта
  • Физика



Библиотека Three JS

Библиотека Three JS

Наиболее популярная и активно развивающаяся библиотека на сегодняшний день. Подробная и доступная документация и огромное количество рабочих примеров делают эту библиотеку одним из лидеров среди аналогичных систем. 

Неполный список функций:

  • Рендереры — Canvas, SVG или WebGL
  • Добавление и удаление объектов в режиме реального времени
  • Туман
  • Перспективная или ортографическая камеры
  • Каркасная анимация, различные виды кинематики, покадровая анимация
  • Несколько типов источников света — внешний, направленный, точечный
  • Брошенные и полученные тени
  • Шейдеры (GLSL)
  • Объекты — сети, частицы, спрайты, линии, скелетная анимация и так далее
  • Множество предустановленных типов геометрии — плоскость, куб, сфера, тор, 3D текст и так далее
  • Активная поддержка модификаторов — ткань, выдавливание
  • Возможность загрузки множества типов данных — двоичный, изображения, JSON и сцена
  • Экспорт и импорт обьектов Blender, openCTM, FBX, 3D Studio Max и Wavefront .obj файл



Библиотека Babylon JS

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

https://habrahabr.ru

Авторизуйтесь, чтобы получить возможность оставлять комментарии