Gamedev
XYZ
3240

Делаем бетон в Substance Designer

Привет, это Антон Агеев, — преподаватель курса по процедурным текстурам «Процедурный трип». Подробнее о нём можно прочитать в анонсе. На курсе я учу работать в Substance Painter и Designer и рассказываю, как создавать реалистичные процедурные текстуры на уровне профессионалов игровой индустрии.

В закладки
Слушать

Это — обучающий текст по созданию процедурной текстуры бетона в Substance Designer. Бетон — материал на первый взгляд тривиальный, но грамотное его использование поможет выстроить стилистику целой игры. Как, например, в прошлогодней Control.

Текстуры для неё, кстати, тоже делали в Substance Designer​

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

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

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

Поехали!

Собираем референсы

Заходим на Artstation, Behance, Google и ищем подходящие образы.

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

Настраиваем программу

Интерфейс Substance Designer выглядит так:

​Выглядит пугающе, но быстро привыкаешь

Интерфейс делится на несколько рабочих областей: панель эффектов справа, 3D вьюпорт — отображение материала на 3D модели, 2D вьюпорт — показывает содержимое выбранной ноды. Снизу — рабочее место, которое называется Graph View, в котором мы создаем материал с помощью нод.

Нода — это блок кода или операция, которая создаёт или обрабатывает изображение

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

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

Например, нода Blur принимает на вход изображение, а на выходе отдаёт его более размытым:

​Инпут слева, аутпут справа

Такой подход к созданию текстур и материалов называют процедурным.

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

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

В библиотеке Designer более двухсот нод. Они делятся на группы по задачам.

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

Существуют и другие группы: паттерны, операции и эффекты.

Вот, как выглядит исходная схема в Graph View. Я оставлю её в хорошем качестве на гугл-диске, чтобы ты мог обращаться к итоговому варианту, если запутаетесь.

​В каждом шаге разберём по кусочку схемы

Новый проект

Первым делом создаём и настраиваем новый проект.

В окне нового проекта даём название будущему графику, устанавливаем разрешение — 2048х2048 точек, разрядность документа — 16 бит и в качестве шаблона из левого списка выбираем PBR(Metallic\Roughness).Если забыли выбрать нужный шаблон или случайно удалили а

В окне нового проекта даём название будущему графику, устанавливаем разрешение — 2048х2048 точек, разрядность документа — 16 бит и в качестве шаблона из левого списка выбираем PBR(Metallic\Roughness).

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

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

Карта высот

Наша задача — грамотно построить карту высот (Height).

Height это чёрно-белая текстура, в которой яркость пикселя задаёт высоту точки в 2D пространстве.

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

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

Карта высот занимает 80% работы.

Она также оказывает влияние на все остальные текстуры материала — цвет, микрорельеф (roughness), затенения (AO) и так далее.

Анализ референсов

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

К примеру трещины на первом референсе имеют схожую форму и характер. Бетон на второй фотографии покрыт мелкими глубокими порами.

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

Фактура

Первый элемент — текстура, которую я сделал на основе процедурного шума Fractal Sum Base.

Её задача — добавить небольшие неровности и фактуру бетона, для того чтобы материала не был идеально ровным.

Я собрал эту текстуру из четырёх нод, начал с процедурного шума Fractal Sum Base.

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

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

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

Я начал с Fractal Sum Base потому что мне показалось что она похожа на однородную поверхность камня. Но в дефолтном состоянии она слишком сильно «шумит».

Поэтому добавилась нода Slope Blur для понижения детализации.

Slope Blur одновременно размывает и искажает текстуру, что привело меня к результату:

Тут я показываю результат с цветом для наглядности. До создания текстуры цвета мы ещё дойдём​

Следующий шаг — нода Blur HQ с помощью которой я смягчаю получившуюся фактуру.

Последняя нода — Histogram Range. В ней с помощью параметра Range я управляю интенсивностью элемента:

Поры

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

Я создал поры из процедурной текстуры текстуры Dirt 1.

Для того, чтобы сделать глубину пор разнообразнее, я продублировал Dirt 1 и настроил их по-разному с помощью параметра Position в нодах Histogram Scan.

Регулируя этот параметр я управляю яркостью, поэтому в двух вариантах получается разное количество отверстий:

После этого я применяю Slope Blur к обеим текстурам, чтобы упростить форму пор и сделать их похожими на отверстия в камне:

Поры в материале​

Процедурные шумы и эффекты

Slope Blur управляется другой текстурой. В нашем примере чёрно-белая текстура управляет интенсивностью эффекта. Чем ярче пиксель, тем сильнее в этом месте действует Slope Blur.

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

