Живописная природа: растения, анимация, шейдеры

Материал переведен специально для Digital Painting Classes и Smirnov School. Оригинал.

Как собрать мир по кусочкам? Драгош Матковски решил задачу на свой манер: сделал набор стилизованного 3D-окружения The Illustrated Nature, который уже доступен в Unity Asset Store за 50 долларов. В нём собраны элементы окружения для всех, кто хочет рассказать историю в красочном и живописном мире, но не может построить его сам. Драгош рассказал, как создавались модули.

Живописная природа: растения, анимация, шейдеры, image #1

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

Живописная природа: растения, анимация, шейдеры, image #2

Каждый кадр — картина

Всё началось с эксперимента. Я совместил цифровые мазки кистью с 3D-геометрией, чтобы создать сцену, которая была бы похожа на рисунок. Мне не нужен был реализм — я просто искал живописный вид в 3D.

Моей главной задачей было достичь живописного вида в каждом кадре. Изучение рисунков позволило мне лучше понять, как формы, цвета, свет и композиция вместе создают прекрасное изображение. Этот поиск воплотился в The Illustrated Nature — проект, близкий моему сердцу. Там я сфокусировался на совмещении миров, которые так люблю — цифрового рисунка и 3D-графики.

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

Ассеты

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

Живописная природа: растения, анимация, шейдеры, image #3

Моделирование

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

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

Ствол и ветви смоделированы с помощью сплайнов.

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

Живописная природа: растения, анимация, шейдеры, image #4

Текстурирование

Я намеренно оставил текстуры абстрактными. Одна из лиственных текстур — это мазок краски, разбросанный несколько раз, другая текстура — это разбитый квадрат, а хвойные иголки — это шероховатые линии.

Для растительности я использую текстуры с альфой, сжатые до размера 256х256. Все цвета в сцене я контролировал с помощью свойств цвета материала. Это позволило мне легко вносить изменения в ассеты.

Анимация

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

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

Живописная природа: растения, анимация, шейдеры, image #5

Нужного эффекта я достиг именно благодаря UV-анимации листьев. Я просто покачивал текстуры в синхронизации с вертексным оффсетом. Поскольку эффект происходит в живом пространстве, у каждого дерева и листочка — своё движение.

Я использую тот же вид UV-анимации, чтобы сгибать траву по направлению ветра, вместо того чтобы просто наклонять её вертексным офсетом.

Окружение

Я группирую модели вместе, и почти никогда не раскидываю их равномерно. Тот же цветок в одном углу, то же дерево в другом. Я размещаю кусты и высокую траву возле воды и снаружи леса, а молодые деревца с краю от старых деревьев.

Живописная природа: растения, анимация, шейдеры, image #6

Туда, где игрок проведет больше времени (тропы и места интереса), я кладу больше деталей и стараюсь создать сильную композицию с помощью ассетов.

Почти всё внутри окружения размещено с использованием Prefab Scattering Tool. Я использовал Prefab Painter 2. У всех моделей растительности была LOD, так что я уверенно расставлял их вокруг.

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

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

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

Так я записал пение птиц, всплески воды, ветер и шаги по разным поверхностям. А для очищения звука я использовал Adobe Audition.

Шейдеры

Живописная природа: растения, анимация, шейдеры, image #7

С самого начала я хотел стилизовать цвета и вывести их за грань реализма. Я использовал Amplify Shader Editor, чтобы создать все шейдеры и настроить их под свои нужды. Помимо анимированной растительности, я бы выделил Colored Fog и Colored Water.

Colored Water

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

Живописная природа: растения, анимация, шейдеры, image #8

Colored Fog

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

Инструменты

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

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

Управление ветром

Скрипт Wind используется для общего контроля анимации ветра в сцене.

Управление цветом

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

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

Будущее

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

Сайт Драгоша Матковски

Живописная природа: растения, анимация, шейдеры, image #9

Оригинал можно прочитать тут.

Понравился материал? Поддержите его лайком и репостом, чтобы мы могли выпускать еще больше! Подписывайтесь на наши сообщества:
Digital Painting Classes — комьюнити для художников, аниматоров и 3D-специалистов; ежедневные подборки для вдохновения, полезные материалы, артбуки, баттлы и конкурсы.
Smirnov School — школа цирового рисунка и концепт-арта: мы готовим художников для работы в игровой индустрии.
Перечень курсов.
759 views·24 shares