Gamedev
Sergey Coremission
3864

ASCII-art Шейдер а-ля Watch Dogs

Я возвращаюсь к Магии шейдеров и сегодня хочу, как обычно, не вдаваясь в детали, рассказать как бы я сделал шейдер для полноэкранного пост-эффекта а-ля Watch Dogs.

В закладки
Слушать
​Пример ASCII-арта

Привет, DTF!

Я долго время вёл рубрику МагияШейдеров на Пикабу, публиковал посты в Лигу разработчиков видеоигр. Но вот недавно понял, что лига как-то потухла, чтоли: просмотров почти совсем нет, комментариев, лайков — тем более. И я подумал: А не будет ли более благосклонен к моему контенту DTF?

Вот такой пост-эффект в стиле ASCII-art будем разбирать

ASCII-art Fullscreen effect Matt Stark

Но, давайте, сначала вспомним: что это за ASCII-арт такой. Как сообщает нам Википедия: ASCII-графика — это форма изобразительного искусства, использующая символы ASCII на моноширинном экране компьютерного терминала или принтера для представления изображений.

А причем здесь хакеры и Watch dogs?

ASCII-арт, помимо демосцены, частенько встречался в .nfo файлах с crack и keygen архивами. В этих nfo-файлах создатели crack'ов и keygen'ов указывали всякую информацию о своей команде, рисовали теги команды или просто какой-то симпатичный арт. Часто можно было увидеть там символьные черепа, монстров и другую симпатичную жуть, которой, наверняка вдохновлялись Ubisoft для создания логотипа группировки DeadSec.

Так как бы я сделал?

Сделаем fullscreen post-эффект:

1) Вычисляем Luminance

2) Сжимаем картинку до размеров нашей ASCII-картинки в символах. Сколько символов мы хотим чтобы у нас было на экране?

3) Делаем 1D LUT-текстуру с, отсортированными по количеству белого, символами

4) В последнем пассе используем картинку из шага 2 и LUT-текстуру из шага 3 чтобы отрисовать символы в экранную текстуру.

Простор для применения

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

- Можно затенять пиксели символов, я предполагаю будет гораздо более объемная картинка

- Можно сделать цветной и добавить какую-то палитру

- Можно делать ближние символы более яркими, а дальние - тусклыми.

Всем гектаров в имениях и легкости в движениях!

{ "author_name": "Sergey Coremission", "author_type": "self", "tags": [], "comments": 59, "likes": 193, "favorites": 224, "is_advertisement": false, "subsite_label": "gamedev", "id": 98824, "is_wide": false, "is_ugc": true, "date": "Fri, 31 Jan 2020 13:53:21 +0300", "is_special": false }
0
59 комментариев
Популярные
По порядку
Написать комментарий...
45

Пиксель-арт всем надоел, пора завалить стим ASCII-арт играми!

Ответить
2

Могу порекомендовать сей шедевр https://store.steampowered.com/app/603390/Stone_Story_RPG/

Ответить
3

Давно в вишлисте, но стараюсь не играть в игры на стадии "раннего доступа"

И еще вот это жду
https://store.steampowered.com/app/722730/Cogmind/

Ответить
0

кому всем? :)

Ответить
0

Давно уже. См. "Privateer: ASCII Sector". :)

Ответить
24

как-нарисовать-сову.jpg

Ответить

Деревенский утюг

Иван
1

Это не сова.

Ответить
1

тот случай когда хотелось повыёбываться, но оставить мастерство при себе.

Ответить
5

это вы про меня? ну так я скажу это сложно сделать пошаговый туториал, чтобы все были довольны. Я вот делал недавно доклад для девгамма, и около месяца(!) убил на три эффекта. И то, знаете, после доклада в фидбеке было: та все и так было понятно, можно было код не показывать, а просто гифки показать, идеи...

Ответить
4

Можно исходник шейдера запостить для примера.) Будет немножко детальней =)

Ответить
0

Васяны на выход, плиз

Ответить
4

Казалось бы, при чём здесь Обра Динн?

Ответить
2

Не при чем, потому что она имитирует совсем другой эффект.

Ответить
0

Но всё-равно издали напоминает.

Ответить

Деревенский утюг

perfect_genius
2

Женщина тоже издали человека напоминает.
*очень плохая шутка, сильно не бейте.

Ответить
2

А на самом деле это не человек, а богиня.
*исправляю твою очень плохую шутку.

Ответить

Деревенский утюг

Станисл…
1

Исправление принято.
*исправление отличное.

Ответить
0

Если только причёска и одежда "мужские".

Ответить
1

Хм, я бы поиграл в 3д-игры с таким графином.

Ответить
7

глаза бы вытекли, я думаю :)

Ответить
1

для superhot vr было бы круто)

Ответить
1

Сам о вытекании глаз задумался во время залипания в гифку, но потом вспомнил, например, Return of the Obra Dinn. На этапе выхода трейлера я тож думал, что глаза буду по кусочкам собирать во время игры, но мне очень даже зашло, особенно возможность изменения цветовой схемы (менял каждые 5 минут :)

