Gamedev
Sergey Coremission
3660

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": 226, "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
{ "id": 98824, "author_id": 154059, "diff_limit": 1000, "urls": {"diff":"\/comments\/98824\/get","add":"\/comments\/98824\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/98824"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 64954, "last_count_and_date": null }
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

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

Ответить
2

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

Ответить
2

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

Ответить
1

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

Ответить
0

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

Ответить
1

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

Ответить
7

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

Ответить
1

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

Ответить
1

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

Ответить
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

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

Ответить
1

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

Ответить
0

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

Ответить
1

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

Ответить
1

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

Ответить
0

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

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

Ответить
0

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

Ответить
0

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

Ответить
0

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

Ответить
1

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

Ответить
0

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

Ответить
0

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

Ответить
[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fizc" } } }, { "id": 4, "label": "Article Branding", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cfovz", "p2": "glug" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "clmf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "clmf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-250597-0", "render_to": "inpage_VI-250597-0-1134314964", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=clmf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Баннер в ленте на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudo", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "chvjx", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fzvc" } } }, { "id": 20, "label": "Кнопка в сайдбаре", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "chfbl", "p2": "gnwc" } } } ] { "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJwcm9qZWN0SWQiOiI1ZTRmZjUyNjYyOGE2Yzc4NDQxNWY0ZGMiLCJpYXQiOjE1ODI1MzY0Nzd9.BFsYFBgalfu_3oH9Fj-oBhiEgVx976VQfprRahAELFQ", "release": "44bde710" }
{ "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" }