Глава 4. Анимированные материалы для окружения и спецэффектов
4.1. Общие принципы и методологии
Создание динамического окружения представляет собой комплексную задачу, требующую интеграции различных техник настройки динамичных материалов для достижения эффекта «живого», реагирующего мира.
В отличие от статичных сред, интерактивное окружение должно отвечать на действия персонажей, изменяться со временем и создавать ощущение непрерывно протекающих процессов внутри той или иной локации фэнтезийного мира.
Глава 4 раскрывает основные техники и методы создания динамических шейдеров для окружения в проекте, основываясь на наиболее распространенных и эффективных подходах: использование триггерных зон, нод sine / cosine, параллакса.
4.1.1. Триггерные зоны
В UE5 есть несколько подходов к созданию эффектов, зависящих от положения того или иного объекта в мире / триггерных зон: использование Object Position, World Position, специальных нод вроде Distance или DistanceToNearest. Эти ноды позволяют получать точные данные о том, насколько далеко находится один объект от другого [например, персонаж относительно части окружения].
Стоит также упомянуть Distance Fields [поля расстояний] — это особый тип данных в UE, который хранит информацию о расстоянии от каждой точки 3d пространства до ближайшей поверхности объекта.
Материалы могут считывать эту информацию и использовать ее для создания тех или иных эффектов.
Демонстрация работы Affect Distant Field Lighting.
Демонстрация работы Distance Fields.
У каждого объекта в сцене есть Distance Field, который он испускает. Наглядно это можно посмотреть, если нажать на иконку глаза во вьюпорте — Visualise — Mesh Distance Fields.
Визуально сначала практически ничего не изменится, сцена будет выглядить как Grayshade. Однако если выбрать любой 3d объект на сцене, вписать в Details — 'Distance' и отжать чекер около Affect Distant Field Lighting, 3d модель перестанет создавать Distant Field и исчезнет со сцены.
Наконец, рассмотрим работу триггерных зон [distance fields] на примере создания шейдера для воды.
Шейдер воды, созданный на основе Distance Fields.
В данном эксперименте Distance Fields позволят генерировать береговую линию и «пену» именно в тех местах, где вода сталкивается с поверхностями или находится в непосредственной близости к ним.
При этом толщина и интенсивность линии взаимодействия может быть параметризована и впоследствии настроена под конкретный случай.
Демонстрация нодовой системы для шейдера воды.
Данный шейдер состоит из 4 основных частей: настройка береговой линии, настройка дополнительного взаимодействия при пересечении Distance Field, деформация геометрии при помощи World Position Offset и блок с дополнительными параметрами цвета и прозрачности.
Нодовая система для шейдера воды — детали.
В первом рассмотренном блоке нод с помощью Panner-a задается имитация многоуровневой деформации поверхности будущего шейдера воды. То есть сама геометрия изменяться не будет, но с помощью карты нормалей [Normal] будет создаваться ощущение объема.
Смещающиеся текстуры шума впоследствии также будут использоваться в качестве масок для создания анимированной береговой линии с динамично меняющимся узором.
Для того, чтобы немного визуально оптимизировать рабочее пространство можно воспользоваться именованной нодой Reroute, а именно, нажать ПКМ — вписать ‘named’ — добавить Add Named Reroute Declaration Node.
Благодаря этому впоследствии не придется «тянуть» результат работы той или иной части кода к инпуту финального материала. Все добавленные таким образом ноды могут быть быстро вызваны по их названию.
Нодовая система для шейдера воды — детали.
В данной части нодовой системы с помощью DistanceToNearestSurface создается эффект береговой линии, а также дополнительной «пены» для более сложного эффекта.
DistanceToNearestSurface
DistanceToNearestSurface — это нода, которая использует систему Distance Fields Unreal Engine для определения расстояния от текущей точки до ближайшей поверхности 3d пространства.
В отличие от обычной ноды Distance, которая вычисляет расстояние между двумя конкретными точками, DistanceToNearestSurface работает с предварительно рассчитанными полями расстояний всей сцены, как было показано ранее.
Данная нода незаменима для создания эффектов, которые должны взаимодействовать со всей геометрией сцены, а не с отдельными объектами.
Благодаря делению DistanceToNearestSurface на указанное в параметре число можно задать ширину границы воздействия эффекта. Далее полученная маска несколько раз умножается на анимированный нойз, что позволяет сделать эффект более хаотичным и динамичным.
Данные действия проводятся как для самого стыка объектов [shoreline], так и для дополнительного узора-пены [shoreline foam], которые впоследствии складываются и отправляются в Alpha инпут нод Depth Fade и Lerp.
Демонстрация работы параметров шейдера воды.
Нодовая система для шейдера воды — детали.
Depth Fade
Depth Fade — это нода, которая решает одну из самых частых визуальных проблем: она убирает резкие границы пересечения полупрозрачных объектов, создавая мягкое затухание на стыках поверхностей, позволяя плавно растворять материал по мере приближения к непрозрачным поверхностям.
Демонстрация работы параметров шейдера воды.
Параметр Fade Distance определяет дистанцию, на которой начинается затухание — малые значения создают резкое растворение у самой поверхности, большие дают длинный и плавный переход.
Демонстрация работы параметров шейдера воды.
Нодовая система для шейдера воды — детали.
В качестве дополнения к нодовой системе был добавлен блок с настройкой World Position Offset для того, чтобы влиять на сетку геометрии, имитируя движение волн с помощью карты нойза.
Демонстрация работы шейдера воды.
4.1.2. Глобальная анимация
Анимация на основе Time, Sine и некоторых других нод представляет собой фундаментальный метод создания циклических, непрерывно повторяющихся эффектов, которые придают окружению ощущение жизни и динамики.
Например, они могут использоваться для создания симуляций колышущейся травы, листвы деревьев, для создания водных материалов, например, ряби от упавшей в озеро капли воды.
Разберем работу данных нод на примере создания нескольких эффектов.
Все дополнительные ассеты были взяты с сайта Sketchfab.
Демонстрация работы SimpleGrassWind.
Пример 1 — колыхание травы
Одним из вариантов создания движения травы, кустов, деревьев и иных растений под воздествием ветра является использование SimpleGrassWind.
SimpleGrassWind
SimpleGrassWind — это готовая нода-функция в Unreal Engine, предназначенная для анимации травы и листвы под воздействием ветра. Она использует комбинацию осцилляций и мировых координат для создания плавного колыхания растительности.
Нодовая система для шейдера растительности — детали.
В самой функции есть все необходимые для создания колебаний инпуты: Wind Intencity, Wind Weight, Wind Speed и Additional WPO, которые можно гибко настраивать от задачи к задаче.
Однако помимо этой функции для настройки смещения была также задействована нода Vertex Color, с помощью которой впоследствии можно будет ограничить область воздействия динамики.
В данном эксперименте функция умножается на R канал, но можно использовать и другие. Это повлияет лишь на то, на каком канале будет рисоваться маска в будущем.
Демонстрация устройства функции SimpleGrassWind.
Использование Vertex Color для создания маски.
Как было упомянуто раньше, с помощью Vertex Color можно ограничить область воздействия того или иного эффекта.
Для этого в сцене необходимо поменять Selection Mode на Modeling — выбрать Attribs — поменять Channel Filter на указанный в шейдере канал [в данном случае R] и поменять цвет кисти на черный [полное отсутствие воздействия].
На области объекта, окрашенные в черный цвет, Simple Grass Wind влиять не будет.
Демонстрация работы SimpleGrassWind.
Пример 2 — рябь на глади воды
Еще один эффект, который можно собрать с помощью ноды Sine и масок, — рябь на воде. Это текстура, которая преломляет проходящий свет и искажает все, что под ней находится.
Демонстрация работы эффекта.
Необходимые для сборки шейдера настройки.
Для начала в настройках материала необходимо включить refraction [англ. преломление] и выбрать в Refraction Method — Index Of Refraction.
Нодовая система для шейдера — детали.
В данной части нодовой системы на основе радиального градиента создается маска по которой впоследствии будут расходиться синусоидальные колебания.
Впоследствии она смешивается с еще одной градиентной маской с измененными параметрами [Mask Radius и Mask Dencity], чтобы эффект не резко обрывался, а плавно растворялся.
Демонстрация работы маски шейдера.
В заключающей части нодовой системы задается цвет, прозрачность. Также ключевым аспектом этой стадии является настройка коэффициента преломления [IOR — Index of Refraction], которая и реализует симуляцию преломления световых лучей.
Данный параметр модулируется на основе данных текстурной карты [через градации серого].
Это позволяет создать неоднородный оптический эффект, при котором геометрия, просвечивающая сквозь материал, подвергается искажению.
Таким образом, различные участки поверхности будут преломлять свет под уникальными углами.
Нодовая система для шейдера — детали.
Пример 3 — каустика*
В данном эксперименте разберется процесс создания анимированных материалов для источников света [Light Function Material] и декалей [Deferred Decal].
*Каустика — это оптическое явление, возникающее при отражении или преломлении света на искривленных поверхностях, приводящее к образованию сложных узоров.
Например, в реальном мире она проявляется как мерцающие блики на дне бассейна, паттерны света, отражающиеся от стеклянных предметов или яркие линии, появляющиеся при прохождении света через воду.
Демонстрация работы собранного шейдера.
Light Function Material — это специализированный материал в Unreal Engine, который назначается источнику света для управления распространением и визуальными характеристиками создаваемого им освещения.
По сути, это маска или же фильтр, накладываемый на световой луч.
Для того, чтобы создать данный шейдер, в настройке материала 'Material Domain' нужно выбрать 'Light Function'. В таком случае останется один единственный инпут — Emissive Color, куда и будет подключаться вся логика шейдера.
Нодовая система для шейдера каустики — детали.
Данный визуальный эффект реализуется посредством многократного смещения текстурных координат. В основе системы находится нода Panner вместе с Time.
Принцип работы заключается в параллельном применении нескольких экземпляров ноды Panner, каждый из которых имеет уникальный коэффициент направления сдвига. Такой подход позволяет создать не однородное, а разнонаправленное движение текстурного паттерна.
Итоговый результат представляет собой многослойный и органичный хаос.
Процесс добавления Material Function в Spot Light.
Для того чтобы добавить материал в свет, необходимо выбрать нужный источник, найти в Details — Light Function — и добавить созданный инстанс материала в слот Light Function Material.
Далее яркость и цвет анимированного узора можно будет настроить в самом источнике света в полях Intencity и Light Color.
Помимо направленного источника света для создания эффекта каустики также можно использовать декали, что позволит добиться объемного, волюметрического эффекта.
Deferred Decal — это специальный объект в Unreal Engine, который проецирует материал на поверхности сцены, не требуя физического 3d объекта.
Декаль представляет собой ограничивающий бокс, который определяет зону влияния текстуры или эффекта и меняет визуальную составляющую объектов после их основной отрисовки, накладываясь поверх.
Демонстрация работы собранного шейдера.
Нодовая система для шейдера — детали.
Фундаментальной частью сбора данного шейдера является создание механизма трипланарного [triplanar] проецирования текстур на геометрию, который автоматически выбирает оптимальную плоскость проекции в зависимости от ориентации поверхности в мире.
Альфа маска, вычисленная из нормалей, определяет, насколько конкретная точка поверхности ориентирована в сторону той или иной плоскости.
Результат работы этих нод позволяет проецировать декаль на объекты без артефактов.
Нодовая система для шейдера — детали.
Эта часть системы отвечает за создание анимированного шума, который делает эффект более живым и детальным. Здесь используется 2 основных элемента: текстура каустики — световые блики и переливы, а также карта нормалей — имитирует дополнительный мелкий рельеф.
С помощью ноды Panner координаты обеих текстур медленно сдвигаются, накладываясь друг на друга и создавая уникальные узоры.
Пример 4 — подводный материал
В данном эксперименте будет разобран процесс создания анимированного Post Process Material-а*.
Post Process Material — это специализированный материал в Unreal Engine, который применяется ко всему изображению на экране после завершения основной стадии рендеринга, но перед финальным выводом видеоряда из движка. Это универсальный инструмент для глобальной модификации финальной картинки.
Демонстрация работы собранного шейдера.
Для инициализации и корректной работы Post Process Material [PPM] в Unreal Engine требуется указание области применения материала в настройках через параметр Material Domain, в выпадающем списке которого необходимо выбрать «Post Process».
Данный выбор меняет внутреннюю структуру и доступный функционал шейдера [остается только Emissive Color]. Материал переводится в особый режим работы, где его основная задача — манипуляция уже отрендеренным буфером кадра.
Нодовая система шейдера — детали.
Для создания эффекта динамического искажения был настроен паттерн смещения, который состоит из текстур шума, к которым подключен вектор, задающий движение и нода Time.
Полученные текстуры затем комбинируются и к ним добавляется Texture Coordinate, что в свою очередь проецирует карту деформаций на пространство координат.
Нодовая система шейдера — детали.
Основные ноды, на которых строится дальнейшая работа — SceneTexture и Scene Depth.
SceneTexture: PostProcessInput0 — это нода, которая дает доступ к финальному изображению сцены на момент, когда оно поступает в пост-процесс. Это промежуточный результат рендеринга всего, что было в кадре — геометрии, материалов, света, частиц — но до применения любых пост-эффектов.
Scene Depth — это нода в Unreal Engine, которая предоставляет доступ к информации о глубине сцены и содержит данные о расстоянии от камеры до каждого видимого пикселя в сцене.
Глубина сцены становится альфа маской для смешивания текстуры экрана на близком расстоянии вместе с заданным цветом на дальнем расстоянии с помощью ноды Lerp.
4.1.3. Параллаксные материалы
Параллаксные материалы — это техника, создающая иллюзию трехмерного рельефа на плоских поверхностях путем динамического смещения текстурных координат в зависимости от угла обзора и карты высот.
В Unreal Engine эффекта параллакса на поверхности модели можно добиться с помощью такой ноды как Parallax Occlusion Mapping, о которой сейчас пойдет речь.
* Все использованные материалы были взяты на Fab-е.
Демонстрация работы собранного шейдера.
Parallax Occlusion Mapping [POM] — это нода-функция, которая позволяет создать иллюзию объема и рельефа на плоских поверхностях, имитируя сложное взаимодействие света и геометрии без увеличения количества полигонов в сетке 3d объекта.
Нодовая система шейдера — детали.
В Unreal Engine есть предзаготовленная нода-функция, в которой прописаны все необходимые настройки и инпуты для корректной работы параллакса. Все, что остается сделать — подставить нужные значения и назначить текстуры.
Рассмотрим основные задействованные каналы:
Heightmap texture — на вход подается Texture Object с Height/Displacement картой.
Height Ratio — задает, насколько «глубоко» и сильно будет смещение текстуры.
Min/Max Steps — задает минимальное и максимальное количество шагов при просмотре материала сверху вниз или же качество сдвига. Чем больше шагов — тем сложнее и тяжелее будет шейдер
UVs — задает координаты и позволяет настраивать тайлинг.
Heightmap Channel — указывает, какой канал будет использоваться картой высот
Reference Plane — задает точку, относительно которой будет происходить смещение. При значении 1 или выше весь параллакс будет направлен вниз. При 0 — вниз.
Render Shadows — булевое значение [True/False], которое определяет, будет ли данный материал отбрасывать тени и принимать тени от других объектов.
Light Vector — позволяет POM не просто создавать иллюзию рельефа, но и правильно взаимодействовать с освещением, как настоящая геометрия. SkyAtmosphereLightDirection будет отдавать значение Direction Light-a в сцене.
Shadow Steps — это количество итераций, которые выполняет алгоритм при трассировке луча от поверхности к источнику света.
Shadow Penumbra — определяет жесткость теней.
Pixel Depth Offset — «обманная техника» для системы глубины, которая заставляет пиксели рисоваться ближе или дальше, чем они есть на самом деле.
Наглядная визуализация иллюзии деформации объекта. Слева — Lit; справа — Wireframe.
Как можно заметить, несмотря на то, что текстура выглядит очень детализированной и проработанной, сетка объекта [в данном случае плоскости] остается прежней, а благодаря Pixel Depth Offset открывается возможность органично вписывать иные ассеты в окружение, так, будто они непосредственно находятся в данной среде.
Демонстрация работы Parallax Occlusion Mapping на плоскости.
Данная функция может также пригодиться для создания объемных декалей, что способствует разнообразию визуальных свойств геометрии без изменения сетки 3d объектов.
Однако для этого придется внести несколько изменений в функцию POM.
Нодовая система шейдера — детали.
Для начала необходимо найти расположение функции Parallax Occlusion Mapping и сделать дубликат.
В функции нужно будет немного отредактировать два основных инпуна: Camera Vector и Light Vector, а именно поменять Local Space на World Space и затем заменить все вектора на новые.
В самом материале нужно будет добавить карту Opacity для декали, а также заменить Material Domain — Deferred Decal; Blend Mode — Translucent.
Нодовая система шейдера — детали.
Демонстрация работы Parallax Occlusion Mapping на декали.
4.1.4. Рендер-таргеты
Render Target — это специализированная текстура в Unreal Engine, которая служит не для хранения статичных изображений, а для динамической записи результатов рендеринга в реальном времени.
В отличие от обычных текстур, которые запекаются заранее, Render Target создается и заполняется данными непосредственно «здесь и сейчас».
Чтобы ее добавить необходимо нажать в Content Browser ПКМ — Texture — Render Target.
Далее необходимо добавить в сцену источник изображения для рендер таргета. Для этого в Place Actors нужно найти Scene Capture 2D и добавить его на сцену.
Scene Capture 2D — это актор-компонент в Unreal Engine, который функционирует как виртуальная камера внутри сцены, чьей единственной задачей является рендеринг всего, что попадает в ее поле зрения, в назначенный Render Target.
Это динамическая система захвата и переноса визуальной информации из трехмерного игрового мира в двумерную текстуру в реальном времени.
После добавления камеры в нужное место сценынеобходимо подключить ранее созданную Render Target текстуру в Details — Scene Capture — Texture Target.
Демонстрация настроек Render Target Texture.
После этого, если открыть текстуру, можно увидеть проекцию сцены, отображающуюся в реальном времени.
Также справа в блоке Details — Texture Render Target можно поменять настройки, например, сделать разрешение больше.
Настройка Render Target материала.
Затем нужно просто добавить полученную рендер текстуру в материал и после этого можно будет проецировать части сцены на те или иные объекты в реальном времени.
Демонстрация работы Render Target Material: слева плейн с динамическим материалом; справа сцена, которая идет в Scene Capture 2D.
Благодаря Render Target вместе с системой Blueprint можно создавать динамические поверхности и взаимодействия, например, интерактивные холсты или оставляемые на снегу следы, своего рода технические визуализации, как например мини карта, на которой видно перемещение персонажа.
Напоследок следует упомянуть про существование Render Passes, которые в своей основе используют настраиваемые материалы.
Render Passes — это фундаментальная концепция современного графического конвейера, представляющая собой разделение единого процесса формирования конечного изображения на последовательность логически обособленных этапов.
Вместо того, чтобы рендерить финальное изображение, можно разбить его на необходимые для пост-обработки пассы, например, создать кастомный материал глубины изображения, коллекцию, которая будет выводить маску для одного главного объекта на сцене и многие другие.
Стоит также сказать, что в Unreal Engine существует немало предзаготовленных материалов для рендера по пассам.
Их можно посмотреть и добавить в настройках конфигурации Movie Render Queue — Rendering — Deferred Rendering — Deferred Renderer Data — Additional Post Process Materials.
Демонстрация работы различных пассов.
Информацию, которую несут некоторые каналы можно нагладно посмотреть, если нажать на символ глаза в окне вьюпорта — Buffer Visualization — Overview.
Демонстрация устройства предварительно подготовленного материала Scene Depth для рендер пасса.
4.2. Практическое применение в ВКР
В ходе экспериментов по созданию анимированных шейдеров для окружения и изучению техник динамического наложения и трансформации текстур был систематизирован и апробирован широкий набор практических методов, непосредственно отвечающих художественным и техническим требованиям выпускной квалификационной работы «Sun Dancer».
«Sun Dancer», фрагмент из аниматика.
Одной из ключевых локаций в визуальном повествовании является внутренний двор покоев главного героя, центром композиции которого выступает бассейн со студеной водой.
«Sun Dancer», концепт-арт внутреннего двора покоев главного героя, Анастасия Примаченко.
Эта статичная архитектурная деталь может быть трансформирована в динамичный визуальный элемент благодаря разработке специализированного анимированного шейдера воды, который впоследствии можно будет уточнять и усложнять под запросы финального дипломного анимационного фильма.
«Sun Dancer», кадр из аниматика.
В одной из важных сцен эмоционального катарсиса, где главный герой раскаивается и, осмысливая пройденный путь, выбирает новую судьбу, используется визуальный прием — «осколки воспоминаний».
Данные фрагменты, проплывающие в пространстве вокруг персонажа, служат не просто статичными декорациями, а динамичными «порталами» в ключевые моменты его прошлого.
Технической основой для реализации этого эффекта станет рассмотренная в главе система Render Target в сочетании с Scene Capture 2D.
Для каждого осколка или группы осколков будет создан отдельный Render Target — текстура в памяти, выступающая в роли динамического холста. В сцену будут помещены специальные камеры, которые будут захватывать конкретные события прошлого: фрагменты локаций, важных персонажей, символических действий.
«Sun Dancer», фрагмент из аниматика.
Визуальный язык проекта также обогатится за счет систематического использования атмосферных и оптических явлений — таких как миражи, каустики и другие сложные световые эффекты.
Данный метод позволит придать дополнительную фактурность вымышленному пространству и добавить особую текстурность визуальному повествованию.
