Гайд по созданию процедурной текстуры в Substance Designer и Unreal Engine 5

Из гайда вы узнаете, как сделать процедурную тайловую текстуру пола высокого качества в Substance Designer: анализ референсов, работа с картами высот, создание и смешивание материалов — а после сделать шоукейс на Unreal Engine 5.

Финальная текстура
Финальная текстура

Начните с референсов

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

  • Проведите исследование и соберите коллекцию подходящих изображений разного типа: от микро до макро
  • Разделите коллекцию на три главные категории: крупная, средняя и микро детализация
  • Расположите категории последовательно, используя приложение PureRef для сбора данных
  • Старайтесь находить изображения высокого качества с чёткими деталями
  • Избегайте: размытых или зашумленных референсов, изображений с ярким освещением и частично связанных с типом текстуры, которую вы хотите создать
  • Расположите референсы так, чтобы ничего не отвлекало и не было путаницы
Напольная плитка из библиотеки Пикколомини
Напольная плитка из библиотеки Пикколомини

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

Например, для плитки Пикколомини таких коллекций 5:

  • Tile Base (основа плитки) — коллекция с основными референсами. В ней находятся фотографии с микро- и макродеталями, которые помогут распознать поверхность и подход к работе
  • Cracks (трещины) — коллекция с разными видами трещин, которые можно проанализировать и импортировать в движок
  • Chipping (отколотые края) — коллекция примеров плиток со сколами. Разные варианты могут быть полезны при создании эффекта состаривания
  • Tile Removal (выбитые плитки) — коллекция разных выбитых плиток, которая разнообразит использование материала и даст общее представление о его внешнем виде
  • Crack Debris (разрушенные плитки) — важнейшая коллекция для материала. Она показывает изменение плитки — от целой до разрушенной. Старайтесь собирать разные референсы трещин и обломков
Группы референсов для дальнейшей работы
Группы референсов для дальнейшей работы

Постройте карту высот

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

Пример шаблона для создания материала:

  • Можете начать с любого шаблона с названием Spec/Gloss или Metal/Roughness. В этом гайде использован PBR (Metal/Roughness)
  • В размере графика выставите Relative to the Parent
  • Используйте три аутпута, чтобы построить высоту для базы: Normal, AO и Height
  • Ноды 16x16 Uniform Color можете подключить к Base Color, Roughness и Metallic и поменять, если понадобится
Гайд по созданию процедурной текстуры в Substance Designer и Unreal Engine 5

Начните с плитки в форме ромба — она станет основой материала. Создайте ноду Uniform Color с белым цветом, потом используйте Transformation 2D для поворота на 45 градусов и Levels, чтобы убрать полупрозрачные пиксели по краю фигуры — это позволит избежать дальнейших проблем с мипмапами. Далее используйте две ноды Transformation 2D, чтобы сузить фигуру по диагонали и горизонтали.

Гайд по созданию процедурной текстуры в Substance Designer и Unreal Engine 5

Чтобы выровнять ромбовидную форму и сделать круговой орнамент, разместите 6 фигур на двух нодах Splatter Circular: одну трансформируя по вертикали, вторую — по диагонали. Далее смешайте обе ноды в режиме Add и подключите к Levels для получения жёстких краёв.

Подключите шейп в Tile Generator, назначьте параметры X=4, Y=4 и увеличивайте размер фигуры пока не заполнится пространство между ними, после этого переключите режим смешивания на Max Lighten.

Гайд по созданию процедурной текстуры в Substance Designer и Unreal Engine 5

Чтобы убрать зазоры между плитками, используйте ноды Flood Fill, Flood Fill to a Random Grayscale и Distance, для придания небольшой глубины фаски орнаменту — Edge Detect и Bevel.

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

Гайд по созданию процедурной текстуры в Substance Designer и Unreal Engine 5

Создайте звено цепи. Возьмите ноду Shape с кругом, уменьшите в Transformation 2D и вычтите его из основного.

Гайд по созданию процедурной текстуры в Substance Designer и Unreal Engine 5

