Godot. Путь к основам VFX. Smooth Outline Shader⁠⁠

День добрый, дорогие подписчики. Все я точно определился, чем буду заниматься следующий год, это будет изучение шейдеров, партиклов и начну потихоньку осваивать 3D, ну если точнее это будет 2D в 3D окружении, люблю 2D, но и тащусь от возможностей 3D в плане эффектов)
Сразу уточню дабы избежать лишних вопросов, я нихрена не понимаю в этом всем, все что делаю полагаюсь на интуицию и метод "Тыка", но очень хочется разобраться.

Теперь к теме поста. Написала мне в комментариях пикабушница @wolchy, ну пообщались познакомились, специалист в UI/UX, отлично рисует, любит и умеет в Godot, разбирается в шейдерах, мечта поэта короче) Суть проблемы: Для активных предметов в инвентаре, нужна каемочка по краю предмета разного цвета и с градиентной заливкой, ну и не только в инвентаре, а где пригодится. Чуете подход? Художник не хочет тратить свое время и силы, чтобы рисовать для каждого предмета отдельные рамочки, а хочет универсальный способ эту рамочку получить без лишних напрягов, при том что сама написала практически полностью устраивающий её шейдер, проблема одна, рамочка получается не ровная и без сглаживания. На картинке ниже это наглядно показано.
UPD: Важное и полезное уточнение #comment_243392931

Ну мне конечно же стало интересно помочь, тут же в голове возникла куча идей по применению и в своем проекте. Вооружившись гуглом тут же был найден походящий шейдер на godotshaders, но результат был не совсем тот, который требовался по ТЗ, пришлось пару дней потратить чтобы разобраться что и как там в нем работает, чтобы внести пару строчек измений до подходящего))
Реально 1 день на 1 строчку кода, ну я говорил, что я тупой и новичок в этом всем ещё))

Собственно результат.

Да ещё есть огрехи и по функциональности есть ещё что доработать, чем займусь в ближайшее время, но уже довольно неплохо получилось) Пофигу что основной код не мой, любым способом надо получать нужный результат с минимальными трудозатратами, хотя стыдно, что не сам с нуля написал)
Ссылка на исходный шейдер https://godotshaders.com/shader/smooth-outline-2d/

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

https://t.me/boogernator/123

Для совсем ненавистников телеги, вот код копипастой, ну отступы придется ручками тогда)

shader_type canvas_item;

render_mode unshaded;

uniform bool Smooth = true;

uniform float width : hint_range(0.0, 64) = 1.0;

uniform vec4 outline_color : hint_color = vec4(0.0, 0.0, 0.0, 1.0);

uniform vec4 outline_color_second : hint_color = vec4(0.0, 0.0, 0.0, 1.0);

uniform int pixel_size : hint_range(1, 10) = 4;

void fragment()

{

vec4 col = texture(TEXTURE, UV);

vec2 ps = TEXTURE_PIXEL_SIZE;

float _width = width;

vec2 unit = (1.0/float(pixel_size) ) / vec2(textureSize(TEXTURE, 0));

vec4 pixel_color = texture(TEXTURE, UV);

if (pixel_color.a <= 0.25) {

pixel_color = mix(outline_color,outline_color_second, UV.y);

pixel_color.a = 0.0;

for (float x = -ceil(_width); x <= ceil(_width); x++) {

for (float y = -ceil(_width); y <= ceil(_width); y++) {

if (texture(TEXTURE, UV + vec2(x*unit.x, y*unit.y)).a == 0.0 || (x==0.0 && y==0.0)) {

continue;

}

float gradient_k = outline_color.a / (pow(x,2)+pow(y,2)) * (1.0-pow(2.0, -_width));

if (Smooth) {

pixel_color.a += gradient_k;

if (pixel_color.a > 1.0) {

pixel_color.a = 1.0;

}

} else {

pixel_color.a = outline_color.a;

return

}

}

}

}

COLOR = pixel_color;

}

Не заливаю пока никуда, мне надо ещё добавить градиентную заливку от центра картинки к краям, плюс выбор типа заливки, по всей картинке слева-направо, сверху вниз и из центра наружу. Потом наверное попробую выложу на godotshaders))

По разбору кода самого шейдера, тут думаю надо сначала начать с простого, с разбора аутлайншейдера предложеного авторами Godot. Но это уже в следующем посте. Спасибо за внимание.

p.s. Если нужна кому какая помощь по Godot, то не стесняйтесь писать, я так-то простой человек и никому не отказываю, что не умею, так как раз вместе и разберемся, оба получим чуть больше опыта)