События

Программное управление элементами изображений

2019-07-31

Введение

Основная задача программирования трехмерных приложений сводится к построению элементов трехмерных изображений по некоторому алгоритму. Трехмерные изображения в контексте OpenGL/WebGL состоят из нескольких групп программных объектов для описания геометрических форм элементов сцены и способов окраски полигонов. Управляя свойствами программных объектов трехмерных сцен, можно создавать самые разнообразные трехмерные приложения с динамическими визуальными эффектами для программирования конфигураторов товаров, методических схем устройств и технологических процессов, учебных пособий, рекламной инфографики.


1. Меш

Основным объектом трехмерных моделей служит полигональная сетка mesh. Структурно это просто массив трехмерных координат вершин сетки, которые определяют соединяющие их ребра и образующиеся ребрами полигоны, в основном - треугольники. На трехмерной сцене полигональных сеток может быть несколько. Меш объекты являются основой для работы остальных элементов сцены - нанесения на поверхность полигонов материалов и изображений, привязки полигонов сетки к скелетной арматуре для анимации, подсветка полигонов различными моделями освещения, формирование лучей света.

2. UV разверка

Для нанесения окраски полигоны делят на области и разворачивают на плоскость со специальной системой координат UV. Размеченные UV области можно сопоставлять с растровым плоским изображением для определения цвета каждого трехмерного пиксела. Такой процесс также называют нанесением текстуры на поверхность трехмерной модели.

3. Материал

Алгоритм формирования поверхностей полигонов мешей реализуется посредством шейдеров - специальных программ для расчета на видеокарте на языке GLSL. Blend4Web компилирует шейдеры автоматически на основе данных в визуальном редакторе панелей графических инструкций (нодовый редактор материалов). Полученный граф команд задает порядок операций по применению эффектов окраски в нужный цвет, нанесения изображения по UV координатам, применения градиентов освещения.

Благодаря Uber материалам Blend4Web позволяет художникам управлять ключевыми параметрами в Uber панели для получения в текстиле вида шелка, вельвета или парчи, в метале - золота, меди или стали, в стекле материал для очков, в камнях топазы и бриллианты. Программист также может управлять Uber параметрами материала в своем JavaScript приложении.

4. Камера

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

5. Кости и анимация

Кость - это служебная конструкция для определения вектора из двух точек с некоторой длиной и поперечной направленностью для задания поворота. Механизм костей нужен для управления полигональными мешами. Сами кости могут образовывать связанную конструкцию с подчинением одних костей другим (риг). К костям можно привязывать как меши целиком для объектной анимации (скиннинг), так и избранные полигоны одного меша для последующего их перемещения при изменении кости в пространстве. Таким образом, можно перемещая кости воздействовать на меши - передвигать объекты целиком или анимировать движение, походку, бег для различных персонажей, людей, зверей, птиц.

Программистам доступно API управления костями на сцене, с помощью которого можно двигать кость самому или брать позиции из анимированной последовательности положения костей на сцене (скелетная анимация). Программно можно управлять координатами вершин сетки, задавая перемещение части вершин по некоторому алгоритму (вертексная анимация) или всей сетки целиком (объектная анимация). Также алгоритм перемещения вершин может быть более условным, зависящим от других объектов (анимация с помощью физического движка).

Демонстрация

Вывод

Blend4Web безусловно удобный инструмент для художников. Весь богатый арсенал управления сценой доступен и программистам, которым не нужно каждый раз писать элементарные операции для инициализации сцены. Художники сами подготовят трехмерную сцену, а программисты могут сосредоточиться на алгоритмах управления сценой.

Создавать трехмерные сцены в Blend4Web удобно для художников и просто для программистов.