Плавающие Острова: Настройка Стилизованных Шейдеров С Использованием Hdrp В Unity

Автор статьи Мацей Герник и главный редактор портала 80.lv Кирилл Токарев любезно разрешили нам сделать этот перевод.

Плавающие острова: настройка стилизованных шейдеров с использованием HDRP в Unity



Мацей Херник обсудил с нами детали своей стилизованной сцены «Плавающие острова»: шейдеры для травы, деревьев и воды, переопределения объема, текстурирование ассетов и многое другое.



Введение

Всем привет! Меня зовут Мачей Херник, я художник-самоучка из Польши.

Сколько себя помню, я всегда любил игры.

Мое знакомство с видеоиграми произошло, когда я увидел несколько из них на PS1. В то время я был ребенком, у меня была мечта, что однажды я буду делать свои собственные игры, хотя я еще понятия не имел, как их делать.

Став старше, я узнал, что такое 3D-искусство, и нашел это очень интересным и увлекательным занятием.

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



Плавающие острова: настройка стилизованных шейдеров с использованием HDRP в Unity

Плавающие острова : идея Вначале эта работа должна была быть открытым проектом, вроде платформы для экспериментов с HDRP в Unity, это помогло бы мне немного ближе познакомиться с набором инструментов HDRP. Однако когда я сделал первые итерации шейдеров растительности и показал их своим друзьям, они вдохновили меня на создание красочной сцены с использованием этих шейдеров.

Именно тогда я решил сделать этот арт в стиле сказки, вдохновленный игрой The Legend of Zelda. И в этой статье я хочу рассмотреть некоторые составляющие из этой работы.

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

Еще я понял, что самые подходящие мне тени и солнечные лучи отбрасывают треугольные деревья.



Плавающие острова: настройка стилизованных шейдеров с использованием HDRP в Unity

Затем я решил разместить первые версии травы и деревьев с правильными шейдерами и материалами и приступить к доработке эффектов воды.

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

Монолит и вода должны были стать центром сцены.

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

В какой-то момент я почувствовал, что одинокий остров не так интересен, как казалось.

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

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

В конце я добавил немного облаков.

Фактически я вручную нарисовал их на самолетах с прозрачностью и заставил их двигаться по небу с помощью аниматора в Unity.

Плавающие острова: настройка стилизованных шейдеров с использованием HDRP в Unity

Создание травы Шейдер травы был одним из первых, созданных для этого проекта.

Однако для достижения наиболее подходящего эффекта было проведено множество итераций.

Я применил более процедурный подход, так как чувствовал, что это будет самый сложный и интересный способ создания травы.

Для создания шейдера я использовал Shader Graph в Unity версии 2020.1.0f1. Давайте посмотрим на ту часть этого шейдера, которая отвечает за рисование.

Он разделен на 4 слоя, каждый из которых представляет цвет. Эти цвета смешиваются с помощью функции Lerp. Эти слои:

  • Основной цвет + Цвет тени (Основной цвет + Цвет тени)
  • Дополнительный цвет
  • Основной цвет
  • Основные моменты


Плавающие острова: настройка стилизованных шейдеров с использованием HDRP в Unity

Основной цвет и цвет тени разделены на две части.

Одна часть — это просто цвет травы, а вторая часть отвечает за нанесение сверху другого цвета.

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

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

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

Вот почему эффект Ambient Occlusion от Ground color очень плохо используется в этой сцене.

Последний слой создает блики в верхней части травы, в зависимости от скорости движения текстуры маски.

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



Плавающие острова: настройка стилизованных шейдеров с использованием HDRP в Unity

Деревья Я создал отдельный шейдер для деревьев и другой растительности, так как он немного отличается от шейдера травы.

На этот раз в качестве основы мы использовали освещенный шейдер (Lit Master Shader).

Благодаря этому я мог очень легко получать информацию о направлении света, а также в HDRP шейдер освещенности (Lit Master Shader) дает возможность управлять полупрозрачностью объекта.

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

Я добился этого в Blender благодаря модификатору Data Transfer, который позволил мне перенести нормали из другого меша в плоскости, составляющие дерево.



Плавающие острова: настройка стилизованных шейдеров с использованием HDRP в Unity

Деревья не имеют диффузной текстуры.

Вместо этого я использовал информацию о направлении света в шейдере.

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

Я также использовал информацию о направлении света, чтобы изменить цвет в освещенной части и в затененной части дерева.

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

Я также реализовал возможность настройки цвета в зависимости от высоты объекта на основе локального значения Y. Это позволило мне создать красивый градиент сверху вниз, что также помогло создать более мягкий переход от земли к дереву.

