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

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

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

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

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

Маска прозрачности в примере с котиком была создана с помощью отдельного канала под названием «альфа-канал». Этот канал также имел размерность 8 бит на пиксель.

Каждый пиксель маски может иметь значение от 0 до 255 (или до 1), где 0 — это полностью прозрачный пиксель, а 255 (или 1) — полностью не прозрачный пиксель.

А вот если посмотреть на альфа-канал, как на обычный канал, то станет понятно, что он ничем не отличается от любого другого канала RGB. Альфа-канал — это всё те же значения, у которых есть такая же интенсивность от 0 до 255 (до 1). Это всё тот же градиент серого. И если бы мы взяли любой другой канал, скопировали бы его и вставили в альфа-канал, то получили бы интересный эффект.

Маска накладывается на всё изображение, но там, где интенсивность пикселей максимально яркая (близкая к 1 или 255), там цвет маски наименьший, а где интенсивность максимально низкая (ближе к 0), то там маска наоборот очень ярко выделяется красным цветом.

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

На самом деле, не обязательно. Альфа-канал необходим, чтобы изображение могло сохранять данные о цвете и иметь при этом данные о прозрачности. То есть, получается, что в изображении 1 пиксель имеет обязательных 3 канала, а 4-й канал является дополнительным и не обязательным.

Итого, в нашем изображении не 32 бита цвета, а всего 24 бита цвета (8 бит * 3 канала) + 8 бит прозрачности. Причём, мы можем не включать канал прозрачности в изображение, и тогда размер файла будет на 1/4 меньше.

Для начала нам надо расписать всё то, что мы узнали.

Изображение - это набор пикселей. Картинки в интернете, у вас в папке с фотографиями пор...тативных кансолей. Тут вроде все легко.

Пиксель изображения - это одна точка в изображении, которая состоит из нескольких данных. Если мы говорим об изображении, то пиксель состоит обычно из 3-4 каналов. 3 канала на цвета (RGB) и 4-ый канал на прозрачность, если он есть в изображении (может и не быть).

Каналы - это то параметры одного цвета в пикселе. А как мы помним, пиксель состоит из трех цветов - RGB. Тут вроде тоже все легко.

Когда мы говорим о сложных программах (например, Photoshop), в которых мы рисуем текстуры или просто картинки, то мы обязательно сталкиваемся со слоями и результатом изображения (конечным результатом).

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

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

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

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

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

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

Давайте к Слою 1 добавим маску прозрачности.

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

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

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

Как видите, на том месте, где пиксели у маски стали равны 0 (черный цвет) - на конечном результате стал отображаться нижний слой.

Итак. Маска - это обычно черно-белое изображение, которое использует 1 канал данных с диапазоном от 0 до 1. Черно-белое оно исключительно потому, что так удобно нам с вами его воспринимать. Но что более важно, так это понять то, что маска - это просто набор данных о пикселях, в которых не 3, а 1 канал.

Посмотрите на эту маску:

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

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

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

На самом деле, делить на две задачи работу масок не обязательно — и там и там используется степень интенсивности.

Сейчас мы рассмотрим наглядно принцип работы масок в Substance Painter и попробуем напялить стильную шляпу Коту.

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

Далее нам необходимо создать 2 слоя заливки:

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

Разница между Photoshop'ом и Substance Painter в том, что слои в SP имеют куда больший потенциал и хранят в себе куда больше данных, нежели Photoshop. Все эти данные нужны для работы с PBR (системой текстурирования, которая приближена к реалистичному отображению поверхностей), и мы обязательно будем разбирать их в этой части, но ниже. А пока представьте, что слои - это просто изображения.

Слой заливки в Substance Painter — это набор параметров, который будет храниться в этом слое.

Слои в SPсостоят из каналов, которые мы можем добавлять, удалять и настраивать. Если в Photoshop'е мы не могли регулировать у каждого слоя каналы отдельно, то переходя в SP у нас появляется такая возможность, так как каналы - это набор данных, который можно подключать и отключать у каждого слоя. А так же это возможность придать каждому слою дополнительные свойства.

Параметры в Substance Painter— это по сути каналы и даже группы каналов, из которых они формируются. Например, есть параметр BaseColor (Color), который формируется из 3 каналов (RGB). Или карта нормалей, которой так же для корректного отображения так же требуется 3 канала.

По умолчанию слой состоит из:

Нас интересует только первые 3 канала - параметр Color. Остальные параметры отвечают за PBR текстурирование, и мы к ним придем в следующей части. Поэтому все ненужные каналы можно отключить, как это сделано у меня на скриншоте выше.

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

Повторяем это действие со вторым слоем и шляпой.

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

Когда мы добавили котика, то его картинка растянулась, и он стал широким (не как Фил). Так как SP рассчитан на создание текстур (не на надевание шляп котикам, как мы хотели бы), а текстуры полагается делать квадратными, то изображение котика будет слегка растянутым вширь, так как фотография его является прямоугольной по вертикали, и Substance Painter ее растянул до квадратной формы.

В связи с этим нам необходимо изменить масштаб картинки и растянуть фотографию на слое вертикально. Для этого мы снимаем блокировку сохранения соотношений и вытягиваем картинку, установив вертикальный scale на 0.7.

