Найти тему

№206. Godot 4. Шейдер увеличительного стекла.

Соберем простой шейдер который будет имитировать лупу. То бишь увеличительное стекло.

Добавляем в проект спрайт, в моем случае это сетка ТВ, и накидываем на него шейдер.

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

-2

Крутим. И наблюдаем как наша текстура увеличивается.

-3

Нам надо чтобы увеличение было от центра, поэтому добавляем переменную center. В ней будет храниться вектор центра UV.
Соответственно подмешиваем её в наши расчеты.

-4

Теперь всё работает как надо.

-5

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

Для примера, возьмем наш любимый UV.x градиент, и подмешаем его к power переменной.

-6

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

-7

Как вы могли догадаться, если вместо линейного градиента подключить круговой ( radial ) , то получим то, что и требовалось.

Добавляем переменную grad, и рисуем в ней вот такой круговой градиент.

-8

ну и подмешиваем это всё в UV.

-9
-10

Нам надо чтобы двигались пиксели в центре , поэтому инвертируем

-11
-12

Ну вот, практически то что нужно.
При помощи
smoothstep мы можем сделать более контроллируемый радиус градиента.
Я вывел пару переменных
inner и outter, чтобы было удобнее настраивать.

-13
-14

Альтернативно можно использовать свою карту градиента(и не только) нарисованную к примеру в photoshop.

-15

На этом всё.
Подписывайтесь на канал,
вступайте в группу в ВК.
Удачи в изучении годо !

-16