Ответить

Чеченский волк

Sergey
1

После DF не вытекли

Ответить
0

Ну поэкспериментировать было бы неплохо. Какой-нибудь мод для портала с таким фильтром я бы потыкал

Ответить
3

Uncharted 4. Не благодари.
После прохождения игры можно врубить кучу эффектов, и проходить игру с ними. Хоть тебе комиксовая рисовка, хоть тебе  ASCII 

Ответить
0

Брать пс4 ради такого, нет спасибо

Ответить
0

Покажите мне хоть одного человека который взял PS4 ради ASCII арта в четвёртом анче.
Консоли для удобства берут.

Ответить
0

Поэтому причин брать пс4 кроме этой нету)

Ответить
0

Комментарий удален по просьбе пользователя

Ответить
2

Для VLC есть плагин, который видео превращает в нечто подобное.
https://www.youtube.com/watch?v=wGOm9z7bugQ

Ответить
0

Круть. Спасибо за комент по теме. 

Ответить
1

В Return of the Obra Dinn не асцаяй но что-то похожее

Ответить
0

в freestyle есть такой фильтр.

Ответить
0

Чо за фристайл?

Ответить
0

Хреновина из geforce experience. Позволяет накладывать всякие фильтры по верх игр.

Ответить
0

У меня амд(

Ответить
0

Ну freestyle по сути встроенный в experience решейд. Можно попробовать поставить решейд с соответствующим  шейдером. Должно получится то же самое.

Ответить
0

Темные места набраны не символами же.

Ответить
0

Наверное можно настроить, там много настроек. Я не вникал. Просто написал, что подобное можно сделать.

Ответить
3

Только настроилась на дельную статью, а она закончилась. Не бойтесь куски кода вставлять или хоть ссылку на гитхаб в конце. А так рубрика была бы очень интересна и нужна.

Ответить
3

 не вдаваясь в детали

Вот уж действительно.

Ответить
0

то есть просто ничё в статье и нет? может её в мусор убрать, пока в ней не появится инфа

Ответить

Центральный алмаз

1

Пример анимации демонстрирует сильную сторону алгоритма в оттенках теней в нижней части сцены.
Решить проблему сглаживания, которая, собственно, и составляет техническую сторону ASCII-арта - это был бы прорыв. В примере это видно на переходе от темноты к краю площадки: используются "11))):::" по принципу интенсивности закраски всего знакоместа, но не используются символы нижнего регистра, без которых не обошёлся бы живой художник, для закраски только нижней половины знакоместа.

Ответить
1

Вы, наверное, имели в виду слабую сторону, а не сильную?

Я предполагаю, что можно сделать так: расширить "палитру" в LUT текстуре,— добавить больше символов и сортировать не только по интенсивности, но и и по расположению в знакоместе. Тогда можно сделать маленькую картинку например в 4х больше и на последнем шаге семплировать окрестности пикселя для выбора символа с правильным расположнием в знакоместе, надо пробовать в общем!

Ответить

Центральный алмаз

Sergey
0

Человеческая традиция ASCII-арта дошла до более скромной палитры, такие тонкие ходы, как KKKKYYYY - заслуга алгоритма.
Да, сортировка по расположению должна сильно помочь.

Ответить
0

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

Ответить
0

Так легко ведь, 1D тестура, а в ней: интенсивность 0.1 (верх, право, низ, лево), 0.2 (верх, право, низ, лево) и тд... 

Ответить
1

в ReShade есть такой подключаемый модуль

Ответить
1

при чем как часть sweetfx он есть уже кучу времени, автор решил собрать велосипед.

Ответить

Чеченский волк

Диспейр
0

И как его использовать?

Ответить
1

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

Ответить
1

Не знаю, насколько я понял алгоритм, но мне видится на верхнем уровне так:
- изображение на экране даунскейлится так, чтобы 1 пиксель полученного изображения соответствовал по размеру 1 символу ASCII
- изображение переводится в монохром
- для каждого пикселя вычисляется значение яркости
- каждый пиксель изображения в реальном времени заменяется символом, соответствующим яркости пикселя (точка - самый темный, тк меньше всего цвета, 0 - самый яркий, так как символ детальный и занимает почти все свое пространство
- символы выводятся поверх черного фона синхронно с изображением, поверх него

Ответить
0

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

Ответить
0

А попроще и на какой программе делать?
P.s. скажем так добавить этот эффект на пару секунд для amv/gmv в vegas/after effects

Ответить

Комментарии

{ "jsPath": "/static/build/dtf.ru/specials/DeliveryCheats/js/all.min.js?v=05.02.2020", "cssPath": "/static/build/dtf.ru/specials/DeliveryCheats/styles/all.min.css?v=05.02.2020", "fontsPath": "https://fonts.googleapis.com/css?family=Roboto+Mono:400,700,700i&subset=cyrillic" }
null