Создание стилизованных эффектов для игр. Часть 1: Step, SmoothStep, Dissolve

В этой статье я хочу рассказать об основах создания стилизованных эффектов для игр. Процесс создания я буду показывать в Unity Shader Graph (версия 2019 LTS), чтобы при желании их можно было воспроизвести в Unreal Blueprint и любых других нодовых редакторах шейдеров вне зависимости от движка. Если вы знакомы с HLSL и предпочитаете писать шейдеры текстом, вам также не составит труда перевести это в текстовую форму.

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

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

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

Давайте возьмём простую систему частиц и рассмотрим, каким образом мы можем заставить частицы "красиво" исчезать. В качестве примера я буду использовать вот такую текстуру облака:

По умолчанию частицы просто пропадают по истечению их срока жизни.

Это некрасиво и слишком сильно бросается в глаза своей недоделанностью и дешевизной.

С помощью встроенных инструментов, которые предоставляет Shuriken (система частиц в Unity) можно "красиво" убрать частицу двумя основными способами: через прозрачность, через уменьшение размера, или через совмещение этих двух техник.

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

Такой приём тоже используется очень часто и он ближе к "мультяшной" стилизации. Например, этот приём можно заметить в играх про Mario.

Но есть ещё один приём, который не поставляется "из коробки" и про который я расскажу в этой статье. Это эффект растворения, в оригинале Dissolve.

Такой приём встречается повсеместно в играх в стиле cel-shading и играх с аниме стилистикой. Растворение не работает "из коробки" и нам придётся реализовать его самим. Но сначала немного теории.

Суть этого метода заключается в том, что пиксели на текстуре частицы становятся прозрачными не все одновременно, как в первом описанном методе, а постепенно. При этом растворение может иметь жёсткую чёткую границу, а может быть размыта. Нам нужно научиться контролировать этот процесс и "говорить" частице в какой последовательности "растворять" пиксели и насколько размывать границу.

Обычно для этого используется либо один из каналов текстуры (обычно, альфа), либо отдельная текстура, так называемая маска растворения (dissolve mask). Для простоты понимания и большей наглядности мы будем использовать отдельную текстуру.

Обычно маска растворения представляет собой некий чёрно-белый паттерн (точнее не ч/б, а оттенки серого). Он может быть сгенерирован в Photoshop или After Effect (различные типы шума), либо нарисован вручную, если вам нужно больше контроля над процессом растворения.

Теперь, глядя на эту маску, нам надо понять, как на её основе будут "растворяться" пиксели.

Правило простое.

Если вам сложно представить это - не беда. Есть инструменты, которые позволяют это визуализировать. Например, в Photoshop можно наложить Adjustment Layer с функцией Threshold и двигая ползунок получить превью процесса растворения.

Когда ползунок в крайнем левом положении - это начало жизни частицы, когда в крайнем правом - момент "смерти" частицы.

В результате мы получили чёрно-белую текстуру, которую мы можем использовать в качестве альфа-канала в нашем шейдере. Чёрные пиксели будут невидимы (альфа = 0), белые пиксели будут видны (альфа = 1). Это и даст нам тот самый эффект "растворения". Осталось научиться контролировать это пороговое значение, которое разделяет пиксели на чёрные и белые, в зависимости от времени жизни частицы.

Настало время взяться непостредственно за шейдер.

Давайте создадим в Unity новую сцену. На сцене создадим Quad и разместим его напротив камеры.

Теперь создадим новый Unlit Graph. В параметрах master-ноды выберем Surface = Transparent. Внутри создадим следуюшие properties

Подключим цвет основной текстуры и альфу основной текстуры к master-ноде.

Создадим на основе графа материал и назначим его нашему quad'у.

Теперь давайте внутри шейдера проделаем то же самое, что мы видели в фотошопе. В этом нам поможет функция Step.

Эта функция принимает на вход 2 параметра:

Принцип работы такой:

Таким образом, результатом всегда будет либо 0, либо 1. Другими словами, либо чёрный пиксель, либо белый. Именно то, что нам нужно.

Параметр EDGE это и есть тот самый ползунок, который мы таскали в фотошопе. В случае шейдера, этим параметром будет ползунок Progress, который мы создали заранее, а параметром VALUE будет цвет пикселя маски растворения.

Но мы не можем взять цвет пикселя, потому что это вектор, состоящий из 4 компонентов (красный, зелёный, синий, альфа). Мы не можем сравнивать вектор и число. Вместо этого мы возьмём значение красного канала текстуры.

Давайте создадим ноду Step на нашем графе и подключим к ней описанные выше входные значения.

Давайте временно отключим цвет основной текстуры от master-ноды и подключим результат Step-ноды ыместо него, чтобы проверить как это работает.

Результатом функции Step является число, а нам на вход Color нужен вектор, поэтому нужно его предварительно создать.

Теперь, двигая ползунок в инспекторе материала, мы видим как "растворяется" белый квадрат.

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

Для этого давайте перемножим альфа-канал основной текстуры с результатом функции Step и уже это произведение воткнём в альфа-канал master-ноды.

Вот так теперь выглядит итоговая анимация растворения.

Таким образом мы реализовали самый простой вариант "растворения" с жёсткими границами. Давайте посмотрим, как мы можем их "смягчить".

Для этого вместо функции Step мы будем использовать SmoothStep.

Из названия можно понять, что в основе лежит всё тот же Step, но давайте разбереёмся, в чём суть приставки Smooth (плавный, гладкий).

Если Step принимает на вход 2 параметра, то SmoothStep принимает 3 параметра:

Правило следующее:

Что же такое S-кривая?

Если мы посмотрим на формулу, которая работает "под капотом" у этой функции, то мы увидим следующее:

