Что такое тайловое текстурирование — общие принципы и использование Статьи редакции

Как создавать тайлы и зачем это нужно.

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

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

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

Определение и термины

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

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

Trim Sheet или тримы, в какой-то степени — это тоже тайлы, однако они бесшовные лишь по одной оси и применяются к вытянутым объектам: балкам, перилам, плинтусам, узорам на стенах и многим другим. Наглядные примеры таких текстур ниже.

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

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

Преимущества и недостатки

Плюсы

Оптимизация. Известно, что файлы игр состоят примерно на 60-80% из текстур, а возможно и на 95% — всё зависит от конкретного проекта. Однотипные, бесшовные текстуры часто используются повторно на различных моделях, тем самым позволяя экономить место на жёстком диске, снижать время загрузки и обращение к видеопамяти. Повторное использование материала в сцене вместо создания нового снижает количество Draw Calls — вызовов отрисовки.

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

Минусы

Повторяемость ассетов. Если в игре часто использовать ассеты повторно, то через несколько часов геймплея визуально игра станет скучной. Этим особенно страдают игры с большим миром, например TESO, да и вообще вся серия «Свитков». После нескольких походов по пещерами можно увидеть все возможные тайлсеты, и новые локации не вызовут никаких впечатлений, так как они почти идентичны во всём, кроме проектировки уровня.

Зато большая часть Тамриеля (Мира вселенной The Elder Scrolls) умещается в 95 гигабайт, что по сравнению с новыми играми не так уж и много.

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

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

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

Методы создания тайл текстур

Обработка фотографий в 2D редакторе — в Photoshop или в специализированных программах. Для создания полноценного PBR-материала не достаточно одной текстуры цвета — необходимы маски метала, шероховатости и карта рельефа (Metallic, Roughness, Normal Map). Всё это нужно либо рисовать вручную, либо генерировать из той же фотографии, что, конечно, даст результат, но не лучшего качества. По этой причине способ считается устаревшим.

Для генерации существуют отдельные программы — например бесплатный materialize или Bitmap2Material — который по сути является набором нод из Substance Designer. Ещё есть онлайн-сервис NormalMap-Online, он может создать Normal, AO, Sepcular из любого изображения. У всех этих генераторов похожий принцип, цвет используется как маска, карта нормалей получается вдавленной в тёмных местах и выдавленной на светлых, в некоторых случаях из этого можно получить приемлемое качество.

Моделирование и запекание. Художник создаёт геометрию на прямой плоскости при помощи скульптинга или моделирования. Геометрию окрашивают ID-материалами или через Vertex Paint. Далее это запекается на обычный плейн в текстуры: Normal, ID map, Curvature, Ambient Occlusion.

Остальное создаётся вручную. ID Map помогает отделять друг от друга элементы на плоской текстуре. Metallic, roughness и базовый цвет можно создать в Substance painter, в Blender через нодовый редактор, в Photoshop или даже внутри игрового движка, смешивая текстуры по ID-маске.

Hand Paint — создание текстур вручную, рисование в Photoshop или в других 2D-редакторах. Как правило, этот метод подходит для стилизованной графики, так как добиться реализма мазками кисти крайне сложно, если вообще возможно. Для создания стилизованной графики с PBR можно комбинировать с методом запекания.

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

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

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

Похожие функции можно найти в редакторе шейдеров Blender, среди плагинов для Unity, блюпринтов в Unreal Engine.

Процесс тайлового текстурирования

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

Усреднение общего текселя (texel density)

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

Я уже рассказывал в прошлом уроке, но напомню что texel density — это величина, которая является отношением размера текстуры (в пикселях) к габаритам 3D-модели в сцене.

Почему это имеет значение? Представим, что вы скачали или сделали текстуру кирпича, он оказался крупный, поэтому вы увеличили размеры UV-острова. Второй материал, кирпичи другого цвета, напротив, оказались мелкими и, чтобы сопоставить размеры, вы уменьшили развертку. Как результат одна текстура «мыльней» другой.

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

Конечно, не обязательно делать везде одинаковый тексель — разброс по качеству становится заметным, если разница текселя более 4 px/cm. Можно допускать размытие на слабо заметных участках, куда игроки особо не смотрят. Если паттерны на текстуре слишком большие или маленькие, то ради качества стоит поискать или сделать другую.