В конце концов, я решил добавить между листьями тонкую Ambient Occlusion, чтобы немного их разделить.



Плавающие острова: настройка стилизованных шейдеров с использованием HDRP в Unity



Плавающие острова: настройка стилизованных шейдеров с использованием HDRP в Unity



Плавающие острова: настройка стилизованных шейдеров с использованием HDRP в Unity

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

Водопад на самом деле представляет собой смесь двух компонентов:

  • Вода с шейдером воды
  • Частицы пены и пузырьков


Плавающие острова: настройка стилизованных шейдеров с использованием HDRP в Unity

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

Кроме того, я использовал текстуру Waterfall Mask в красном канале, чтобы замаскировать то место, где я хотел скрыть узор от текстуры Вороного, например в начале водопада.

Я добавил несколько частиц для имитации пены и пузырей, используя систему частиц Unity с пользовательской сферической сеткой.

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

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



Плавающие острова: настройка стилизованных шейдеров с использованием HDRP в Unity



Плавающие острова: настройка стилизованных шейдеров с использованием HDRP в Unity

Нерастительные активы Такие активы, как камни, мост и Монолит, я создавал стандартным способом — моделировал их в Blender, «лепил» высокополигональные модели (High Poly) в ZBrush и запекал их на низкополигональные сетки (Low Poly) в Substance Painter.

Плавающие острова: настройка стилизованных шейдеров с использованием HDRP в Unity

В Substance Painter я просто использовал запеченные карты, чтобы придать моделям цвет и детализацию.

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

Хитрость заключается в том, чтобы использовать фильтр «Размытие наклона» на слое «Запеченное освещение» в Substance Painter, который я помещаю поверх всех остальных слоев.

Это позволило мне добиться стилизованного, неоднородного эффекта.



Плавающие острова: настройка стилизованных шейдеров с использованием HDRP в Unity



Плавающие острова: настройка стилизованных шейдеров с использованием HDRP в Unity

Очень важно знать, что слой Baked Lighting добавляет тени к текстуре на основе освещения из окружающей среды в самом Substance Painter. Из-за этого я выбрал среду, не столь направленную с точки зрения освещения.

Лучший способ уменьшить направленное освещение в запеченных текстурах — создать пару слоев запеченного освещения с разными настройками угла поворота.

А затем просто удалите ненужное с помощью маски, чтобы добиться наилучшего результата.



Плавающие острова: настройка стилизованных шейдеров с использованием HDRP в Unity

Настройка громкости Последней частью проекта, о которой я хотел поговорить, был компонент Volume в Unity HDRP, он позволял мне настраивать освещение и постобработку.

В томе я добавил несколько переопределений, которые помогли мне добиться разных эффектов.



Плавающие острова: настройка стилизованных шейдеров с использованием HDRP в Unity

Визуальная среда, HDRI Sky и Контроллер непрямого освещения были добавлены в качестве переопределений, это дало мне немного рассеянного света с неба.

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

Еще одна полезная опция, которую мне очень нравится использовать внутри Unity HDRP, — это Fog и особенно Volumetric Fog. Я обнаружил, что лучший способ его использования — настроить в сцене пару компонентов Density Volume. Density Volume — это компонент, который позволяет вручную настроить область, где будет появляться туман, и насколько сильным он будет в этой области.



Плавающие острова: настройка стилизованных шейдеров с использованием HDRP в Unity

Я также добавил несколько эффектов постобработки к объему.

Потому что мне казалось, что сцена слишком темная, и мне нужно было добавить больше Блум, чтобы добиться сказочного вида, к которому я стремился.

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



Плавающие острова: настройка стилизованных шейдеров с использованием HDRP в Unity



Заключение

Я очень рад, что начал этот проект, хотя это заняло некоторое время.

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

Так что я им благодарен.

Если у вас есть какие-либо вопросы об этой сцене или искусстве в целом, напишите мне по адресу: АртСтанция .

Спасибо за чтение! Пока! Мацей Херник ,Художник уровня Оригинал статьи можно найти на 80.lv. Здесь .

Перевод подготовлен при поддержке проекта Почти готово .

Теги: #gamedev #3d #unity #tutorial #Работа с 3D-графикой #шейдеры #indiedev #hdrp

Вместе с данным постом часто просматривают:

Автор Статьи


Зарегистрирован: 2019-12-10 15:07:06
Баллов опыта: 0
Всего постов на сайте: 0
Всего комментарий на сайте: 0
Dima Manisha

Dima Manisha

Эксперт Wmlog. Профессиональный веб-мастер, SEO-специалист, дизайнер, маркетолог и интернет-предприниматель.