Если мы спроецируем эти значения на чёрно-белый градиент, то получится вот такая картина

Мы видим, что SmoothStep возвращает не линейную интерполяцию между 0 и 1. В терминах анимации можно сказать, что кривая имеет Ease-In и Ease-Out ("разгон" и "торможение" на входе и выходе).

Другое важное отличие от линейной интерполяции (Lerp) заключается в том, что диапазон значений на выходе всегда ограничен нулём и единицей, в то время как линейная интерполяция может производиться между прозвольными значениями.

Вообще, очень рекомендую разобраться и как следует понять в чём принципиальные отличия Lerp и SmoothStep и как одно может использоваться для другого, например, как использовать выходное значение SmoothStep в качестве параметра t для Lerp.

Также, очень рекомендую вот это видео на канале The Art of Code, где технический художник из Канады подробно рассказывает про SmoothStep, как его самостоятельно вывести, какие у него области применения и ещё много чего интересного.

Теперь давайте применим эти новые знания в нашем шейдере.

Для начала добавим ещё один параметр Falloff который будет отвечать за ширину градиента размытия границы.

На вход VALUE всё также будем подавать красный канал маски размытия. Теперь надо разобраться, что будет выступать в качестве EDGE0 и EDGE1.

Одним из них должен быть наш параметр Progress. Если мы хотим, чтобы при Progress = 0,5 все пиксели, у которых значение красного канала было меньше 0,5 были чёрными (соответственно, "растворялись"), значит, это должна быть нижняя граница градиента, соответственно, EDGE0.

EDGE1 в таком случае будет Progress + Falloff.

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

Теперь меняя в инспекторе значение Falloff и двигая ползунок Progress мы можем наблюдать растворение с мягкими границами.

Но есть один неприятный момент.

Если выставить Falloff достаточно большим, а Progress сдвинуть в ноль, мы все равно будем видеть частичное растворение, хотя подразумевается, что при нуле растворения нет.

Если мы ещё раз посмотрим на нашу формулу, то причина появления этого артефакта станет понятна и логична. В соответствии с нашей формулой, значение Progress - это нижняя граница градиента и пиксели на ней черные (в конечном варианте эффекта - прозрачные).

Мы могли бы использовать Progress в качестве входного параметра EDGE1 (верхняя граница градиента), а в качестве EDGE0 использовать формулу Progress-Falloff, но тогда при значении Progress = 1 не все пиксели будут до конца растворяться. Простой перестановкой параметров тут не обойтись.

Что бы исправить этот артефакт, нам понадобится ещё один крайне полезный инструмент под названием Remap.

На русский язык этот термин можно перевести как переназначение или перераспределение.

На вход этой функции подаётся 5 параметров:

На выходе мы получаем значение, переназначенное относительно нового диапазона.

Это может прозвучать немного непонятно, по этому приведу пару простых примеров.

Допустим, у нас есть начальный диапазон [0; 1] и внутри него значение 0,5. Нам нужно заремапить это значение на диапазон [0; 2].

Мы подаём эти 5 значений на вход функции. Функия смотрит, где в процентном соотношении находится наше значение внутри начального диапазона. В нашем случае 0,5 находится ровно посередине, т.е. соответствует 50%. После этого функция смотрит какое значение соответствует тому же проценту внутри нового диапазона и возвращает его как переназначенное значение. В нашем случае 50% между 0 и 2 будет равно 1. Это и будет наше переназначенное значение на выходе.

Чуть более сложный пример.

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

Формула для рассчета выходного значения:

Как Remap может нам помочь решить проблему с нежелательным растворением при значении Progress = 0?

Смотрите, нам нужно, чтобы при значении Progress = 0 все пиксели были белыми, то есть находились на верхней границе градиента. Затем, при движении ползунка в сторону единицы, должен постепенно начать проявляться градиент и, когда ползунок достигнет единицы, все пиксели должны быть черными, то есть "растворёнными".

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

И если мы теперь сделаем Remap значения Progress из начального диапазона [0; 1] в новый диапазон [-Falloff, 1] мы как раз получим то, что нам нужно.

Так как верхняя граница диапазонов Remap'а совпадает, там всё будет без изменений - все пиксели при Progress = 1 будут растворены.

Давайте реализуем эту логику в шейдере. Для этого добавим ноду Remap.

Давайте вернём цвет основной текстуры и посмотрим как это выглядит всё вместе.

Таким образом мы реализовать растворение с мягкими краями.

В этой статье я объяснил принцип эффекта "растворения" и какие функции для этого используются.

Возможно, вы заметили, что я показывал всё на примере простого GameObject'а, а не на системе частиц. В системе частиц мы не можем вот так просто взять и покрутить ползунок для каждой отдельной частицы. Но в Unity есть встроенные инструменты, которые позволяют нам заставить каждую отдельную частицу "общаться" напрямую с шейдером и получать от него значения, актуальные для этой конкретной частицы.

В следующей части я расскажу про Custom Vertex Streams для системы частиц Shuriken, для чего они нужны и как с ними работать. Мы с вами адаптируем созданный нами шейдер, чтобы он работал с каждой отдельной частицей.

Не переключайтесь!

Данный цикл статей я пишу в рамках работы над своим проектом King, Witch and Dragon, который представляет собой метроидванию в стилистике cel-shading и о которой я веду дневник разработки.

Если вам понравилась статья и вы хотите поддержать проект, добавляйте King, Witch and Dragon в вишлист на Steam, это важно не только для моей мотивации, но и для алгоритмов Steam. Чтобы принять участие в обсуждении, вступайте в группу ВК, а также подписывайтесь на меня в Twitter и Instagram.

Спасибо за внимание!

#лонг #unity #графика #опыт #шейдеры #vfx