Найти в Дзене

№178. GODOT 4.Маскируем объекты при помощи простого шейдера.

Данная статья является дополнением к нескольким уже имеющимся в группе статьям.
Результатом у нас будет вот это : Для проекта нам потребуется две картинки руки, форма выреза( в моем случае круг, под лупу) и сама лупа. Идея тут проста : Мы рисуем маску в отдельный вьюпорт. И затем подаем альфа канал (или любой другой) этого вьюпорта в шейдер как альфу для ноды. В нашем случае маскируется нормальная рука, так что шейдер будет подключен именно к ней. Сцена выглядит вот так: Спрайты (Sprite2D) и один SubViewport.
Последний надо настроить под размеры окна вашего приложения, и само собой положить маску в этот вьюпорт. И поставить как минимум одну галочку возле Transparent BG.
(Вообще, этого можно и не делать, если вы допустим ходите брать не альфа канал , а только красный или какой то еще. Но так как я у себя использую именно альфу, то без галочки ничего работать не будет) Теперь добавляем на спрайт обычной руки шейдер. Выносим юниформ , в который подключим наш вьюпорт. Дальше скорее всего г

Данная статья является дополнением к нескольким уже имеющимся в группе статьям.
Результатом у нас будет вот это :

Для проекта нам потребуется две картинки руки, форма выреза( в моем случае круг, под лупу) и сама лупа.

-2

Идея тут проста : Мы рисуем маску в отдельный вьюпорт. И затем подаем альфа канал (или любой другой) этого вьюпорта в шейдер как альфу для ноды. В нашем случае маскируется нормальная рука, так что шейдер будет подключен именно к ней.

Сцена выглядит вот так:

-3

Спрайты (Sprite2D) и один SubViewport.
Последний надо настроить под размеры окна вашего приложения, и само собой положить маску в этот вьюпорт.

-4

И поставить как минимум одну галочку возле Transparent BG.
(Вообще, этого можно и не делать, если вы допустим ходите брать не альфа канал , а только красный или какой то еще. Но так как я у себя использую именно альфу, то без галочки ничего работать не будет)

-5

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

-6

Выносим юниформ , в который подключим наш вьюпорт.

-7

Дальше скорее всего годо будет ругаться, надо будет поставить галочку возле LOCAL TO SCENE и повторить выбор вьюпорта снова

-8

В коде всё просто. Берем альфу от вьюпорта, и подаем её в альфу спрайта

-9

После этого я добавил простенький скрипт на home ноду, где привязал маску и лупу к курсору.

-10

И на этом вобщем то и всё.
Не обращайте внимания на то, как странно маска может выглядеть в проекте. Годо использует для расчетов всю поверхность экрана (SCREEN_UV), поэтому маска может быть овальной и находиться вообще не там где вы ожидаете.

-11

***

Если в ноде SubViewport выключить очищение вьюпорта, то можно получить эффект «стёрки» .

-12
-13

Ну и вообще, можно много чего намутить.
Использовать анимированные маски, генерировать маски по клику, которые будут оставлять «дырки» во вьюпорте, генерировать маски которые будут со временем пропадать …и так далее…

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