Возьмите Uniform Color белого цвета, трансформируйте, отзеркальте и смешайте с кругом. Потом используйте другую Transformation 2D ноду, чтобы сделать уменьшенную версию шейпа и повернуть на 180 градусов. Далее смешайте Transformation 2D ноды и поэкспериментируйте с Blur и Levels для создания уникальной формы.

Гайд по созданию процедурной текстуры в Substance Designer и Unreal Engine 5

Вставьте базу узора цепи в Tile Generator с параметрами: X=1, Y=14. После этого наклоните фигуру Transformation 2D, как в ромбовидной фигуре, и используйте две ноды Mirror, чтобы добиться нужной плиточной геометрии.

Завершением станет шейп месяца.

Создайте ноду Shape и вычтите из нее круг в Transformation 2D и Blend. Затем используйте Non-Uniform Blur Grayscale, чтобы добавить глубины месяцу, вставьте фигуру в две ноды Splatter Circular и смешайте.

Гайд по созданию процедурной текстуры в Substance Designer и Unreal Engine 5

Закончив с фигурой, подключите её в основной Tile Generator с параметрами Tile Generator цепи, чтобы обе формы ложились на основные плитки.

Обработайте поверхность

Сделайте отколотые плитки и маски.

Создайте ноду Slope Blur Grayscale, подключите в неё основную карту высот и смешанные Clouds 1 и 2 как инпут шума. Далее используйте Invert Grayscale и Histogram Scan, выставив параметр с плавающей запятой. Это позволит изменять значение маски с 0 до 1 и процедурно генерировать сколы по краям.

Закончив, возьмите гистограмму из Flood Fill to Random Grayscale, смешайте с Histogram Scan сколов и вычтите из основной формы.

Гайд по созданию процедурной текстуры в Substance Designer и Unreal Engine 5

Теперь нужно сделать градацию и деформацию поверхности.

Для создания уникальных градиентов на каждой плитке используйте ноду Flood Fill to Gradient и смешайте поверх основной карты высот в режиме Soft Light Blend.

Создайте вторую гистограмму из Flood Fill to Random Grayscale и повторите смешивание. Укажите параметры создания уникальных неровностей.

Гайд по созданию процедурной текстуры в Substance Designer и Unreal Engine 5

Для деформации поверхности возьмите разные шумы: Clouds 1, Clouds 2, Gaussian Noise и BnW Spots 2, и примените к ним Directional Warp, подключив Flood Fill to Random Grayscale в качестве маски. Этот метод поможет создать искаженные шумы, которые можно будет наложить на основную фигуру с помощью нескольких блендов.

Осталось сделать трещины.

Для создания больших трещин создайте ноду Shape с белым цветом и подключите в нод Splatter со случайными значениями размера, оттенков серого и поворота. Затем проведите через ноду Distance, чтобы максимально увеличить расстояние между разбросанным фигурами, и Edge Detect для получения базовой формы трещины. Используйте Warp с Gaussian Noise, чтобы придать этим трещинам естественный вид.

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

Гайд по созданию процедурной текстуры в Substance Designer и Unreal Engine 5

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

Используйте ноду Bevel для маски трещин и Levels, чтобы сделать форму более резкой. Это даст возможность применять одновременно два типа повреждения: сколы и трещины.

Чтобы к поверхности и краям разрушенной плитки добавить детали, создайте ноду Slope Blur, подключив смешение Clouds 1 и Clouds 2 — это деформирует края и задаст им разную высоту. Потом наложите Slope Blur сломанных плиток на основные трещины при помощи Histogram Select.

Гайд по созданию процедурной текстуры в Substance Designer и Unreal Engine 5

Добавьте и смешайте грязь

Начните с ноды Clouds 2 и увеличьте тайлинг с помощью Safe Transform Grayscale. После этого возьмите Clouds 1, BnW Spots 3 и Gaussian Noise и смешайте их поочерёдно с помощью Soft Light — каждый с интенсивностью 0.5.

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

Гайд по созданию процедурной текстуры в Substance Designer и Unreal Engine 5