​У Slope Blur для пор, драйвером является BnW Spots 2

Результат эффекта зависит от текстуры-драйвера, поэтому не бойтесь экспериментировать. Это быстрее приведёт к результату и научит работе с разными эффектами и текстурами.

Трещины

Это сложная деталь, которая состоит из нескольких нод и эффектов.

  • Я начинаю с простых форм, создаю текстуру Cells 1. В её основе лежат прямые линии, которые образуют узор, похожий на трещины.
  • С помощью эффекта Directional Warp я немного искажаю текстуру Cells 1, потому что на камне трещины не такие прямые.
  • Создаю драйвер для эффекта Directional Warp из текстуры Gaussian Noise. Она делает изгибы трещины мягкими и плавными. Результат настраиваю одновременно с помощью параметра Scale в драйвере и Intensity в ноде DW.
  • Продолжаю работу над формой трещин, создав ещё один Directional Warp.
  • На этот раз в качестве драйвера использую текстуру Crystal 1. Она состоит из градиентов, в основе которых линии ломаной формы. В результате эффект DW добавляет на плавные линии трещин изломы.
  • Я создаю ноду Blend, в которой смешиваю трещины с текстурой Gaussian Noise. Чтобы паттерн не читался явно, местами их лучше стереть.
  • Перед этим добавляю Gaussian Noise в ноду Levels, с помощью которой можно настроить радиус маски.
  • Последняя операция — уже знакомый Slope Blur. С помощью него я добавляю сколы и фактуру камня на грани трещин.
  • Для этого использую драйвер Clouds2.
  • Последнюю ноду — Histogram Scan, — создаю, чтобы контролировать интенсивность трещин.

Повреждения

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

  1. Создаю фактуру грубого и пористого цемента, затем подмешиваю его к материалу с помощью маски, сделанной из процедурного шума — BnW Spots 1.
  2. Маску делаю с помощью ноды Histogram Scan, увеличив контрастность текстуры. С помощью Position настраиваю площадь повреждения.

  3. 3. Применяю к маске Slope Blur, в качестве драйвера использую BnW Spots 3, который уже есть в графике — участвует в создании пор.

  4. Перед тем, как смешать фактуру из BnW Spots 1, смещаю текстуру в сторону и поворачиваю её нодой Transform 2D, чтобы рисунок текстуры не совпадал с рисунком маски.

Смешиваем

Для смешивания создам 4 последовательных ноды Blend, к каждой подключу свой элемент, регулируя степень прозрачности и тип смешивания:

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

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

Карта нормалей

Карта нормалей создаётся из карты высот. Делается это в один шаг: создаём ноду Normal и подключаем к ней карту высот из ноды Levels.

Внутри одна крутилка интенсивности​

Я увеличил значение до 1,4х, чтобы детали были объёмнее.

Затенения (Ambient Occlusion)

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

Из текстуры затенения создают маски для эффектов загрязнения.

В Designer есть нода которая генерирует текстуру AO из карты высот. Она понадобится нам в дальнейшем при создании текстур цвета и Roughness.

Карта кривизны (Curvature)

Карта кривизны — это чёрно-белая текстура, которая создаётся на основе Normal Map. Серым цветом в ней обозначены плоскости, белым — внешние углы, чёрным — внутренние.

Гранж

Отдельным графиком я смешаю несколько гранж-текстур бетона, взятых из библиотеки Substance Painter.

Чтобы добавить их в график, находим их , кликаем правой кнопкой мыши, в контекстном меню выбираем Show in Explorer.

​Библиотека Substance Painter

Текстуры лежат а папке библиотеки в формате .sbsar, их можно импортировать в график материала, перетащив файл из папки в окно Graph View.

Текстура понадобится для добавления деталей, которые не влияют на рельеф, но будут быть видны в цвете и текстуре Roughness.

Шероховатость (Roughness)

Текстура микроповерхности (Roughness) отвечает за рассеивание света материалом.

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

Шероховатые поверхности рассеивают свет, поэтому отражения размываются, а блики становятся тусклыми и широкими.

​В моём графике Roughness сделан так

Частый приём для начала работы с Roughness — взять в качестве основы текстуру кривизны (Curvature). В оригинальной Curvature углубления, поры и трещины темнее чем углы и плоскости.

Однако в текстуре Roughness чем темнее поверхность, тем она более глянцевая. Поэтому первым делом Curvature необходимо инвертировать — трещины и углубления станут матовыми. Для этого используем ноду Grayscale Invert.

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

Последняя нода — Histogram Range. В ней с помощью параметра Position я настраиваю общий уровень гладкости:

Цвет

Наш бетон получается простым, поэтому цвет для него делаю при помощи одной ноды — Gradient Map, с помощью которой раскрашиваю чёрно-белую Height Map.

  • Перед этим смешиваю с гранж-текстурой, чтобы в цвете было больше деталей. Если использовать в Gradient Map только Height Map, результат будет выглядеть плоским и неинтересным.
  • Перед тем, как подключить текстуру к Gradient Map, повышаю её контрастность с помощью Levels.
  • Gradient Map. Нода преобразует серые тона в цвет с помощью настраиваемого градиента.
Редактор настройки, открывается по клику на «Gradient Editor» в свойствах ноды​

Цвета можно добавлять и редактировать вручную, или ли захватить прямо с референса с помощью инструмента Pick Gradient.

​«Захват» градиента всегда дает разный результат

Финишные детали

Напоследок создаю маски из двух генераторов — Dirt и Mask Builder.

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

Для того чтобы генератор заработал, в него подключаются карты AO и Curvature.

После этого с помощью параметров в свойствах ноды настраиваю маску. Я покажу свои параметры, но попробуй поэкспериментировать сам.

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

Когда нужно добавить деталь по одной маске в две текстуры сразу, удобнее использовать Material Color Blend, — это упрощает график и делает его понятнее.

В каждой ноде Material Color Blend (4, 6) текстура цвета и Roughness (1, 2) смешиваются по маске (3, 5) с другим цветом или значением яркости.

Настройки второго цвета и тип смешивания выбираем в свойствах самой ноды.

​Вот мои

На этом всё!

​Вот так текстура выглядит после всех шагов

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

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

Материал подготовлен командой XYZ Media.

Наши каналы в Telegram и на YouTube.

Привет, мы онлайн-школа XYZ. Учим всем аспектам создания игр — от концепт-арта и 3D-графики до геймдизайна и программирования. Наши инструкторы — действующие профессионалы индустрии: они работают в таких компаниях, как Blizzard, People Can Fly и CD Projekt Red.
{ "author_name": "XYZ", "author_type": "editor", "tags": ["\u043e\u0431\u0443\u0447\u0435\u043d\u0438\u0435","xyz","textures","substance","gamedev"], "comments": 24, "likes": 112, "favorites": 260, "is_advertisement": false, "subsite_label": "gamedev", "id": 130481, "is_wide": false, "is_ugc": false, "date": "Wed, 29 Apr 2020 20:48:28 +0300", "is_special": false }
0
24 комментария
Популярные
По порядку
Написать комментарий...
19

Когда смог дочитать статью
Делаем бетон в Substance Designer

Ответить
1

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

Ответить
10

Бетономешалка мешает бетон,

Бригада девелоперов пьет самогон.

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

Ответить
8

я работающий с quixel mixer.

Ответить
1

Скачиваешь отсканированные материалы категории "Сoncrete" с Megascans, не?

Ответить
4

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

Ответить
11

использовать 3д шумы и panorama position конечно же

Ответить
8

ух ты вот это да, спасибо!

Ответить
6

Комментарий удален по просьбе пользователя

Ответить
6

Аргх, буду проституткой.

Ответить
6

Блин, я зашёл, подумал реальный бетон делать научат. 3 к 1 песок добавлять, или 4

Ответить
5

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

Ответить
0

Лучше закладчиком работать, чем седеть/лысеть над этими нодами.

Ответить
4

Хз, обожаю в нодах копаться сидеть по ночам

Ответить
–1

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

Ответить
10

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

Ответить
1

Комментарий удален по просьбе пользователя

Ответить
1

Отличная статья, спасибо!

Ответить
1

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

Ответить
0

Текстуры бесшовные получаются?

Ответить
1

да 

Ответить
0

Благодарю автора за статью.  Хорошая статья. есть одно но, офиц. версия триал! только 30 дней.

Ответить
1

С год назад в стиме на распродаже были лютые скидки на пакет сабстанса. Painter (ради которого и брал), Bitmap to material (тоже часто пригождается) и в довесок Designer (открыл, потыкал и пообещал, что как нибудь освою). За все про все отдал не такие уж большие деньги, тыщи полторы рублей что ли.

Ответить

Комментарии

{ "jsPath": "/static/build/dtf.ru/specials/DeliveryCheats/js/all.min.js?v=05.02.2020", "cssPath": "/static/build/dtf.ru/specials/DeliveryCheats/styles/all.min.css?v=05.02.2020", "fontsPath": "https://fonts.googleapis.com/css?family=Roboto+Mono:400,700,700i&subset=cyrillic" }
null