Определитесь с текстурами

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

Редактирование UV-развёртки

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

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

Оптимизация тайлов в тримы

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

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

Объединение текстур

Для этого подойдет любой 2D-редактор, в котором вы умеете работать. Не забывайте, что придётся совмещать не одну текстуру, а несколько текстурных сетов — можно легко в них запутаться. Для работы с тайлами я использую Substance Designer, в нём довольно удобно сортировать текстуры и в любой момент легко исправить ошибку.

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

Создание атласа тайлов

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

У большого паттерна есть ещё один недостаток — чтобы он чаще повторялся на 3D-модели, придётся делать много разрезов, швов на геометрии, тем самым увеличивая полигонаж.

Больше полигонов ради оптимизации

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

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

Создаем декали

Это довольно просто — создайте текстуру с прозрачностью и элементами, которые вы хотите нанести на модель. В моём случае это грязь и подтёки.

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

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

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

Избавляемся от повторяемости

Существует несколько способов скрывать однотонность: очевидные и простые и те, что требуют навыков работы с шейдерами.

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

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

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

Декали. Это не только ранее упомянутая грязь и подтёки. Декалями могут быть надписи, крепления, какие-то символы — практически всё, что можно уместить на плоскости в виде текстуры.

Базовый материал -> +декали -> +смешивание с другим материалом -> +декали Felix Leyendecker

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

Смешивание материалов. Через Vertex Color, цвет вершин или текстурную маску. Аналогично тому, как текстурируют terrain, грунт в игровом движке, можно текстурировать и модели.

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

В целом, идеальное решение скрытия тайлов это редактирование шейдера, смешивание материалов и текстур. Например, в стандартном шейдере Unity есть функция Detail Texture, нужно лишь добавить туда какой-нибудь шум для разнообразия цвета или обратить внимание на эту технологию (статья на DTF).

Вопросы

Как с такой развёрткой запекать тени и Ambient Occlusion?

Ambient Occlusion в играх чаще всего создается при помощи постобработки на камере или запекается в общую карту теней. А карта теней запекается на второй UV-канал, движок генерирует его автоматически или же художники продумывают его заранее.

Если я не хочу использовать тайлы?

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

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

Когда использовать тайлы, когда тримы, когда атласы тайлов?

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

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

0
10 комментариев
Написать комментарий...
NopeHope
Ответить
Развернуть ветку
armstrong

Полезная статья, пиши ещё.

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку

Комментарий удален модератором

Развернуть ветку

Комментарий удален модератором

Развернуть ветку

Комментарий удален модератором

Развернуть ветку

Комментарий удален модератором

Развернуть ветку

Комментарий удален модератором

Развернуть ветку

Комментарий удален модератором

Развернуть ветку
Оперативный завод

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

Ответить
Развернуть ветку
Андрей Мейкер

После этого поста я теперь вижу во всех играх этот тайлинг. Я словно Нео который сьел пилюлю.

Ответить
Развернуть ветку
Дима Соболев

Спасибо за труд!
У меня плохо с пунктуацией, но по-моему это опечатка:
https://gyazo.com/b90f1c41ee843491ffb1c4770eb76b45
здесь точно пропущена черта (то , либо, нибудь):
https://gyazo.com/3a67fba42bb2f586b0ca5539ad172e2a
здесь, возможно, лишняя запятая:
https://gyazo.com/bb4beb1c6c4511d745d21e3ed0bde819
а тут я не уверен, что вообще есть ошибка):
https://gyazo.com/835bde3bdea8ea4fd04cbe34dbb462a1

Ответить
Развернуть ветку
Руслан Феликин
Автор

Спасибо, исправил

Ответить
Развернуть ветку
Александр Мотов

Про смешивание материалов бы побольше в Unity...

Ответить
Развернуть ветку
Никита Лукьянов

Это обычные шейдеры. Легко делается через шейдер граф если srp, а если стандартный конвейер рендеринга, то есть всякие шейдер форджи.

Ответить
Развернуть ветку
Alexey Davydov

Добавлю ещё способ совмещения атласов и тайлов в одной текстуре через Texture Array.
Пользуюсь для себя этим методом.
https://dtf.ru/gamedev/725696-atlas-i-tayling-odin-material-chtoby-pravit-draukolami

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Читать все 10 комментариев
null