Теперь нужно подогнать таким же образом размер шляпы, однако теперь отключать сохранение отношений уже не нужно. Так как шляпа у меня очень большая получилась, то при изменении масштаба начинает работать такой эффект, как тайлинг — текстура начинает повторяться по горизонтали и по вертикали, таким образом система не позволяет оставлять пустые места (как это можно делать в Photoshop), если изображение меньше, чем размер конечного изображения (в нашем случае, меньше, чем 1024х1024 пикселей).

Мы сделали скейл шляпы до нужного нам размера (Значения подберите самостоятельно). Теперь нам необходимо поместить шляпу плюс-минус над головой кота — для этого начинаем крутить параметры Offset (смещение), сдвигая нужную нам шляпу на котика. Настройка Offset находится там же, где и Scale - чуть ниже.

У нас получилась примерно следующая картинка:

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

Для этого мы кликаем по слою ПКМ и выбираем «Add Black Mask».А что происходит с пикселем, когда канал маски прозрачности пикселя на нем равен 0 (полностью черный)? Правильно, пиксель становится полностью прозрачным и не отображается совсем:

Как вы обратили внимание — теперь слой состоит из двух изображений: одно изображение — это шляпы, а второе изображение — это полностью черная маска. Маска в Substance Painter (как и везде, в принципе) создана из одного канала. Заметили схожесть с Photosop?

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

Для этого выделяем слой с маской, и выделяем саму маску (это важно, так как редактировать слой заливки нельзя, можно редактировать только маску).

При выделении маски нам открываются настройки кисти, которой мы будем рисовать по маске, и в самом низу настроек есть настройка интенсивности (Grayscale) от 0 до 1 (от 0 до 255 соответственно).Теперь, рисуя по маске над головой котика мы проявим шляпу:

Ну, и убираем лишнее с помощью кисти с 0 интенсивностью:

Сама маска выглядит так:

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

Теперь давайте рассмотрим чистую плитку для пола. Точнее, ее текстуру:

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

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

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

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

Итак, у меня получилась примерно следующая картина:

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

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

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

Чтобы загрузить изображение и потом использовать его в качестве маски, необходимо перенести в во внутренний браузер файлов SP в shelf (в папку) из браузера и выбрать следующие параметры:

Далее. Установить в качестве маски эту текстуру легко. Кликаем по папке так же ПКМ и выбираем Add Bitmap Mask. В появившемся окне находим нужную нам текстуру и выбираем ее в качестве маски. Иерархия с папками стала выглядеть так:

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

А в целом, у нас получилась примерно следующая картина:

В данном примере у нас произошло смешение двух масок.

Те пиксели, в которых обе маски имели значения больше 0, начинали отображать грязь в зависимости от нижнего предела интенсивности (если у первой маски на пикселе интенсивность 0.5, а на второй 0.2, то пиксель будет прозрачным на уровне 0.2). Еще проще говоря, каждый пиксель учитывает все маски, которые влияют на его отображение, но отображается по самому минимальному. И если хоть одна маска равна 0, то пиксель отображаться не будет.

Слои — это изображения в Photoshop, набор каналов в SP, которые имеют кучу комбинаций каналов для контролирования состояния изображения. Каналы и их комбинации так же можно добавлять в слои.

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

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

А теперь немного страшного и сложного — слои в Sabstance Painter накладываются друг на друга, и программа уже делает расчеты на 1 пиксель куда большие, чем для 9 каналов. То есть, в случае смешения 2 слоев в 1-ом пикселе, ПО необходимо просчитать 9 каналов одного слоя, потом учесть прозрачность по маске, если она есть, и просчитать общую интенсивность пикселя с учетом маски. После чего необходимо просчитать второй слой, и его 9 каналов.

Итого 18 каналов слоев и 1 канал смешения. Конечно, когда вы будете выгружать это в изображения (текстуры), то никаких 19 каналов не будет — Substance Painter создаст 3 изображения (текстуры):

То есть, Substance Painter уже сделает все расчеты так, чтобы можно было полученный конечный результат просто сохранить в изображении.

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

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

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

Текстура может содержать в себе 1 канал. Например, для прозрачности. Или может содержать в себе сразу 3 канала для различных целей (например, для параметров работы Metal, Roughness и Ambient Occlision).

Разновидностей применения текстур очень много, но все они сводятся к одному — к работе с 1-м или несколькими каналами.

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

Немного заглянем вперед и рассмотрим чуть-чуть PBR.

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

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

Есть еще тонна различных параметров, которые можно или не нужно учитывать, чтобы получить результат. Все зависит от того, какого эффекта вы добиваетесь.

Например, если в Substance Painter указать в канал Metal интенсивность, равную 1 (255), то результат будет максимально отражать все вокруг, как чистейший металл (хром).

А настроив канал Roughness по максимуму (указав 1 или 255), мы видим, что теперь пиксель перестал отражать все вокруг и стал рассеивать свет настолько сильно, что стал серым:

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

Максимально подробно PBR мы разберем в следующей части урока. А так же рассмотрим дополнительные приемы смешивания масок для улучшения картинки.

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

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

Ну и ссылка на след.часть здесь.

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

#gamedev #textures #текстурирование #опыт #tutorial #substancepainter