Как я создаю окружение в Tiny Delivery - пошаговый разбор в Unity

В этом материале я разберу, как шаг за шагом создаю окружение для своей игры Tiny Delivery. Поговорим о том, какие инструменты я использую в Unity и на какие тонкости стоит обратить внимание при работе с окружением

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

Подготовка

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

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

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

Давайте в качестве примера возьмем данную пикчу

Unity URP 2022.3–6.3

Первое, что стоит сделать сразу после создания проекта — перевести его из цветового пространства Gamma в Linear. В линейном цветовом пространстве освещение и цвета выглядят более реалистично, что особенно важно при работе с атмосферным окружением.

Путь в настройках:

Edit → Project Settings → Player → Other Settings → Color Space → Linear

Этот шаг лучше выполнить в самом начале, чтобы в дальнейшем не пришлось переделывать освещение и материалы.

Unity Terrain

Обычный стандартный террейн. Вся сцена сделана на нём, без кастомных систем , кроме первого ассета в списке( и то он просто для упрощения работы)

Path Painter II

Использую для плавных возвышенностей . Остальные его фичи почти не трогаю.

F-Texture Tools

Быстрые правки текстур, замена цвета , сделать текстуру seamless, сгенерировать normal map . Вообщем встроенный фотошоп на минималках

Meadow Environment — Stylized Pack

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

**Sun Temple (бесплатный)**

Отличный бесплатный ассет храмов, руин и просто окружения

Stylized Water 3

Топовая вода. Для Unity 6 — версия 3, для старых версий — v2. ( кстати да, мой проект у них на страничке был недавно добавлен в конце как пример инди кто их юзает ) тоже не реклама честно , но надо же где то похвастаться

Fantastic Ancient Forest

Дополнительные кусты и растения, хорошо миксуются с основной растительностью

Artistic Tilt Shift

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

Сначала создадим Terrain и сразу же перейдём к его настройкам.

В своём проекте я использую следующие параметры разрешения террейна. Этого хватает для комфортной работы на старте.

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

Далее создаём все необходимые Terrain Layers. На скриншоте — пример из моего проекта, но по факту на этом этапе нам понадобятся только первые два слоя:

трава
земля

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

В моём случае текстура травы — собственная. Чуть позже я расскажу, как сделать подобную текстуру буквально за пару кликов.

Эти текстуры можно взять из Meadow Environment — Stylized Pack, который я использую в проекте.

После этого добавляем кусты и деревья, а затем — детали. Без них окружение всегда выглядит пустым и «плоским».

Быстро пробежимся по основным параметрам деталей на примере травы

Align to Ground — отвечает за то, насколько сильно деталь будет выравниваться по нормали поверхности. Проще говоря, насколько сильно она учитывает наклон террейна. Я предпочитаю выкручивать этот параметр на максимум.

Detail Density — определяет плотность размещения деталей. В моём случае значение 2 даёт достаточно плотное покрытие для травы, но многое зависит от масштаба и параметров самого террейна.

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

И так, начнем ! После подготовки террейна у нас примерно такая картина :

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

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

Чтобы не задерживаться надолго, я просто покажу свои текущие настройки и пойдём дальше

Windows->Rendering->Lightning->Enviromnent

Так же я сразу подключу Artistic Tilt Shift для удобства, хотя это не обязательно.

B Вот что получилось :

Если ваша трава не настолько густая — увеличьте ее density

Вроде бы уже не плохо! Хотя мы просто засеяли все травой

Кто то может поймать себя на мысли -хэй , ты же просто ассеты юзаешь и все .Нууу , на самом деле эти ассеты требуют очень плотной работы - настройкой под ключ , оптимизации , изменение шейдеров и экспериментов. У меня к ним отношение такое - что это все инструмент, а не 100% готовое решение . Вообщем не достаточно просто купить всего и хоп все готово)
например немного смекалки - всегда же можно свою текстуру травы сделать ,совершенно меняет муд - вот я например ради эскперемента сделал такие вариации :

У вас могут быть другие шейдеры или модели травы, поэтому ниже - общие принципы, которые хорошо работают в большинстве случаев:

Плотность травы должна быть высокой. Редкая трава почти всегда выглядит бедно, особенно на открытых пространствах.
Если в шейдере нет цветового шума (когда оттенки травы слегка меняются пятнами), его можно легко имитировать. Самый простой способ — сделать несколько вариантов одной и той же травы с разной цветовой коррекцией. Но желательно изменить шейдер что бы по шуму он миксовал оттенки от мирового положения, что бы трава слишком монотонной не выглядела
Fake SSAO. Затемняйте травинку у корней, чтобы создать ощущение затенения. Настоящий SSAO для травы — почти всегда убийство для перфоманса, особенно если травы много, особенно с включенными light/decal layers .
Честно скажу на момент написания статьи у меня слишком затемненные корни , в целом это дает неплохую детальную контрастность как ssao , и если у вас цель именно фейкануть такое затемнение - то схема рабочая, но по итогу я сделал более светлые переходы по итогу
Подгоняйте цвета слоёв террейна под траву. Играйте с тайлингом, оттенками и дополнительным цветом, чтобы земля и трава смотрелись как единое целое, а не как разные материалы, налепленные друг на друга.

Color Tint чуть затемнил и Size текстуры увеличил

Теперь вернёмся к текстуре травы. Если посмотреть на неё внимательнее — ничего не напоминает?

На самом деле всё довольно просто. Я сделал скриншот террейна с травой, но без пост-эффектов, а затем с помощью F-Texture Tools превратил его в seamless-текстуру.

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

