Серия статей посвященная работе с визуальным редактором шеидера находится вот тут — Раз, Два,Три.
В этой же статье будем разбираться с тем как писать шеидеры напрямую в редакторе кода.
Напомню, в кратце — шейдеры позволяют нам модифицировать изображение, например менять цвет, положение пикселей и т.д. По сути можно сказать что это некий постэффект.
Первое, что стОит уяснить — координаты по которым расчитывается положение пикселей в спрайте.
Для этого используется две карты градиента. Красный используется для Х координаты, и зеленый для Y.
Координаты нормализованы, соответственно левый верхний угол = 0.0 , а правый нижний = 1.1.
Добавляем в проект спрайт, подвешиваем на него шеидер. Открываем редактор и начинаем писать код.
Собственно сразу же годо нас предупреждает о том, что надо указать тип шеидера.
Наш вариант canvas_item. Так что пишем :
Весь код отрабатывается в функции fragment().
Для начала обьявим наш спрайт. Для этого указываем тип переменной vec4 и её название sprite, а в качестве данных у нас выступает texture.
Далее годо предложит вам подсказку, из которой станет ясно что надо подать само изображение (sampler 2D) и его UV координаты (vec2).
Дописываем данные, и не забываем ставить в конце строки «;».
И теперь для того чтобы шеидер мог вывести результат своей работы надо подать эти данные в COLOR.
В результате вы не увидите никаких изменений, а значит что вы сделали всё правильно и теперь можно работать с исходными данными.
Но прежде чем идти дальше, давайте вернемся к теории. Все типы и функции описаны подробно в документации. И если посмотреть в справку то можно понять что vec4/3/2 это не что иное как вектор. В нашем случае это 4-х компонентный вектор включающий в себя текстуру и координаты. А COLOR это цвет в формате vec4 (RGBA).
И если мы сейчас уберем нашу переменную sprite , и подадим в COLOR просто цвет, то получим следующее:
А теперь вернемся к нашим UV координатам.
Если сейчас мы подмешаем к UV исходной картинки некие координаты , то увидим как изображение внутри спрайта сдвинется.
Помним что координаты нормализованы:
Ну и для примера, включим в свойствах нашего спрайта повтор изображения,
закинем TIME в ось X, и увидим как изображение бесконечно двигается:
Таким образом можно делать анимации зацикленных текстур. Лифтов, всяких беговых дорожек и прочего.
Ну а имея данные по цвету, можно легко менять или вообще заливать всё изображение целиком.
К примеру возьмем спрайт смайла, и зальем его полностью белым цветом.
Либо оставим только красную составляющую:
А подмешав синус и округление можно сделать к примеру мигающий спрайт.
Шейдеры могут модифицировать всё изображение целиком а не только текущий конкретный спрайт. Для этого используются координаты всего экрана.
В следующих статьях рассмотрим эти и другие моменты более подробно.
Надеюсь вам был полезен этот материал.
Подписывайтесь на канал, вступайте в группу в ВК, и не забывайте что у нас есть дискорд сервер.
Удачи в изучении годо !
#godot #shader #gdscript #программирование #игровой движок
