Шейдер поточного движения или Флоумапинг 🌊
Что такое флоумапинг?
Техника шейдинга для создания эффекта движения текстуры.
Что требуется для реализации:
🖼 Опыт написания шейдеров
🔣 Базовые знания математики
🍟 Чачка пипсов
Для чего мне это?
Техника применима в любых областях, где используются шейдеры в том числе от web до геймдева.
Как реализовать?
Основной компонент флоумап шейдера - одноименная текстурная карта, где цвет пикселя является репрезентацией направления движения.
Как цвет пикселя превращается в направление(вектор)?
Предположим, что у нас есть пиксель с RBG(Красный, Зеленый, Синий) каналами, в таком случае информация о цвете пикселя представляет из себя vec3(R,G,B) компонент, каждый из каналов в котором содержит в себе float значение от 0.0 до 1.0.
При смешивании различных значений каналов мы получим новый цвет.
При помощи цвета пикселя мы можем описывать vec3 значения.
Представим получившееся значение в виде точки в пространстве
Мысленно построим из нулевой координаты до получившейся точки вектор
Подобные вектора являются набором пикселей для флоумапы, которую мы в итоге представим в виде целой текстуры
Для работы с 2D текстурой в ее плоскости нам понадобятся только 2 канала R,G, поэтому флоумапа будет состоять только из 2 цветов, Зеленого и Красного соответственно.
Важно понимать, что цвета, записанные в цвет пикселя, не могут быть отрицательными, и вектора будут ограничены двумя направлениями (условно вверх и вправо) что для нас будет нерелевантно.
Поэтому в дальнейшем значения от 0.0 до 1.0 будут ремапится от -1.0 до 1.0, в этом случае при написании флоумапы значение vec2(0.5,0.5) условно описывает отсутствие движения, т.к. после ремапинга его значение будет приведено к vec2(0.0,0.0).
Для наглядности мы можем составить подобную шпаргалку, которая укажет нам на вектора, получаемые из цветов
Теперь при сложении данных UV и Флоумапы мы получим оффсет пикселя с учетом вектора движения, который мы будем использовать для семплирования вместо оригинального UV.
Но простого сложения для эффекта будет недостаточно - нам необходимо получить 2 состояния, между которыми будет производится плавное перетекание, создающее иллюзию потока.
Для этого нам необходимо получить Время и разбить его на 2 потока, где каждый циклично следует за предыдущим и смешивается с ним.
Для микширования потоков важно, что оба временных потока в сумме всегда равны единице, т.к. смешивать мы будем их при помощи lerp() или mix() в зависимости от среды. Добиться этого можно при помощи оффсета одного из потоков на 0.5 и вычитанием из каждого целой части при помощи floor()
Теперь, умножая значения этих потоков отдельно на значение в флоумапе, мы получим постоянный цикл, который необходимо каждый такт приводить от первого ко второму потоку и обратно, а значит, нам не хватает значения которое, будет регулировать степень смешивания.
Для этого мы воспользуемся математической хитростью. Нам известно, что каждый из потоков растет от 0.0 до 1.0 и достигнув предельного значения воспроизводит цикл повторно.
Но при смешении потоков подобным образом мы получим обрыв в начале каждого цикла.
Нам же необходимо создать функцию, которая сперва растет от 0.0 до 1.0, а после уменьшается от 1.0 до 0.0.
Чтобы добиться этого результата, нам нужно совершить пару манипуляций:
1.Возьмем значение первого потока и вычтем из него 0.5
2.Приведем из получившегося значения отрицательные величины к положительным, при помощи abs(), возвращая число по модулю
3.Умножим получившееся значение на 2 и получим желаемый результат
Дело за малым: при помощи lerp() или mix() внесем в него первое и второе !семплированное! флоумапами изображение и будем ссылаться на значение которое мы получили после математических манипуляций.
Настраиваем переменные под желаемый вид и отрываем шампанское, теперь мы можем в флоумапинг. 🍾🍾🍾
Благодарю за прочтение и, разумеется,
Ссылка на Git содержит UnityPacage с собранным в ShaderGraph шейдером и Шейдер, написанный с использованием GLSL, который вы можете использовать, например, для web.
Вдохновляющая статья о реализации этого трюка https://johnsietsma.com/2015/12/01/flow-maps/
Онлайн редактор флоумап https://cables.gl/p/ntZfmv
Если у вас есть желание поддержать автора статьи, то вы можете:
-Бахнуть по кнопке лайк, чтобы она взорвалась ❤
-Поделиться этой статьёй с людьми, которым интересна тема компьютерной графики.
-Подписаться на мои проекты:
https://vk.com/shakoretka - вк паблик в котором я делюсь своими знаниями, творчеством и вещами которые нахожу интересными(в основном это игры и геймдев)
https://www.twitch.tv/shakoretka - твич канал на котором я периодически провожу трансляции игр и разработки, а также активно общаюсь с гостями в чате <3
https://dtf.ru/u/294992-shakoretka - блог на DTF в котором я публикую статьи
-Оставить фидбек под статьёй и пожелания о топиках, которые были бы вам интересны.
-Типнуть на кофеёк можно по ссылке на DonationAlerts
Красавчик, хорошо написано!
ты нихуя не понял
Благодарю 😳
Чачка пипсовДобавил в лист с "Филиное куре".
Отличный туториал, как раз для меня. Я понимаю как работают шейдеры и напишу достаточно простой, но вот таких трюков знаю мало, а читать код сложных шейдеров мало дает пользы.
Спасибо ❤️ Абсолютно солидарен, да и материала по подобным трюкам не так много. Могу порекомендовать этот ресурс в котором описано множество полезных трюков https://learnopengl.com/Advanced-OpenGL/Depth-testing
Спасибо за лонг.
Спасибо за интерес