Текстурирование, или что нужно знать, чтобы стать Художником по поверхностям. Часть 3. PBR и материалы

Продолжаем серию уроков о том, как стать художником по поверхностям.

Hello there! Моё имя Денис Кузнецов. Я - программист =)

Итак, котятки, погнали! =)

Расшифровывается эта аббревиатура так: Physically Based Rendering. Что в переводе значит «Основанный на физике рендер». Это важно, так как очень многие переводят PBR как "Физически корректный" - но это не так. Очень много физических явлений света не учитывается при обработке текстур в PBR, поэтому это именно "основанный на физике", а не точные расчеты.

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

В зависимости от поверхности, от ее состояния (отражает ли оно, как зеркало, или имеет шероховатость, есть ли капли грязи / воды / кофе на поверхности, кусок дерева) вам в глаз приходит уже видоизмененный луч (или волна?).

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

Ниже список статей о том, как работает свет, и как это перенесено в PBR:

Мы рассмотрим PBR с точки зрения общей концепции. Так же рассмотрим детально каждый параметр и то, как формируется PBR.

Из прошлой части статьи мы помним, что PBR на самом деле создается с помощью комбинаций параметров, которые в свою очередь могут состоять из 1-го или нескольких каналов. То есть, PBR состоит из набора параметров:

Все параметры, кроме Color и Normal map, используют по 1 каналу, а Color и Normal map — по 3 канала каждый:

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

То есть, PBR - это комплекс параметров, которые игровой движок учитывает, чтобы отобразить конечный результат - то, как будет выглядеть объект при освещении, затенении с указанными параметрами через текстуру.

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

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

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

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

Именно здесь у людей часто происходит непонимание - почему при одних и тех же параметрах иногда движок может сильно тормозить, а иногда - нет. Дело в том, что видимый объем объекта на экране играет важнейшую роль. Если объект занимает весь экран, а сложность просчета его параметров очень высокая, то всего один объект может сожрать всю производительность, так как каждый пиксель экрана будет обрабатываться под этот объект снова и снова (это касается в большей степени шейдеров, и к ним мы вернемся в другой раз).

Теперь стоит отметить, что PBR имеет несколько различных реализаций. Все они схожи между собой и пользуются все теми же каналами пикселей для корректировки конечного результата. Разница лишь в формулах и в конечном результате. Обычно разделяют 2 типа реализации:

В первом типе учитываются параметры Color-Metal-Roughness, во втором — Diffuse-Specular-Glossiness. Именно во втором случае параметр Specular имеет 3 канала.

Оба типа реализации используют одинаково 3 параметра — АО, Normal map, Height.

Хотя при создании текстур в Substance Painter параметр Height и вынесен отдельно, при запекании текстур он вшивается в карту нормали. Но его все еще можно его выделить в отдельный канал.

Давайте рассмотрим теперь то, как это работает в Substance Painter. Для этого мы снова создаем новый проект с обычным плейном и стандартными настройками (о них я рассказывал во второй части статьи). И создадим новый слой заливки:

Теперь рассмотрим стандартную текстуру нормалей из набора Substance Painter «Niche Rectangle Top Wide», которая располагается под тегом Hard Surface:

Далее мы перенесем эту карту нормалей в параметр слоя Base Color (из предыдущего урока мы должны помнить, как это делать). Так выглядит карта нормалей, если воспринимать ее, как изображение (изображение выше). Но теперь удалим ее из параметра BaseColor (мы это сделали для общего ознакомления), нажав на крестик в параметре:

И перенесем ее в параметр Normal:

Ваш конечный результат сразу обновился?

Теперь, если зажать Alt и ЛКМ во viewport'е— можно крутить камерой и смотреть на плейн под разными углами. Свет, отраженный от пикселей, начнет переливаться, создавая иллюзию глубины. Как будто на плейне действительно есть какие-то впадины и выпуклости. Все это заметно под углом от 90 до 140-150 градусов. И чем больше угол наклона, тем больше становится понятно, что это расчет видеокарты, который определяет, как должен отражать свет каждый пиксель, чтобы создавать эту иллюзию. В качестве исходных значений мы передаем в видеокарту 3 параметра в виде каналов пикселя (иначе говоря, текстуру Normal map):

