• Улучшенный ASCII Shader [VFX, Creative Coding, Unity]

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

Материала подобного толка очень мало, свои заинтересованность можно показать поставив лайк данной статье.

Сам эффект работает следующим образом. У нас есть градиент состоящий из символов и нам нужно наложить его на участки изображения в зависимость от яркости участка.

Чтобы это сделать нужно перевести изображение в Grayscale, пикселизировать его и выбрать нужный кусок в зависимости от градиента.

Это самая основа, в популярных решениях ее делают интересней добавляя и меняя цвета задника и смиволов, так что пусть будет интересней и здесь.

Добавление цветов, первый это цвет ascii символа наложенного на изображение (alpha отвечает за смешивание цвета изображения)

Шейдер наложения и математику можно посмотреть на github

Второй параметр - цвет задника, он работает как множитель, но с одним нюансом - alpha отвечает за его появление, таким образом символы могут быть наложены либо просто поверх изображения, либо поверх пикселизации с множителем, ну или на статик фон (за что отвечает параметр solid)

В старых играх есть такое эффект анимированных спрайтов в виде текста(это трава персоаж, лава и другие вещи) Эффект у нас фулл скрин и хотелось попробовать. Есть на пример такой худ прием по добавлению шума в тенях для того чтобы дать фокус на другие части изображения, идея была реконструировать вот этот самый эффект.

Делается оно следующим образом, градиент получает новый слой глубины и значение символа берется из текстуры экранного шума.
Я решил использовать PerlinNoise - е��о можно скейлить, с ним можно играться и по факту можно делать что то плавное или же увеличив его сделать просто рандомное наполнение. (в unity есть встроенный генератор для него Matf.PerlinNoise)

Оказалось анимации символов выглядят довольно скучно, несмотря а то что их можно использовать, но нашлась другая более важная деталь, это создания глитч эффекта путем просто установки немного других параметров без какого либо дополнения.

Таким образом можно делать эффекты киберпанка, накладывать Digital артифакты в зависимости от яркости участков изображения

* на самом деле с анимациями символов и таким образом можно делать рандомные дрожания - что то на подобии Toonish обводки, играться с цветами и как я думаю много чего еще что до конца не исследовано.

Следующее дополнение это палитра в которую можно вкинуть изображение (snapping в палитру делают вещи более ретро выдержанными, можно делать пиксель арт, старое crt или даже 256 цветов виндовс 95 прости госпаде)

У палитры есть вес, реализуется она через индексацию Lut таблицы - это 3D квадрат в котором содержатся все цвета на замену, цвета в нем перезаписываются на индексированные и потом берутся от туда в шейдере.

*применять можно естественно частично смешивая с изначальным цветом изображеия

Таким образом играясь с параметрами и комбинируя с другими эффектами можно делать довольно стилевые вещ: такие как глитчи, символьную текстуализацию на подобии cyberpunk/syndicate или же просто транслировать изображение во этакий ретро look.

Демка и примеры:

#gamedev #ascii #shader #vfx