Теперь давайте поработаем с геометрией террейна.

На референсе я заранее обозначил основные наклоны поверхности

Конечно, нет необходимости воссоздавать всё точь-в-точь, но мы попробуем сделать что-то похожее по логике и ритму форм.

Для начала нарисуем и базово обозначим высоты — без мелких деталей, просто крупные формы и перепады.

Для удобства во время работы с геометрией рекомендую временно отключить растительность в настройках Terrain. Так гораздо проще контролировать форму поверхности и вовремя замечать ошибки

Дальше я буду использовать ассет Path Painter II
Если кратко — он сильно упрощает создание плавных наклонов и переходов. То же самое можно сделать и стандартными средствами Unity, но это будет менее удобно и займет заметно больше времени

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

После этого включаем траву обратно и начинаем более детально прорабатывать тропинки

При создании тропинок не пытайтесь делать их идеально ровными. Пусть где‑то они будут шире, где‑то уже, а в каких‑то местах и вовсе слегка зарастают травой. Такая неровность придаёт окружению живость и естественность.

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

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

Теперь давайте перейдём к базовым деталям и попробуем расставить камни и деревья.

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

Трипланарный шейдер на камнях даёт приятный эффект мха, но, разумеется, можно обойтись и без него — как, например, на рефе

Обратите внимание: я убрал тропинку под камнями и слегка утопил их в траву. При этом я аккуратно вырезал траву вокруг, чтобы она не просвечивала сквозь геометрию. Такие мелочи сильно влияют на общее восприятие сцены . Но так же вы можете юзать спец шейдер со stencil buffer что бы рендер камней просто всегда перекрывал траву и не париться )

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

добавил немного массива кустов за камнями

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

Таких мостов, как на референсе, у меня не было, поэтому включаем креативность. В ассете Sun Temple я нашёл стену, которую вполне можно превратить в импровизированный мостик.

Да, это не идеальный полукруг, но работаем с тем, что есть.

Так как у нас сеттинг мистического леса и руин ( ну я так вижу), я решил дополнительно обогатить окружение:

столбы перед мостом;
сломанные заборы;
деревянные элементы;
утопленные в траве объекты, например арки.

Здесь уже всё упирается в ваше воображение и в ту небольшую историю, которую вы хотите заложить в локацию.

В образовавшиеся канавы я решил добавить воду (хотя на референсе её и не было).

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

Сделал воду тёмно-зелёной с зелёной береговой линией

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

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

Важно помнить, что природное окружение одновременно хаотично и при этом подчиняется определённым закономерностям:

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

Пара дополнительных наблюдений от себя:

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

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

У камней, мостов и других объектов я усилил растительность у оснований.

Растения под камнями как бы «ищут выход», образуя плотные массивы зелени

Тот же принцип применяется к мосту и другим объектам

Трава помогает замаскировать жёсткие переходы между моделями и террейном

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

Рядом с деревьями появились грибочки, а в постоянно затенённых местах я усилил растительность, иногда просто добавляя куст для ощущения густоты

Для контраста я слегка разбавил зелёную траву жёлтыми пятнами, которые делают картинку более живой и интересной

вот что получилось по итогу :

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

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

Если нет текстур — здесь на помощь приходят декали. Паков с декалями сейчас много, а сделать свои — тоже несложно. Я взял несколько декалей из ассета с травой , немного подкрутил цвет и шум в шейдере и накинул их на мост через Decal Projector

В конце добавляем немного VFX — бабочки, листочки, светящиеся частицы.

На этом работа завершена. Остаётся лишь немного покрутить камеру и полюбоваться результатом

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

Например:

Можно добавить текстуры плитки или каменной кладки, чтобы подчеркнуть, что раньше здесь была постройка или оформленная тропа. Это хорошо работает на контрасте с дикой, заросшей природой.
Интересный эффект дают динамические тени от облаков — например, через volumetric clouds. Медленно движущиеся тени добавляют сцене глубины и ощущения жизни.
Можно добавить дополнительные источники света, чтобы акцентировать внимание на отдельных зонах локации: мосте, развилке, входе в важную область.
Или просто дополнить сцену новыми объектами окружения — обломками, декором, намёками на прошлое этого места.

Все детали обязательно должны быть с включённым GPU Instancing, особенно трава. Это позволяет значительно сократить количество draw call’ов и заметно снижает нагрузку на рендеринг.

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

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

Если вы используете SSAO, то каждая травинка начинает попадать под его влияние. А это уже серьёзная проблема, потому что нагрузка растёт очень быстро и может стать критичной.

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

Что с этим делать?

По сути, нужно переписать шейдер травы так, чтобы он не писал данные в normaldepth buffer. Сделать это можно только через HLSL-код.

Если ваш шейдер сделан через Shader Graph, его сначала нужно сгенерировать в HLSL, и уже после этого вручную отключать запись глубины и нормалей.

Это не самый простой шаг, но он может дать очень ощутимый прирост производительности.

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

Не углубляясь в детали альфа-клипинга и overdraw’а: чем больше плейнов с листвой и альфа-клипингом у дерева, тем сильнее просадки FPS.

Что можно с этим сделать:

LOD’ы

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

ну или Использовать меньше деревьев

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

И напоследок — не забывайте про Occlusion Culling.

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

Данные сцены отлично себя чувствуют на моем стареньком ноуте с gtx1060 под 80–100 фпс на ультрах ( ну конечно же вместе с игровыми системами и тд) , в стим деке 50-70 фпс на ультрах
Ну а вот что у меня в игре ( да, я досихпор порой твикаю некоторые настройки в погоне за идеалом)