Теперь давайте извращаться. Удалим из параметра Normal эту карту и укажем ее в Metallic.

Но для параметра Metallic используется только один канал, а карта нормалей имеет 3 канала, соответственно, вставляя карту нормалей в этот параметр, Substance Painter обрежет 2 лишних канала (GB - второй и третий по очередности) и оставит только один для расчетов:

И результат:

В конечном результате видно теперь, что больше нет никаких выпуклостей и впадин, но сама поверхность стала походить на какую-то металлическую плату. Вы так же можете посмотреть, как будет выглядеть параметр Metallic в градациях серого без остальных параметров (BaseColor и прочих), переключив режим отображения на 1 канал Metallic (если вы ничего не меняли, то во вьюпорте справа сверху есть возможность переключения отображения):

Выбираем металлик и получаем следующий результат:

Как видим, это один канал в градациях серого, который определяет, какие пиксели должны выглядеть как металл, какие — как нечто среднее, а какие — не металл. 0 — не металлический. 1 — металлический.

Аналогично и с параметром Roughness (1 канал) — любая текстура подойдет для работы с ним. В зависит от того, какой конечный результат вам потребуется. Можете попробовать самостоятельно воткнуть в параметр Roughness любую доступную вам текстуру и посмотреть на результат.

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

Визуально, кресло состоит из 3 материалов:

Каждый материал имеет свои параметры:

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

Сейчас мы знаем:

Исходя из всего этого, мы можем теперь представить, как можно создать мокрый грязный асфальт со следами шин. Можем ведь? Да, конечно, можем. Иначе мы не котятки =)

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

Их нужно где-то найти, а потом добавить в проект Substance Painter =)

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

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

Если вы уже посмотрели файлы, то, наверное, обратили внимание на маску для шин. Она подготовлена отдельно, так как я не смогу ее сгенерировать на ходу в Substance Painter, поэтому я воспользовался рисунком шин, найденным в интернете и подготовил его через Photoshop для работы в Substance Painter:

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

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

В нашем случае очень важна иерархия папок (да и не только в нашем - она всегда важна). Иерархия определяет уровень материала, иначе говоря — что на чем лежит. Асфальт в нашем примере — это дно, самый низкий объект. На нем остаются следы от шин. А вот грязь может быть и на следах шин, и на асфальте. Поэтому грязь будет выше всех.Теперь давайте сразу спрячем все, что должно быть спрятано, и оставим только асфальт. То есть, создадим черные маски на папках Rubber и Dirt:

Теперь создадим в каждой папке по 1-ому слою. А точнее, создадим слои и распределим их в папки. Не забываем о нейминге, чтобы потом не путаться (не смотря на то, что визуально не совсем понятно, что слои находятся в папках — поверьте, они в папках):

Все новые слои имеют базовые средние параметры. Поэтому Base Color серый, нормаль не отображает выпуклостей (все ее каналы по-умолчанию), а Metallic и Roughness не создают впечатления какого-либо материала.

И сейчас нам нужно это исправить, указав в каждый параметр соответствующую текстуру (на примере асфальта):

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

После того, как вы все это проделаете, назначим маску для резины и создадим эффект следов. Так как у нас уже есть черная маска у папки, то нам нужно просто подключить файл со следами колесиков к этой маске. Для этого кликаем ПКМ по маске и выбираем Add Fill:

И в параметрах GrayScale указываем маску:

В результате на асфальте появятся следы резины, но их будет достаточно сложно разглядеть, так как это все таки PBR и кинематографичность (!!!). Чтобы их увидеть, нужно Plane повернуть под определенным углом:

