Разбираемся с шейдерами

В этой статье покажу как прикрутить позиции курсора к шейдеру. (если по какой то причине вы пропустили предыдущие статьи, настоятельно рекомендую с ними ознакомиться. РАЗ, ДВА) На самом деле тут нет ничего сложного. Как и в прошлой статье, в сцене лежит спрайт на весь экран. Размеры экрана 1000 х 600. Над ним CanvasLayer и ColorRect . Создаём и подключаем к ColorRect простенький шейдер который рисует белый круг на черном фоне . Подаем этот круг в альфу. Добавляем переменную mousePos. И чтобы наш круг не был расплющенным и был ровно на месте курсора прописываем оффсеты...

Своего рода логическое продолжение предыдущей статьи. На сей раз выйдем в глобальное пространство, и поправим баги. Настройки проекта : Для того чтобы шейдер применился ко всему экрану накинем CanvasLayer, под него положим ColorRect и подключим на него шейдер. Закидываем в шейдер изображение всего экрана Если вы всё сделали правильно, то увидите спрайт который лежит в сцене. У меня это прекрасное болото в лесу. Дальше рисуем градиент, который будет в последствии деформировать наш экран. Тут всё по классике - добавляем вектор центра экрана (cent) и вычитаем его из UV градиента...

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

В этой статье покажу как можно легко и непринужденно создать анимацию флага при помощи простого шейдера ! Для работы нам потребуется спрайт флага. Единственное что надо сделать - добавить свободного места в спрайт. У меня в итоге получилось вот так : Закидываем картинку в годо, подключаем шейдер. И начинаем накидывать код. Для начала пустим основную волну. Для этого возьмем горизонтальный градиент с UV.x, и размножим его при помощи синуса. Подадим это всё в COLOR и сможем рассмотреть нашу черно белую волну...

В этой статье соберем простой шейдер, который будет искажать спрайт создавая атмосферу старых добрых мониторов из научно фантастических фильмов. Если вы вообще ничего не понимаете в шейдерах, советую начать с серии небольших статей на канале. Закидываем спрайт. И подключаем шейдер. Первым делом нам надо сделать эффект строк. Для этого вполне подойдет вертикальный градиент с UV координат. Берем UV.y и кладем в цвет. В альфу я подал 1.0, чтобы работать со всей поверхностью спрайта. Теперь надо сделать этот градиент повторяющимся несколько раз...

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