Сделайте выбитые плитки

Для этих повреждений используйте только Histogram Select, подключив Flood Fill to Grayscale, и сделайте экспоуз всех трех параметров, чтобы расширить возможности применения материала. Position позволит менять места отсутствующих тайлов, Range — увеличивать размер или количество отсутствующих плит, Contrast — изменять лишнее маскирование.

Гайд по созданию процедурной текстуры в Substance Designer и Unreal Engine 5

Карта высот и карта нормалей:

Добавьте шероховатость (Roughness)

Из ноды Normal создайте Curvature Smooth и смешайте с BnW Spots 2. Возьмите Tile Generator, маскирующий внутреннюю ромбовидную форму, и дважды смешайте её с Grunge 014. Создайте слайдеры для каждого типа повреждений, чтобы потом контролировать шероховатость каждого.

Гайд по созданию процедурной текстуры в Substance Designer и Unreal Engine 5

Шероховатости будут меняться вместе с параметрами материала.

Гайд по созданию процедурной текстуры в Substance Designer и Unreal Engine 5

Сделайте затенения — Ambient Occlusion

Начните с ноды AO и используйте Histogram Select для маскировки повреждения, потом наложите её на основную AO. Чтобы на месте выбитой плитки были углубления, создайте маску, наложите поверх основной текстуры и подключите в AO Output.

Повторите смешивания шероховатостей с конкретными масками из каждого генератора для АО.

Создайте базовый цвет

Начните с создания маски.

У плитки Пикколомини мало цветов, поэтому двух нод Gradient Map будет достаточно для всей текстуры.

Смешайте маски из всех генераторов в режиме Add. Потом используйте ноду Levels, чтобы убрать шум. Для придания маске более реалистичного вида слегка деформируйте её в ноде Warp с Grunge Map 014 и смешайте с основной картой высот ещё раз, используя режим Soft Light. Эта маска будет использована для окрашивания голубого орнамента.

Гайд по созданию процедурной текстуры в Substance Designer и Unreal Engine 5

Для светлых цветов создайте ноду Edge Detect от карты высот и подключите ее к Gradient Map. Чтобы поправить цвета, используйте HSL. Потом возьмите ещё одну Gradient Map и подключите к ней маску голубого орнамента, чтобы получить голубой цвет, и наложите поверх белого базового цвета, который сделали ранее. Так вы создадите первичное смешение цветов для материала.

Гайд по созданию процедурной текстуры в Substance Designer и Unreal Engine 5

Далее — наложение.

Для процедурного смешивания создайте маски при помощи Histogram Scan/Select для каждого типа повреждений. Далее используйте все маски для соответствующих блендов, добавляя их пошагово, чтобы всё работало при изменении параметров основной карты высот.

Настройте сцену на Unreal Engine 5 для шейдеров, рендера, освещения и прочего

Настройте импорт ассета.

Сначала создайте одну сферу и базовый мэш для сцены в 3ds Max и импортируйте материал в движок с этими настройками:

  • Снимите галочку с Generate Auto Collision
  • Normal Import Method: Import Normals and Tangents
  • Снимите галочку с Combine Meshes
  • Снимите галочку с Import textures и Do not create material
Гайд по созданию процедурной текстуры в Substance Designer и Unreal Engine 5

Перейдите к настройке Environment Light:

  • Установите на уровень один Directional Light, выбрав Atmosphere Sunlight, в интенсивности поставьте 5 LUX
  • Добавьте Sky Atmosphere Component с настройками: Atmosphere Rayleigh Exponential Distribution — 0.5 и Sky Luminance Factor — 0.5
  • Добавьте SkyLight и поставьте галочку напротив Real-Time Option on
  • Добавьте Exponential Height Fog со следующими настройками: Fog Height Falloff — 1, Fog Scattering Color — H(220), S(0.5), V(1.0) и Directional Inscattering Color — H(0), S(0), V(0)

В постобработке установите следующие значения:

  • Exposure Metering Mode — Manual
  • Exposure Compensation — 10
  • Blooms: Standard Mode, Intensity — 1.4
