⚡ Шейдеры, часть 4. Почти-Glitch! 📺

Продолжаю серию про шейдеры.
Сегодня сделаем шаг к полноценному глитчу.

Идея простая. Нам надо разрезать экран на горизонтальные полосы и двигать эти полосы, а не просто пиксели отдельно.

Погнали!

int slices = 12;
float sliceHeight = 1.0 / float(slices);
int sliceIndex = int(uv.y / sliceHeight);

- тут делим экран на 12 полос
- каждая полоса получает свой индекс sliceIndex
- теперь можем двигать сразу всю полосу, как единый блок

float r = rand(float(sliceIndex));
if (r > 0.7) {
    sliceGlitch = (r - 0.7) * 4.0 * intensity;
}

- для каждой полосы мы считаем случайное число r
- если оно больше 0.7 (придумайте себе любое, я вообще много захардкодил тут), то полоса поедет
- чем больше r, тем сильнее её сдвигает

float direction = randDirection(sliceIndex); // либо -1, либо +1
uv.x += sliceGlitch * 0.08 * direction;

- каждая полоса либо смещается влево, либо вправо. Метод randDirection можете на скринах посмотреть. Он основан на методе rand, который тоже есть на скринах. Это скорее не rand, а больше как хеш, который с течением времени выглядит как будто рандом.
- получается случайно, но стабильно, потому что направление привязано к индексу полосы

А теперь оживим это. Нам надо сдвигать полосы резко и рандомно со временем. Создать эффект помех. Для этого изменим r:

float t = floor(time * 10.0);
float r = rand(float(sliceIndex) + t + realRandom * 100.0);

- floor(time * 10.0) значит глитч обновляется 10 раз в секунду
- каждый апдейт это новое случайное значение
- но еще прокидываем из Kotlin кода realRandom, чтобы не было повторяющихся циклов. Если его не прокинуть, то наш рандом будет каждый раз одинаковый

🐸 Ну и уже почти то что надо!

📺 Полосы двигаются, как будто помехи!

Дальше немного украсим их и Glitch будет готов!

#android #ui #compose #shaders #agsl #graphics #glitch

✨ Шейдеры. Делаем Chromatic aberration для Glitch

В прошлой части мы сделали самое важное: разрезали экран на полосы и научили их прыгать во времени.

Чтобы стало похоже на реальный глитч, давайте добавим суперпопулярный эффект в стиле VHS или плохой линзы — RGB split, он же Chromatic aberration.

🌈 RGB split — разъезжаются цветовые каналы

Это очень узнаваемый приём: красный и синий каналы чуть-чуть уезжают относительно зелёного.

Первая картинки — это демо эффекта. Вторая — простонаглядный пример Chromatic aberration из интернета.

Допишем вот такой код в наш шейдер:

float splitAmount = 0.005 * intensity;

vec2 uvR = baseUv + vec2(-splitAmount, 0.0);
vec2 uvG = baseUv;
vec2 uvB = baseUv + vec2( splitAmount, 0.0);

vec3 cR = image.eval(uvR * imageSize).rgb;
vec3 cG = image.eval(uvG * imageSize).rgb;
vec3 cB = image.eval(uvB * imageSize).rgb;

return vec3(cR.r, cG.g, cB.b);

Разберем что здесь происходит. Мы берём красный цвет не из этого пикселя, а из соседнего слева.
Синий из соседнего справа. Пока картинка однотонная, то разницы почти нет.
Но на краю объекта слева и справа уже разные цвета. Каналы перестают совпадать, и появляется цветная рамочка.

То есть финальный цвет получается так:
- final.r = левый_пиксель.r
- final.g = центральный_пиксель.g
- final.b = правый_пиксель.b

🤔 Почему только на границах?
Представь, что у тебя большой однотонный фон, например серый. Внутри этого фона пиксель слева почти такой же, пиксель по центру почти такой же, пиксель справа почти такой же. Значит собранный цвет почти не отличается от оригинала. Но край объекта — это место, где картинка меняется сильно и быстро: слева ещё фон, а справа уже объект. То есть соседние пиксели сильно отличаются.

Я выложил свой Glitch modifier, можно посмотреть подробнее и этот код, и полную версию модифайера.

Еще один шаг и наш глитч полностью готов!

#android #compose #ui #shaders #agsl #graphics #glitch