Шейдерная магия или “желейные” дома из SteamWorld Build

Совсем недавно вышла стратегия SteamWorld Build. Естественно, я ее попробовал:) Но в статье мы не будем рассматривать игру, а посмотрим на один забавный прием, который использовали разработчики.

Мне стало интересно, как добиться такого “желейного” эффекта для зданий. При этом понятно, что никакие заготовленные анимации/кости мы использовать не станем. Это должен быть шейдер, а значит пора запустить UE и сделать что-то подобное. Я использую UE5.3 — если вы надумаете повторить прием на более старых версиях, то обратите внимание на ноды координат в материале. Они чуть иначе устроены но разобраться не составит труда, поэтому я пропущу этот момент.

Для начала необходимо понять, как вообще можно добиться схожего эффекта. Мы не хотим использовать заготовленные анимации или цели морфинга. Значит у нас остается WPO. World Position Offset. Штука эта относительно дешевая, грузит видеокарту и позволяет делать крутые вещи) Всякие птички, рыбки и многое другое в вашей любимой игре, скорее всего сделаны через WPO. Крысы в plague tale тоже используют эту фейковую анимацию. Почему фейковую? Потому как мы меняем визуальное отображение объекта, тогда как коллизии, фактическое положение в мире — остаются прежними. Все что делает WPO — изменяет позицию вертекса — это кстати будет важно и накладывает определенные ограничения.

Собираем первую конфигурацию:

Я бы вам сразу рекомендовал собрать конструкцию с Time, чтобы не нужно было крутить руками и вы сразу видели, что происходит в вашем шейдере.

Нам нужна какая-то маска, которая будет регулировать “качания”. У фундамента здания не качаются и к крыше получаем максимальную амплитуду. Маску мы получим из высоты.

Используем получившиеся значения как множитель для нашего WPO и получаем следующий результат.

Уже ближе к искомому, но как же нам его изогнуть? Раньше я говорил, про вертексы и ограничения связанные с этим. Чтобы получить красивый эффект, схожий с тем, что был в начале статьи — нужно больше геометрии в нашем “здании”.

В примере выше 136 вертекса. В теории, можно за морочиться и на нижнюю часть дать меньше плотность и добиться того же эффекта. Но для написания статьи, я решил не заморачиваться с этим.
Дальше придется поковыряться в блюпринтах, нашему материалу необходимо задавать вектор, по которому мы будем скручивать объект — RotationAxis. Так же необходимо задавать анимацию. Я использовал все ту же конструкцию тайм (чуть улучшить, и передавать текущее время, для старта анимации. Там же нужно задавать значение, по которому будем лерпать таймом значение угла. Чтобы домик отклонялся в нужном нам направлении и реагировал на то, что мы с ним делаем. Ну и остается параметры, который отвечает за максимальную амплитуду. Он будет зависеть от скорости объекта. В итоге мы получим интересный, не сложный и достаточно дешевый эффект:)

Спасибо за внимание и хорошего вечера!

#арт #основы