Unreal Engine 4 — шейдер горения

в 11:09, , рубрики: shaders, tutorial, Unreal Engine, VFX, разработка игр

Unreal Engine 4 — шейдер горения - 1

Это небольшой шейдер, который появился, когда я думал о различных методах применения flowmap. Существуют много эффектов перехода/растворения, но большинство из них выглядит довольно статично, так как они используют статические текстуры. Данный шейдер далек от совершенства, но плавное движение делает его визуально привлекательным как плавный эффект горения.

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

Примечание. Вы можете открыть изображения в новой вкладке, чтобы посмотреть их в более высоком разрешении.

Текстуры

Я использовал следующие текстуры в шейдере, первая, это простой noise, генерируемый в Substance Designer, вторая, flowmap, которую я нарисовал с помощью FlowMap Painter.

Unreal Engine 4 — шейдер горения - 2 Unreal Engine 4 — шейдер горения - 3

Настройка FlowMap

Flowmapping — это метод, с помощью которого мы используем 2D векторы, хранящиеся в виде текстуры, чтобы искажать UV текстуры в течении определенного времени. Эта анимация потом зацикливается, чтобы создать иллюзию потока. Обычно такое используют в потоках воды, чтобы создать впечатление, что вода течет вокруг камней и т.п. Но, конечно, его можно использовать и для множества других вещей. В моем шейдере я использую его для создания эффекта горения материала. Если вы хотите больше понять о flowmap, рекомендую почитать статью на Polycount и посмотреть урок от Simonschreibt, в котором он отлично объясняет работу с flowmap.

Мои вариант настроек ниже

Unreal Engine 4 — шейдер горения - 4

Как вы можете видеть, у нас есть параметры для управления силой искажения, тайлингом текстур, а также направлением потока.

Чтобы управлять эффектом, я использую выход из красного канала из карты шума, если вы посмотрите на узел Lerp, вы увидите следующий результат:

Unreal Engine 4 — шейдер горения - 5

SphereMask

Этот шаг может быть реализован несколькими способами, в конце концов, все, что ему нужно, это значение масштаба градиента, чтобы управлять нашим эффектом. В этом случае я использую SphereMask, управляемую положением blueprint’а, чтобы перемещать нашу маску. Двигая blueprint вокруг, я могу влиять на то, какие области сжигаются, а тaк же анимировать радиус сферы, чтобы создавать эффект сгорания. Если вы хотите узнать, как настроить набор параметров материала для передачи положения BP в шейдер, рекомендую почитать о Wormhole шейдере, где я подробно это описываю.

Создать SphereMask легко, так как UE4 уже имеет встроенную функцию
Unreal Engine 4 — шейдер горения - 6

В этом случае радиус указан в мировых координатах (World Space), чтобы это увидеть, попробуйте изменить значение радиуса. По умолчанию расположение SphereMask равно {0, 0, 0}, поэтому вы заметите, что сфера появляется в центре меша.

Unreal Engine 4 — шейдер горения - 7

Следующим шагом будет вычитание результата flowmap шума из SphereMask, чтобы мы получили рисунок, подобный горению, по мере масштабирования маски.

Unreal Engine 4 — шейдер горения - 8

Обратите внимание, что вы можете настроить параметр Hardness у SphereMask, чтобы контролировать величину разброса при переходе

Hardness: 0.2 Hardness: 0.5
Unreal Engine 4 — шейдер горения - 9 Unreal Engine 4 — шейдер горения - 10

Теперь мы можем взять результат и умножить его на Opacity_Mask и вернуть в наш канал Opacity материала, чтобы получить итоговую маску.

Unreal Engine 4 — шейдер горения - 11 Unreal Engine 4 — шейдер горения - 12

Также вы можете сделать такой эффект без настройки flowmap, используя только статическую текстуру. Разница лишь в том, что используя flowmap вы добьетесь более плавной анимации. Ниже вы можете увидеть разницу

с flowmap без flowmap
Unreal Engine 4 — шейдер горения - 13 Unreal Engine 4 — шейдер горения - 14

Edge Glow и Charring

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

Ниже вы можете увидеть эти настройки. Единственное, что следует здесь отметить, это то, что мы выбираем 0.45 для контура свечения и 0.5 для контура обугливания, чтобы они были смещены относительно друг друга, и обугливание появилось вокруг свечения. Затем мы создаем параметр из ширины, чтобы контролировать разброс по мере необходимости.

Unreal Engine 4 — шейдер горения - 15

Если вы поставите превью на каждую из этих нод, вы увидите следующее

EmberGlow Charring
Unreal Engine 4 — шейдер горения - 16 Unreal Engine 4 — шейдер горения - 17

Теперь берем результат из EmberGlow и умножаем на цвет пламени, далее добавляем его к цвету Emissive и возвращаем на вход нашего материала.

Unreal Engine 4 — шейдер горения - 18

В качестве альтернативы вы можете использовать результат из секции EmberGlow в качестве Diffuse данных для отображения цветов на основе градиента. Данная техника называется градиентным отображением, и в UE4 теперь есть функция CurveAtlass, которая позволяет вам определять кривые цвета и получать к ним доступ внутри шейдера. Учтите, что это экспериментальная функция, и я столкнулся с несколькими вылетами в попытках ее использования в моих шейдерах, так что советую пока воздержаться от ее применения.

Unreal Engine 4 — шейдер горения - 19

Затем мы берем результат из секции Charring и умножаем его на Basecolor из входных данных функции, чтобы получить значение Final Basecolor.

Unreal Engine 4 — шейдер горения - 20

Теперь вы можете видеть как чернеют края, перед тем как начать гореть

Unreal Engine 4 — шейдер горения - 21

На этом мы закончили.

Теперь самая крутая часть — мы можем перемещать наш blueprint вокруг, чтобы изменять область горения. К примеру в игре мы можем использовать расположение факела игрока, чтобы управлять этим эффектом. В результате это будет выглядеть так, как будто он что-то сжигает. И мы можем управлять параметром Hardness у SphereMask и радиусом, чтобы получить нужный нам вид. Вот так это будет выглядеть с разными настройками.

Mask Radius: 512
Spheremask Hardness:0
Mask Radius: 92
Spheremask Hardness:0.5
Unreal Engine 4 — шейдер горения - 22 Unreal Engine 4 — шейдер горения - 23

Кроме того, вы можете анимировать радиус, чтобы это выглядело так, как будто он сгорает со временем.

Пример проекта с данным шейдером можете взять из репозитория github

Автор: Александр Тарабака

Источник


* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js