Гайд по созданию процедурной текстуры в Substance Designer и Unreal Engine 5

Включите Lumen в меню Global Illumination и Reflections под ним. При проблемах с производительностью настройте интенсивность Lumen, воспользовавшись опцией Final Gather Quality.

Гайд по созданию процедурной текстуры в Substance Designer и Unreal Engine 5

Для распространения вольюма Post-Process на весь уровень поставьте галочку напротив опции Infinite Extent.

Гайд по созданию процедурной текстуры в Substance Designer и Unreal Engine 5

Настройте камеру

Установите эктор перед шаблоном сцены, переключите режим проекции с ортографического в перспективный. Для получения квадратного снимка: установите угол обзора — 30 градусов, соотношение сторон — 1.045 и поставьте галочку у Constraint of the Aspect Ratio.

Сделайте шейдер 4‑х канального смешивания Parallax Occlusion

Для создания шейдера импортируйте текстуры с удобными наименованиями:

  • 4 карты нормалей (Normal Maps)
  • 4 ARM карты
  • 1 Height Map в виде Splat map (содержащаяя 4 Height Maps)
  • 4 BaseColor карты

Карта Splat — это текстура, контролирующая наложение нескольких текстур (или других значений) по модели.

Создайте базовый материал и импортируйте все текстуры в редактор материалов. Рассортируйте их по рамкам с понятными названиями, чтобы было удобно ориентироваться. Для первого бленда начните с ноды Vertex Color, с помощью ноды Lerp смешайте четыре текстуры, как на картинке внизу.

Гайд по созданию процедурной текстуры в Substance Designer и Unreal Engine 5

Повторите это смешение для карт ARM, Normal и Base Color. Для ARM разделите бленды на пары — первый будет для AO. Каналы R каждой карты ARM перемножьте с Base Color, чтобы добавить AO ощущение глубины.

Для создания бленда Roughness Lerp с Vertex смешайте каналы G и вставьте это в канал Roughness.

Vertex Colors раскрасит меш с помощью 4 текстур.

Гайд по созданию процедурной текстуры в Substance Designer и Unreal Engine 5

Далее начните настройку тайлинга с ноды UVcoord, перемноженной с параметром Float 1. Этот тайлинг будет подключен в инпут координат ноды Bump Offset.

Создайте еще один Float 1, сделайте экспоуз параметра с наименованием Height Ratio и поставьте значение 0.012. Далее подключите этот Float в инпут Height Ratio.

Для Height Offset возьмите Height Splat Map и подключите Height из каждого канала RGBA в инпут Height. Закончив с настройкой Bump Offset, подключите в UV инпут всех текстур.

Гайд по созданию процедурной текстуры в Substance Designer и Unreal Engine 5

Для меша выберите опцию Vertex Paint — здесь нужно выставить несколько параметров:

  • Color View Mode: Off
  • Strength: 0.5
  • Falloff: 1
  • Texture Weight: ARGB (4 Textures)
Гайд по созданию процедурной текстуры в Substance Designer и Unreal Engine 5

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

Гайд по созданию процедурной текстуры в Substance Designer и Unreal Engine 5

Выгрузите рендеры

Чтобы получить рендеры высокого качества в Unreal Engine, в выпадающем меню вьюпорта выберите опцию High-Resolution Screenshot — откроется всплывающее окно. Значение Size Multiplier выставите от 1 до 4 в зависимости от производительности системы.

От автора

На протяжении всего процесса я много экспериментировал, и результаты того стоили! Я хотел улучшить навыки создания процедурного материала, поэтому впервые воспользовался Unreal Engine 5. Рекомендую каждому держаться выбранного курса, всесторонне развиваться и принимать свои ошибки — благодаря им вы можете открыть новые способы работы в Substance Designer. Познавайте новые приёмы и продолжайте экспериментировать.

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

Ишан Верма, художник по материалам из Ubisoft

Больше работ Ишана Верма на ArtStation.

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

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

6363
Начать дискуссию