Приветствую тебя камрад!.
В этой статье покажу как собрать шейдер , чтобы получить эффект вот такой а-ля однобитной графики :
Статья не будет супер подробной, подразумевается что ты в курсе как писать и подключать шейдеры, в группе есть куча материалов на эту тему.
-------
На самом деле тут нет ничего сложного, и сам шейдер пишется буквально в две строки!
Всё что нам потребуется это спрайт, который несёт в себе некую матрицу пикселей с разной «яркостью». При взаимодействии с оригинальным изображением, пиксели исходя из своей яркости либо остаются на экране , либо исчезают. Формируя своеобразный узор.
Понимаю. Звучит сумбурно =) .
Но попробовав на практике этот метод, по идее должно стать понятнее что тут происходит.
( тут можно обойтись и вовсе без спрайта. Описав значения пикселей в цифровом виде. Но мне лично удобнее работать с графикой)
Мы можем использовать разные размеры матриц, 4х4, 8х8 , 16х16 и так далее. Чем больше нам надо деталей - тем большего размера матрица (естественно матрица с разными по «яркости» пикселями).
В некоторых программах работы с графикой эта матрица встречается под названием Bayer Matrix, и используется как генератор эффекта пикселизации.
Впрочем , вы с легкостью можете найти всю информацию в интернете.
Я для своего проекта использовал вот такую, размерами 16х16 :
Работаю я с 3Д сценой, поэтому весь проект выглядит вот так :
SubViewport контеинер, на котором подключен сам шейдер.
Под ним вьюпорт ( незабываем настроить его размеры под размер проекта )
И под вьюпортом 3д сцена, в которой вращается бублик и есть лампочка сверху.
Размеры проекта у меня 640 х 480 .
Накидываем на субвьюпорт шейдер и погнали кодить !
Первое что нам надо сделать - добавить юниформ для загрузки нашего спрайта матрицы. Добавляем переменную grid , и сразу подгружаем туда наш спрайт.
( filter_nearest - отключает сглаживание пикселей, repeat_enable - размноживает текстуру по всем направлениям)
Далее подгружаем обе наши текстуры и проверяем что всё ОК:
Я «размножил» нашу матрицу в восемь раз, чтобы пикселей стало чуть больше на экране.
Ну а теперь надо просто прогнать нашу матрицу по текстуре вьюпорта через step функцию.
В функции я взял только красный цвет. Так как у нас на выходе должно быть черно белое изображение - этого вполне достаточно.
Стало сразу заметно что пиксели появились, но плотность их не велика. Так что наболтаем чуть побольше.
Уже практически то что надо. Осталось только вычистить редкие точки с фона. Для этого просто зажмем значения матрицы через clamp.
Вот теперь выглядит отлично.
Для более удобной настройки добавим float переменную size, и при помощи умножения на неё будем регулировать область пикселизации.
На этом пока всё.
В следующей статье разовьем эту тему чуть пошире.
Сделаем пикселизацию и ограничим количество цветов исходному изображению + смешаем это всё с пиксельным эффектом.
Подписывайтесь на канал, при желании вступайте в группу в ВК.
Удачи в изучении годо