Сейчас эти два слоя (асфальт и резина) находятся на одном уровне. Но мы-то знаем, что резина находится НА асфальте, а значит, слой с резиной должен быть физически выше. И вот теперь мы воспользуемся тем самым параметром Height.

Найдите его в параметрах слоя Rubber и выкрутите его на максимум, чтобы прочувствовать, как он работает. Покрутите камерой, чтобы увидеть, как свет начал обрабатывать пиксели, которые вы настроили своими руками. Прочувствуйте свою мощь! =)

Ну а теперь выровняйте параметр на 0.1, чтобы это было не так явно и более правдоподобно:

Мы могли бы выкрутить в -0.1, чтобы у нас проявились ямки, как после машин на грязи, но это асфальт, и он не проваливается так легко.

Теперь настроим грязь. Исходя из реальности, можно предположить, что грязь должна забиваться в трещины асфальта в первую очередь. Но у нас нет маски, чтобы мы могли проявить слой грязи в трещинах. Однако решение есть — мы можем взять BaseColor асфальта и на его основе сделать маску для грязи.

Как это работает? Если посмотреть на BaseColor асфальта, то можно обратить внимание, что чем темнее пиксель, тем больше он похож на трещину. То есть, в этом изображении все темное — это трещины, а все светлое — это поверхность. И если мы хотим воспользоваться изображением, как маской, то нам достаточно было бы инвертировать цвета (темное сделать светлым и наоборот) пикселей, и у нас получилась маска для грязи.

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

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

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

Теперь наша задача заставить эту текстуру восприниматься иначе — инвертировать цвета и усилить их, чтобы маска проявила грязь в трещинах. Проще всего это сделать с помощью дополнительного эффекта «Уровни» (Levels). Добавляем к маске дополнительный фильтр «Levels» так же, как мы добавляли Fill (ПКМ — Add Levels). И выкручиваем параметры примерно, как на картинке ниже:

И нажимаем на кнопку ниже «Invert» для инвертирования уровней интенсивности канала:

Теперь грязь располагается именно там, где нам нужно — в трещинах асфальта:

Включаем асфальт и присматриваемся к нашим трудам:

Но это слишком просто. Поэтому, давайте теперь добавим на наш асфальт оранжевую разметку. Для этого нам необходимо будет:

Вы так же можете отрегулировать параметры Metallic и Roughness на свой вкус, чтобы создать реалистичную краску. Я не стал этого делать, чтобы сократить размеры тутора.

Теперь, вспоминая правила иерархии слоев, расположим папку с дорожной линией между асфальтом и резиной.

Настало время ручного рисования. Выделите маску папки RoadLine и начертите на плейне (прям на асфальте) полосу разметки. У меня получился примерно такой результат:

Теперь стоит добавить еще одну маску на сам слой с краской, чтобы создать ощущение отвалившейся краски. Для этого мы не будем создавать папку, а создадим маску прямо на слое и добавим любую стандартную маску Substance Painter. Чтобы сделать это — добавьте маску, а потом добавьте заливку (ПКМ по маске и Add Fill). В заливке укажите Текстуру Dirt 4, которая находится под тегом Procedural:

И смотрим результат:

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

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

Ну и какой асфальт без воды?

Для этого создайте самостоятельно папку вместе со слоем. Пока НЕ добавляйте никаких масок.

Установите папку в иерархии на самый верх. Ведь вода же сверху, правильно? У слоя выкрутите на максимум Metallic, а Roughness на минимум. Далее укажите высоту воды, равную 0.15.

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

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

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

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

В предыдущей версии статьи я рекомендовал работать новичкам с Quixel Suite. Однако данная программа более не существует, и на ее место встала вторая версия программы текстурирования от Quixel (а теперь и от Epic Games) Mixer 2020. В целом, новое ПО сохранило традицию простоты и работы с готовыми прессетами. Что можно рассудить, как очень быстро осваиваемую программу для создания текстур и материалов.

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

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

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

Ссылка на предыдущую часть здесь.

Следующая часть здесь.

#tutorial #unrealengine #textures #texturing #gamedev