Раздача MK Toon - Stylized Shader мультяшно стилизованный шейдера на Unity Asset Store от Продавца недели Michael Kremmel
MK Toon — это стилизованный шейдер, который позволяет добиться очень стильного и уникального нефотореалистичного шейдинга. Он может охватывать широкий спектр художественных стилей и предлагает глубокий уровень настройки.
Встроенный конвейер рендеринга — это конвейер рендеринга Unity по умолчанию. Это конвейер рендеринга общего назначения с ограниченными возможностями настройки. Универсальный конвейер рендеринга (URP) — это конвейер рендеринга с поддержкой сценариев, который легко и быстро настраивается и позволяет создавать оптимизированную графику для широкого спектра платформ. Конвейер рендеринга высокого разрешения (HDRP) — это конвейер рендеринга с поддержкой сценариев, который позволяет создавать передовую высококачественную графику на высокопроизводительных платформах.
Дополнительная информация о совместимости
Рекомендуемая версия редактора: 2020.3 или выше.
Поддерживаемые конвейеры рендеринга:
Встроенный
Универсальный (3D визуализатор)
MK Toon - Stylized Shader — это удобный для художника и многофункциональный стилизованный шейдер, который позволяет создавать очень индивидуальные и уникальные не фотореалистичные визуальные эффекты. Он может охватывать широкий спектр художественных стилей. Пакет включает в себя стандартные варианты шейдеров и шейдеров частиц.
Чтобы обеспечить простой в использовании адаптивный рабочий процесс, редактор пользовательских материалов настроен для художников. Каждую функцию можно комбинировать друг с другом для создания нового уникального стиля.
Нажимаем купить
и в корзинке вписываем
Промокод: MKTOON
жмем применить и получаем
Красота Minecraft
Morrowind Remaster на ПК (Windows, MAC, Linux). Релиз, середина февраля. Разница РеШейдов (Скрины)
Здарова, народ!) Хочу в этом посте, показать наглядно, разницу в РеШейдах.
(Вы, можете переключать их, во время игры, одним нажатием клавиши)
Вк: https://vk.com/club218356942
Дискорд: https://discord.gg/gZrJGVqx9G
ССЫЛКИ, на АКТУАЛЬНЫЕ АНДРОИД версии игры, вы найдете в ВК.
(На пикабу СТАРАЯ версия)
Предыдущий пост со скринами
Morrowind Remaster ПК (Mac тоже). Выход февраль. (Скриншоты)
P.S. (качество графики, среднее, я не знаю, зачем Пикабу затемняет скрины)
Пример, небольшого изменена яркость в игре, с теме же Решейдами.
Вообщем, можно подобрать картинку, под свой вкус.
Еще один demake–шейдер или рубка палитры с плеча в Unity
Для начала сразу оговорюсь – да, я в курсе, что подобного днища на маркетах Юнити и прочих систем овердофига и публика уже изрядно подустала от подобных сверхфишек. Но если есть чем поделиться – почему бы и не поделиться? В конце концов, если это пригодится хотя бы одному человеку – значит это было не зря. Ссылка на гитхаб - в конце поста.
Отмечу лишь, что я ни разу не программист шейдеров, и зачастую понятия не имею, что делаю и зачем, но методом проб и ошибок это начинает работать.
Участие в ряде конкурсов по игроделанью в роли криводела с каждым разом подталкивало меня к идее своего варианта олдскульного рендера, способного подвести картинку к теплым временам, когда игры выжигали глаза и рушили психику своей непреодолимой сложностью и кривым управлением. Святые времена.
Основной упор своей реализации я хотел сделать на минимизацию количества исходных файлов – чтобы из кода был только шейдер, без дополнительных управляющих скриптов, как во многих доступных ассетах. Весь эффект состоит из файла шейдера, файла палитры и файла-маски дизеринга.
Основная идея заключается в следующем – рендерим все, что происходит на сцене в рендер-текстуру какого-нибудь приятного олдскульного размера 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
Теоретически, шейдер можно приспособить не только к Юнити, но я слишком ленив для проверки этого. Исходник шейдера я постарался разбавить комментариями, насколько смог :)
«Нефелия: Сквозь облака»: полезные ассеты для неба и погоды
Всем привет, мы делаем ролевую игру/симулятор дирижабля «Нефелия: Сквозь облака» и я хотел рассказать про адаптацию чужих ассетов и создание своих ассетов для неба и облаков.
Небо в проекте — по сути, одна из главных сущностей, с которыми игроку предстоит взаимодействовать: преодолевать или использовать в своих интересах потоки ветра; высокое и низкое давление; грозовые тучи и туманы. Поэтому его визуал имеет важное значение. После правок, не касавшихся визуала напрямую, пришлось перекроить планы и заняться именно им.
Мир в игре постоянно генерируется вокруг нашего дирижабля при полёте в соответствии с биомом глобальной карты. От настроек биома зависит, насколько часто мы будем попадать в грозу, лететь в потоке ветра, собирать местные летающие одноклеточные растения и воду из облаков, а также (в планах) охотиться на инопланетную мегафауну и воевать (или торговать) с другими дирижаблями. Проблема была в том, что дальность прорисовки мира составляла довольно жалкие 800 метров в каждую сторону, примерно как на этом скриншоте:
При попытке хотя бы немного её увеличить fps просто катастрофически падал. Прочие способы оптимизации уже себя исчерпали: переход на пул объектов, появившийся в последних версиях Unity, лишь чуть улучшил положение, добавление LOD к моделям облаков тоже особо ничего не дало. Можно было решить эту проблему в стиле Silent Hill, но это превратило бы окружающее пространство в равномерную неинтересную серую стену. Завихрения тумана хорошо смотрятся, если хотя бы что-то проглядывается за туманом, а на фоне более далёкого слоя тумана будет выглядеть аналогично заливке одним цветом. К тому же, для облаков использовались 3d-модели с обычными вершинами, пусть и с анимирующим их шейдером (ассет Stylized clouds pack), а хотелось в итоге прийти к более реалистичному отображению. Поэтому пришлось вернуться к тому, что под разными предлогами (на самом деле — достаточно существенными вроде реализации кор-механик) откладывал больше года: нужно начинать адаптировать давно купленный ассет под названием SkyMaster. Почему так не хотелось этим заниматься?
Во-первых, мне гораздо проще взять небольшой ассет с минимумом функций, разобраться в том, как он работает, и добавить необходимый функционал (например, мне не хватало тегов в отдельных выборах в нарративном движке Ink, я добавил их поддержку), чем разбираться в монструозном большом комбайне. Но у таких комбайнов есть хорошая особенность: они могут работать сразу из коробки, если у вас плюс-минус стандартная ситуация. Вот только при любом отклонении от стандартных условий большая часть фич начинает работать не так, как нужно. Если в принципе начинает. На скриншоте внизу только малая часть настроек:
Вторая причина более специфична для ассетов для погоды в целом — они в основном заточены на игры, в которых небо является фоном для происходящего на земле. То есть во всём «мире» будет везде одна и та же погода (пусть и настраиваемая). Все облака будут рисоваться одним шейдером за один draw-call. Но при этом теряется возможность отдать обратно на уровень C# данные о тех участках неба, которые стали облаками в соответствии с действовавшим на стороне GPU алгоритмом их генерации. С точки зрения производительности это самое оптимальное решение. Если на облака можно просто смотреть, или даже просто летать сквозь них без каких-либо изменений с точки зрения геймплея, в этом нет никакой проблемы.
Если облака должны быть интерактивными объектами со своим коллайдером (например, при попадании в тучу окружающее давление падает и дирижабль снижается, если не начать выбрасывать балласт), а не просто декорацией, использовать нарисованные за один проход системы глобальной генерации облаков становится невозможно. К тому же, в таких системах не получится отрисовать грозу где-то вдалеке, а не там, где мы сейчас: во всём игровом мире будет одна и та же погода.
К счастью, в ходе переписки с автором SkyMaster удалось узнать, что кроме систем облаков на шейдерах есть ещё возможность использовать кастомные системы частиц. Идея довольно проста: кто сказал, что в трёхмерной игре обязательно нужны по-настоящему трёхмерные эффекты? Часто хватает нескольких биллбордов (всегда обращённых к камере полигонов), на которых показывается похожая на трёхмерный объект анимация или добавляется имитация объёма для каждой частицы с помощью специального шейдера. Для первого способа у Unity есть свой туториал, где используются анимированные текстуры (flipbooks).
Второй способ используется в SkyMaster и позволяет располагать облака именно там, где захотел спавнер, и в целом действовать почти как раньше, когда это были простые модели из полигонов. В дальнейшем стало ясно, что второй способ больше подходит для кучевых облаков, а с помощью первого можно ограниченно имитировать перистые, хотя для них, конечно, лучше всего подходят настоящие 3d-облака с процедурной отрисовкой через шейдер (в случае URP это происходит через модификацию графического пайплайна — render feature). Шейдерные облака в SkyMaster выглядят так:
А так выглядят псевдо-трёхмерные облака на основе систем частиц:
Всё бы хорошо, но после простой замены предыдущих облаков на системы частиц производительность сразу упала примерно на 10 кадров в секунду. Правда, потом оказалось, что если вместо десятка мелких облаков рисовать одно большое + уменьшить число одновременно существующих частиц, ресурсов тратится существенно меньше, чем до всех изменений, и теперь можно просчитывать окружающий мир в радиусе 4 километров, о чём раньше и думать было нельзя. Но необходимость увеличения облаков привела к большому количеству изменений геймплея: например, раньше имела смысл попытка срезать путь через грозу, лавируя между небольшими тучами, а теперь гроза — просто способ рассечь линейное пространство + место, где можно зарядить конденсаторы, поймав молнию громоотводом.
Раньше гроза выглядела так:А теперь - примерно так:
В целом, не стоит сразу пытаться начинать делать проект с финальной графикой, но лучше изначально понимать, какого класса решения будут использоваться для визуала, потому что существенные изменения в процессе разработки могут задеть и геймплей.
После того, как облака из систем частиц хорошо себя показали, появилось желание адаптировать и другие фишки SkyMaster: молнии и динамический скайбокс.
С молниями ничего не получилось по причине того, что ассет в целом не ориентирован на области с различной погодой в них: можно статически определить параллелепипед, внутри которого будут молнии (предполагается, что это и будет весь игровой мир, если мы «включили» в нём грозу), но динамически добавлять и убирать точки спавна молний или привязать их к префабу облака как с системой частиц здесь не получится. Поэтому пока пришлось использовать собственную систему частиц с трейлами (кстати, трейлы — это один из моментов, в которых старые системы частиц до сих пор превосходят VFX Graph), в дальнейшем планирую перейти на этот ассет.
Примерно такая система частиц используется для отображения молний сейчас:В простейшем случае скайбокс — это «бесконечно далёкая» текстура, которая отрисовывается самой первой в кадре. В случае динамического скайбокса это шейдер, на выходе которого получается окружение, недостижимое для игрока: солнце, луна, далёкие облака и т. д. До того, как руки дошли до переделывания облаков, использовалась статичная текстура из бесплатного ассета AllSky Free.
Неплохие скайбоксы + плюс есть возможность настраивать некоторые параметры вроде оттенка: мне это пригодилось для имитации смены цвета неба при изменении высоты полёта. Но, конечно, это совсем не то, что хотелось бы видеть в итоге.
В SkyMaster есть множество демок с различными настройками для реалистичного неба, но, к сожалению, чтобы нормально настроить свои оттенки неба, нужно быть автором ассета: цвет задаётся 2 градиентами, которые по некоторым законам задают оттенки неба в разное время суток. По словам автора, всё очень физически достоверно, но совершенно недоступно для понимания. Поэтому я плюнул и начал использовать Super simple Skybox от OccaSoftware.
Всё действительно очень просто настраивается через Shader Graph (например, я переделал изменение цвета неба, чтобы оно зависело не только от времени суток, но и от высоты над горизонтом, и к ней же привязал количество фоновых 2d облаков). Единственное, что я пока не осилил — это добавить текстуру луны, чтобы она корректно преобразовывала попавшие в шейдер uv-координаты: получалось, что текстура проецируется на всё небо в целом и фрагмент этой текстуры проецируется на круг, а вместо этого нужно семплировать в пределах круга, который является частью луны в данный момент времени.
Одним шейдером рисуется небо, фоновые облака, звёзды, луна, закаты и восходы. Правда, на пользователе целиком остаётся реализация вращения светил для смены дня и ночи: необходимо назначить 2 источника света в сцене на роль солнца и луны, корректно вращать их, плавно включать и выключать на закате и восходе — но в целом в этом уже нет ничего сложного.
Эффект объёмного света взят из другого ассета того же автора - LSPP
Оказалось, у Occa Software действует программа, по которой они бесплатно отдают ещё один свой ассет в обмен на положительный отзыв в AssetStore. Попросил у них более продвинутый скайбокс Altos и получил промокод на него.
Хорошо в этом ассете то, что уже есть нормальная смена дня и ночи из коробки, а также текстура луны и по-настоящему трёхмерные облака, которые можно расположить в качестве фоновых. Плохо то, что на границе между обычными моделями и полупрозрачными системами частиц появляются артефакты, далёкие объекты заливаются одним цветом и игнорируют полупрозрачные перед ними + производительность сразу ощутимо падает. Если бы я использовал этот ассет для игры, действие которой происходит на земле, он был бы однозначным фаворитом среди всего перепробованного в плане сочетания большого количества фич и простоты их настройки, но увы.
Часть летучей платформы, скрытая тучей, закрасилась в один цвет, что-то аналогичное произошло с тонкими деталями такелажа дирижабля:В следующей статье напишу о том, что использовалось для моделирования тумана и ветра и что ещё хочется сделать по визуалу.
А в целом по игре мы планируем выпустить очередное техно-демо этой осенью и вертикальный срез к весне. Если в итоге найдём инвестора, то есть вероятность добраться до релиза в 2023. Если, конечно, оставить за скобками все обильно расплодившиеся форс-мажоры этого года.
Буду рад новым подписчикам в девлоге в telegram, группе vk, а также обратной связи по (теперь уже изрядно устаревшей) демке на itch.io
Godot. Путь к основам VFX. Пишем свой outline shader. Ч2
День добрый, уважаемые любители Godot'a. Продолжу мучать шейдер. Начало тут
Godot. Путь к основам VFX. Пишем свой outline shader. Ч1
Напомню на чем остановились, кому интересно это, те наверняка и так увидели проблему, кто поленивее, тем сейчас покажу.
Вот как получается на больших значениях.
Почему так происходит и что это за хрень вообще, на самом деле все очень просто)
В это части и будем это исправлять, тут вообще никакой беды нету и это вобще не значит что это плохой или неправильный код, он просто не нужен для этой задачи, но для понимания как работают шейдеры, он очень даже хорош. Бонусом покажу, что можно замутить из этого казалось бы неправильного кода.
Как видите мы вполне научились делать копию картинки с помощью шейдера, а этого знания уже достаточно чтобы запилить например аналог reflected image из Baldurs Gate
Ну или например для какого-нибудь блинка или фазового смещения можно оставлять шлейф за персонажем, после резкого перемещения. Конечно это можно сделать и создавая копии картинки с помощью gdscript, но зачем нагружать ЦП и память, если можно это переложить на видяху, да и кода будет существенно меньше)
Ну да ладно, если кому это надо и интересно, так напишите в комментах после этой части можно в принципе запилить серию и сделать такой эффект, чтобы можно было его применять в игрушечке сразу.
Вернемся к аутлайну, уже видно что текущий вариант совершенно не годится, если значения превышают какие-то лимиты, да и смещение идет только по горизонтали и вертикали. Все варианты которые я смотрел, так или иначе схожие по смыслу, хоть и разные по реализации. Ну и посетила голову мысль случайная, зачем вообще все это городить, если по сути можно отскейлить картинку до нужного размера, вычесть из отскейленной текущие цвета и получим нужный результат по сути. Так и поступлю пожалуй).
В снипетах есть готовый код скейла его и возьму.
https://godotshaders.com/snippet/scale/
Вставим это дело в шейдер и вычтем исходную картинку.
Ну теперь дело осталось за малым, надо всего лишь покрасить большую картинку цветом из параметров и вернуть назад, исходную картинку.
Ну вот получили нужный результат без всяких проблем с тем больше или меньше картинка.
Тут остается ещё ряд проблем, но велосипед потихоньку начинает ехать и нужный результат становится все ближе и ближе. В следующей части будет разбор как сделать градиентную заливку.
Спасибо за внимание.