2 поста
Что мы знаем о боли? Игра ALBION подскажет нам, когда попросит ввести код доступа на дверной панели с помощью бегунка
Максимальное значение бегунка 99999, код надо ввести 1042. Угадайте шаг бегунка, если двигать его, а не жать кнопки со стрелочками :)
Дрожь Вершин. Работает на Unity 6.
Что то я подзабил на продолжение банкета с ретро-рендерингом и его упрощением, а ведь работы еще достаточно много. Штош, исправляюсь.
Как обычно пара вступительных слов: для ЛЛ ссылка на гитхаб в конце и мой дисклеймер - я ни разу не программист шейдеров, и зачастую понятия не имею, что делаю и зачем, но методом проб и ошибок это начинает работать.
В предыдущей статье мы реализовали довольно неплохой эффект старого рендера из ранних 90х. Однако, ощущения от него будут неполными, если мы не введем другие характерные для того времени ограничения. Нет-нет, 10 фпс и имитацию слабых компьютеров вводить не будем, но постараемся ввести один значимый для ретро-рендера эффект. Возможно он не является частью общей парадигмы, особенно в области рендеринга на РС, но добавит особую атмосферу. Речь идет, конечно же, об эффекте дрожания вершин, характерный для Playstation 1.
Эффект «дрожания вершин» в PlayStation 1, был следствием ограниченной точности расчетов, использовавшихся на этом железе. Поскольку PlayStation 1 использовала фиксированную точку для вычисления координат вершин, это приводило к визуальным артефактам, когда позиции вершин «дрожали» при перемещении камеры или объектов. Мы, как и в прошлый раз, попробуем воссоздать данный эффект только с помощью шейдера в Unity, без использования дополнительных скриптов на C#.
Основная идея простая — нужно будет обойти все доступные шейдеру вершины и округлить их позиции относительно проекционных координат .
Напишем заготовку для шейдера, в которой укажем будущие параметры для материалы и объявим структуры и переменные.
Здесь мы задаём два параметра для будущего материала: _MainTex — текстура и _JitterAmount — слайдер для точной настройки силы эффекта дрожания.
Еще нам, конечно же, понадобятся две структуры:
appdata — данные вершин, передаваемые в вершинный шейдер из Unity
v2f — данные, передаваемые из вершинного шейдера в пиксельный шейдер и, в конечном итоге, в графический конвейер
Добавим функцию округления позиций вершин. Мы применяем округление только к clipPos.xy, то есть к координатам, которые уже находятся в проекционных координатах (после всех трансформаций объекта). Это даст эффект «дрожания», как на PlayStation 1, когда камера или объект движется. Параметр clipPos будет передаваться в функцию, как и параметр jitterAmount, который позволяет контролировать, насколько сильным будет эффект дрожания.
Округление в clip space означает, что каждая вершина будет «привязана» к определенным фиксированным позициям на экране. При движении камеры или объекта из-за этого квантования вершины будут перескакивать с одного положения на другое, создавая желаемый эффект «дрожания».
Пишем «вершинный» блок шейдера.
Здесь мы сначала получаем clipPos функцией UnityObjectToClipPos для нашей вершины. Затем получаем новую позицию вершины через вызов написанной ранее функции JitterVertex, которой передаем полученный clipPos и наш параметр _JitterAmount из инспектора.
Возвращаем новые данные вершины. UV-координаты оставляем без изменений.
Параметр _JitterAmount нужно держать в пределах от 0.01 до 0.1, этого достаточно для заметного эффекта. Однако, никто не запрещает эксперименты — все ваших руках.
Осталось только добавить фрагментную (пиксельную) часть, в которой мы просто отдаем текстуру, как есть.
Полный код шейдера лучше посмотреть в репозитории. Выкладывать картинку сюда было бы издевательством )
Шейдер использует стандартную текстуру, которую можно задать в Unity через инспектор. Текстура рендерится через стандартную функцию tex2D, которая отображает текстуру по UV-координатам, переданным из вершинного шейдера. С помощью бегунка _JitterAmount плавно регулируем эффект дрожания. В зависимости от проекта, свойства самой текстуры настраиваются индивидуально, но стилистически, конечно же, желательно выключить фильтрацию и использовать текстуры с небольшим разрешением, вроде 64х64 или 128х128.
По итогу, мы имеем простой, но эффективный шейдер для добавления эффекта дрожания, которые совместно с шейдером олдскульного рендеринга из прошлой статьи даст нам интересный ламповый эффект ретро-гейминга. Однако это далеко не все.
В следующих статьях мы попытаемся дополнить его необходимыми расширениям, добавив эффекты прозрачности через альфаканал текстуры (или отдельной альфа-текстуры), с учетом особенностей прозрачности ретрорендеров, эффекты искажения текстур и прочие интересные элементы, вроде имитации афинных искажений, которых все еще не хватает в нашем новом шейдере.
Ссылка на github: https://github.com/rikovmike/YetAnotherVertexJitter
У меня только один кадр в голове
2009 год стал для меня незабываемым и ламповым временем, полным ярких моментов и простых радостей. Мы часто собирались с друзьями, вечеринки проходили в домах, где царила атмосфера искренности и веселья. Общение происходило вживую, ведь социальные сети только начинали набирать популярность, и MySpace был одним из любимых мест для обмена музыкой и новостями. В это время мы открывали для себя множество новых групп и направлений, обсуждая их звучание с неподдельным восторгом.
Ностальгия по тем вечерам вызывает у меня тепло в душе: мы вместе смотрели фильмы на DVD, смеялись над комедиями и восхищались фантастикой. Музыка звучала из колонок, создавая особую атмосферу, а угощения были простыми, но ароматными. Часто мы прогуливались по городу, наслаждаясь свежим воздухом и откровенными разговорами. 2009 год стал символом беззаботности и дружбы, когда всё было просто и искренне. Несмотря на скорость изменений в мире, именно этот год оставил в сердце светлые воспоминания и ощущение тепла, а так же полной уверенности, что я напизжу этот текст сегодня.
Самая странная вечеринка в честь Дня рождения, на которой я когда-либо бывал, проходила в заброшенном доме на окраине города. Именинник решил отметить свой день с тематикой "Мистический вечер". Все гости пришли в необычных костюмах: я увидел людей в нарядах вампиров, привидений и даже в костюмах существ из старинных легенд.
Сам дом был украшен странными предметами: паутиной, свечами и загадочными артефактами. Атмосфера была насыщена чем-то необычным, и легкий холодок пробегал по спине. В процессе вечеринки кто-то предложил сыграть в "духовный сеанс", что вызвало бурю эмоций. Мы сели в круг, держась за руки, и попытались вызвать "духа" с помощью старинной Вуду-куклы.
На столе были экзотические закуски, такие как черные резинки и зеленое желе, что добавляло странностей в угощение. Тортик оказался с вкусом лаврового листа, что удивило всех присутствующих.
Вечеринка закончилась неожиданным дождем из искусственного снега, который словно бы спустился с потолка, создавая волшебное, но в то же время беспокойное настроение. Это была одна из самых запоминающихся и странных вечеринок, о которых я когда либо так качественно пиздел.
Вы все просто невероятные!
И ты, и ты, и ты, и вот ты, и даже ты!
Первые 3 дня телефон разряжался быстрее обычного от постоянного потока уведомлений, будто я знаменитость, которой пишут круглые сутки поклонники :) Классные и смешные суммы, вроде 49.50 и приятные сообщения вдогонку. Лучшие дни за последнее время! Спасибо вам всем огромное. Вы все - брестейкинг!
Итак, за 6 дней прилетело потрясающе много!
Сбер 1 - 24 537,74
Тинькоф - 9 136,54
ВТБ - 661,4
Всего 34 335,68
На момент написания поста продолжают прилетать, поэтому итоговая сумма будет чуток побольше. Сейчас предотпускная пора и работы на работе втрое больше - аврал за авралом, задача сделать максимум перед отпускным затишьем, поэтому потратить это все не успел, но на желанное, о чем писал в группе, уже отложено. Коту будет куплен новый точильный домик, псу диванчик, обоим естественно вкусноты. Детей ждет в отпуске сюрприз :)
Как и обещал, продолжу традицию - 10% от собранного будет отправлено победителю 41й фабрики, а именно 3 433,57 рублей.
Всем участникам желаю удачи, сам я совершенно не ждал выигрыша. Меня вон даже искали всю пятницу, думали, что я не существую. С первого раза и не понял, почему мне пишут незнакомые люди, чуть не заблочил за спам. А потом кааак понял :):)
Еще раз спасибо всем! Спасибо Фабрике! Спасибо @TheLaughtingMan! Спасибо родной Пикабу!
Самое невероятное, что могло произойти - произошло именно сейчас, и именно на 40й фабрике, когда счастливым для меня стало странное число 40, чуть больше месяца назад вошедшее в мою жизнь...
Итак, разрешите представиться - rikshaspal, в миру Михаил, мне 40 лет, я пикабушник и вот мой кот:
На Пикабу
Волею судеб, пришедши на Пикабу впервые, надолго засел в ранге безмолвного читателя, затем была некоторая пауза, в которой я, разочарованный в интернетах, пытался найти себя в разном, потом снова восхитительный, сладостный роман с Горячим, постепенное становления меня как комментатора, плотный, вязкий заплыв в "политике", чудодейственное прозрение и освобождение от нее и ... я решился таки на редкое авторство, получив аж трёх самых классных на этой планете подписчиков. Посты мои связаны с одним из моих странных, но далеко не редких хоббей - разработка странных игрух, в которые никто не играет. (Одну из них даже постили в бумажном Game.EXE лет 20 назад, такого уровня я знаменитость)
В миру
Родился я в славном городе Пятигорске, последние 24 года живу и работаю, соответственно, в Москве ). В детстве я был, как и положено, знатным задротом, что на чотких КМВ не особо было в почёте, особенно в 90х. Так что во взрослость я вошел широким шагом уже в столице.
Как уже писал выше - увлекаюсь я разработкой игрух, но с этого не зарабатываю, так что конкретно это увлечение - именно увлечение, приносящее скорее спокойствие и мир в мою голову.
Помимо этого, сколько себя помню, люблю музыку, люблю ваять музыку, в студенчестве - в основном какашечную электронику, сейчас стал попроще. С детства так же люблю паяльник и орудовать им, делаю это до сих пор. Да и вообще, со временем, стал любить делать что то руками - попаять трубы, попилить дерево на сарай - все это придает какое то умиротворение..
Работаю я в сфере образования, но к самому образованию отношения имею мало - я простой разработчик ))
У меня есть любимая семья, две дочери - 17 и 6 лет, кот и пёс. В общем, полная обойма. Недавно купил наконец участок и начал строить маленькую дачку, стартовав от бытовки, расширяя ее до чего-то приятного глазу и сердцу. Место моей силы, отрываюсь там руками со всего размаху.
В жизни
В жизни не признаю возрастов. Я часто дурачусь, гажу как школьник тупизной в комментах и вообще развлекаюсь как и раньше. Постоянно гонял на Игромир, пока он был жив, расхаживая в толпах школоты. Люблю орать в караоке, ненавижу обращение ко мне "дядя Миша", в общем, фиг я вам живым дамся, пенсионцы! Играю с детьми во все что играется, потому что хочется именно играть.
Не курю, особо не пью, хотя иногда могу и расслабиться. Не считаю, что в жизни все должно быть категорично. Не люблю жизнь как у роботов. Я, конечно, не живу одним днём, но и про этот день я не забываю.
Что ж, приятно было познакомиться, пожалуй не буду превращать знакомство в длиннопост.
Всем большое спасибо! Спасибо Фабрике и ее создателю! Спасибо Пикабу!
Для начала сразу оговорюсь – да, я в курсе, что подобного днища на маркетах Юнити и прочих систем овердофига и публика уже изрядно подустала от подобных сверхфишек. Но если есть чем поделиться – почему бы и не поделиться? В конце концов, если это пригодится хотя бы одному человеку – значит это было не зря. Ссылка на гитхаб - в конце поста.
Отмечу лишь, что я ни разу не программист шейдеров, и зачастую понятия не имею, что делаю и зачем, но методом проб и ошибок это начинает работать.
Участие в ряде конкурсов по игроделанью в роли криводела с каждым разом подталкивало меня к идее своего варианта олдскульного рендера, способного подвести картинку к теплым временам, когда игры выжигали глаза и рушили психику своей непреодолимой сложностью и кривым управлением. Святые времена.
Основной упор своей реализации я хотел сделать на минимизацию количества исходных файлов – чтобы из кода был только шейдер, без дополнительных управляющих скриптов, как во многих доступных ассетах. Весь эффект состоит из файла шейдера, файла палитры и файла-маски дизеринга.
Основная идея заключается в следующем – рендерим все, что происходит на сцене в рендер-текстуру какого-нибудь приятного олдскульного размера 320x200, которую затем пускаем под шейдер, задача которого – обрезать палитру до нужной и, если надо, наложить приятный дизер-эффект на нужные места. Потом рисуем нашу текстуру во весь экран.
Итак, создадим чистый проект в Unity. Так как я хочу стилизовать картинку под 4 цвета cga-палиры, 3D будет не особо уместно использовать для демонстрации (но это не значит, что в 3Д проектах этого нельзя делать – все в руках создателей). Выбираю шаблон 2D (URP).
Для затравки и тестов возьмем из интернетов какую-нибудь крутую картинку. Я нашел фото кибертянки из трейлера фильма Cyberbride, рейтинг которого 2,7 на imdb. Идеально.
Импортируем ее в проект, сразу закидываем на сцену без каких-либо настроек. Теперь нам необходимо подготовить «железную» основу нашего будущего рендера, прежде чем мы начнем использовать шейдер. Создаем рендер-текстуру размером 320х200. Отключаем обязательно фильтрацию – олдскул все-таки.
Теперь берем камеру сцены и в блоке Output в параметр Output texture подкидываем нашу рендер-текстуру. В окне вывода Game сразу появится дурацкая надпись, что нет камер, рендерящих в экран. Жмем три вертикальные точки справа вверху и снимаем галочку с «Warn If No Cameras Rendering».
Теперь добавим на сцену Canvas. В блоке “Canvas Scaler“ в параметре UI Scale Mode выставим ему «Scale with Screen Size», а в Reference Resolution – наши 320х200. Добавим к этому Canvas дочерним элементом Raw Image. Ему в texture забрасываем нашу рендер-текстуру. И накидываем на него компонент Aspect Ratio Filter, у которого выставляем Mode в “Fit In Parent”, а сам Aspect Ratio ставим 1.6 (что соответствует 320х200).
Остался один необязательный момент, но для приятных ощущений лучше его сделать. Во вкладке Game, там, где красуется Free Aspect, добавим разрешение 640х400. Картинка станет приятнее, да и эффект удвоения на наших экранах все же выглядит поинтереснее. (если у вас 2к или 4к монитор, возможно лучше добавить утроенное, а то и учетверенное разрешение предпросмотра)
Все. База готова. Она стандартная, она обычная. Ничего нового нет. Можно конечно рендерить и в более высоком разрешении, но мне теплее старые добрые жесткие пиксели.
Если видим, что рендерится все так как надо, то можно подключать шейдер. Импортируем сам шейдер, картинку дизеринга и картинку с палитрой. У обоих картинок нужно выключить сжатие и фильтрацию, а у дизеринга нужно выставить Repeat в параметре Wrap Mode.
Создаем новый материал, указываем ему шейдер Rikovmike/LimitPaletteRaw, закидываем рендер-текстуру, палитру и дизер-картинку в соответствующие им параметры параметры и кидаем этот материал на RawImage, которая у нас в Canvas (чистую текстуру с него можно уже и убрать).
Изменения будут видны сразу. В параметрах шейдера нужно выставить количество цветов в палитре (почему руками – опишу чуть ниже), а также можно включить или выключить дизеринг и настроить его уровень.
Ну и на самом спрайте можно подкрутить яркость в параметре Color, если картинка будет засвеченной. У меня вышло так:
То же, но с палитрой sweetie16 с сайта lospec.com:
Теперь немного о том, как работает шейдер.
Во фрагментной части сначала цвет входящего пикселя сравнивается по очереди с каждым пикселем текстуры палитры. Сравнение происходит простым вычислением дистанции между векторами цветов и выбирается цвет с самой малой дистанцией – он и считается максимально приближенным к искомому в палитре. Подход спорный, но быстрый и достаточно точный. В рамках палитровых ограничений до 128 цветов особых тонкостей выборки цвета не должно вылезать.
Итак, найденный в палитре максимально близкий цвет подставляется на вывод вместо оригинального.
Далее следует блок обработки дизеринга. Зона дизеринга определяется особым условием – насколько «недолетел» проверяемый цвет до нужного, то есть какая финальная дистанция была рассчитана в момент окончательного утверждения выбранного цвета палитры. Дистанция в принципе варьируется от 0 до 1, так как все компоненты цвета (альфу мы тут не учитываем) изменяются в тех же пределах. Нетрудно выяснить и степень «недолета» цвета до нужного. Все эти непонятные недолеты превращаются в шашечки. Уровень недолетаемости определяется бегунком Dither Treshold, который по умолчанию равен 0.5. То есть если недолет был почти в половину цветового пространства – значит точно дизерить.
А вот цвета перехода определяются проще – для этого введены дополнительные переменные, хранящие «предыдущий» проверяемый в палитре цвет. И дальше в блоке обработки дизеринга сначала выбирается из текстуры дизеринга текущий по координатам сетки дизеринга пиксель. Если он белый, то рисуется найденный цвет, если он черный – рисуется предыдущий по дальности цвет.
Подход может быть и спорный, но дает достаточно правдоподобный эффект и работает на любых палитрах. Главное подобрать правильный Dither Treshold.
А теперь немного о параметре количества цветов.
Да, суть в том, что он используется в цикле обхода текстуры палитры попиксельно. И да, вместо него можно приспособить значение из _TexelSize текстуры палитры. Но мне показалось, что удобно все равно иметь в руках инструмент ручного ограничения палитры. В бОльшую сторону ничего плохого не случится, в меньшую же – есть интересные эффекты обрезки палитры. В любом случае, можно попробовать избавиться от этого параметра и взять количество цветов из ширины текстуры палитры.
Отмечу, что пробовал подсовывать под стандартные демки Unity, с небольшими твиками по свету выходило неплохо, например, в Lost Crypt:
Скачать все необходимое (шейдер, дизер и палитру) можно тут:
https://github.com/rikovmike/LimitPaletteRaw
Теоретически, шейдер можно приспособить не только к Юнити, но я слишком ленив для проверки этого. Исходник шейдера я постарался разбавить комментариями, насколько смог :)
