Текстурирование, или что нужно знать, чтобы стать Художником по поверхностям. Часть 2. Маски и текстуры
Продолжаем серию уроков о том, как стать художником по поверхностям.
Hello there! Моё имя Денис Кузнецов. Я - программист.
Важно. Я не буду рассматривать в этой серии статей о том, как должна быть настроена гамма, какой должен быть оттенок под камушком у того-то листочка. Это не курс о том, как нарисовать красиво. Это курс о том, как это все работает глубоко под капотом с точки зрения ПО и математики. Прочитав эти статьи вы не станете супер-художником 120-го уровня, но теперь вы сможете работать в материалах, программах без каких-либо сложностей, будете понимать, как собрать очень сложный материал в UE4 за несколько минут.
Итак, котятки, погнали! =)
Маски
В прошлой части мы рассмотрели принципы работы каналов и нашу первую маску, которую я создал — маску прозрачности.
Маска прозрачности в примере с котиком была создана с помощью отдельного канала под названием «альфа-канал». Этот канал также имел размерность 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 (черный цвет) - на конечном результате стал отображаться нижний слой.
Запомните и осознайте, маска всегда смешивает только 2 слоя. Тот, к которому маска прикреплена, и тот, который под ним. Сложности появляются тогда, когда нам нужно смешать 3 слоя и более. В этом случае мы всегда смешиваем более верхний слой с конечным результатом нижних слоев.
Итак. Маска - это обычно черно-белое изображение, которое использует 1 канал данных с диапазоном от 0 до 1. Черно-белое оно исключительно потому, что так удобно нам с вами его воспринимать. Но что более важно, так это понять то, что маска - это просто набор данных о пикселях, в которых не 3, а 1 канал.
Посмотрите на эту маску:
Как вы думаете, что будет, если мы используем эту маску для наших двух слоев - зеленого и синего? Как будет распределяться тогда цвет?
Как видите, зеленый цвет виден ровно там, где маска белая, и не виден там, где маска черная. Представьте, что зеленое - это красное, а синее - это черное? Пятна крови на черном полу? =)
Как вставить изображение в маску? Скопируйте изображение в буфер обмена (ctrl+C). Выделите маску в слоях и перейдите в "каналы". Там выделите появившийся канал "Слой маски" и вставьте из буфера изображение (CTRL+V). Ну а дальше можно растянуть или сжать картинку, нажав CTRL+T.
Маска в текстурировании — это изображение, которое состоит из 1-го канала и необходимо для смешения двух слоев. В нашем примере, слоев с зеленым и синим цветами. Маска в текстурировании используется для решения нескольких задач:
- Определение степени прозрачности одного слоя над другим.
- Определение интенсивности чего-либо. Например, это может карта высот, где самые белые пиксели — это горы, а черные — это впадины. Или второй пример — глубина кадра — где светлый — это самый отдаленный объект.
На самом деле, делить на две задачи работу масок не обязательно — и там и там используется степень интенсивности.
- В первом случае - это интенсивность видимости верхнего слоя.
- Во втором случае - интенсивность выдавливания вертексов (для определения гор), или определения глубины.
Маски в Substance Painter.
Сейчас мы рассмотрим наглядно принцип работы масок в Substance Painter и попробуем напялить стильную шляпу Коту.
Как вы заметите, принцип работы со слоями будет такой же, как в Photoshop'е - чем выше слой, тем он главнее, и если нам надо где-то отобразить нижний слой, нам придется подключать маски или рисовать их вручную.
Хорошее отличие Substance Painter от Photoshop'а - это крайне удобная система работы с масками. В SP она более удобная, наглядная и гибкая. Маски можно даже переносить в отдельные слои и выгружать в отдельные каналы.
Для этого мы создадим новый проект, укажем и добавим наши фотографии шляпки и кота в программу.
Заметка: Substance Painter не позволит создать проект без 3D-модели, поэтому я создал квадратный plane в Autodesk Maya. Создание моделей находится за рамками наших туторов, поэтому эту информацию вам нужно найти самостоятельно.
Так же мы не будем рассматривать детально интерфейс Substance Painter, чтобы не затягивать.
Если вы работаете с Substance Painter впервые, то, если ничего лишнего не нажимать, все окна должны отображаться корректно, и найти нужные параметры будет не сложно.
Далее нам необходимо создать 2 слоя заливки:
Прежде, чем мы продолжим дальше, мы должны уяснить то, что всё в этой программе (да и в других) построено на каналах, масках и слоях.
Разница между Photoshop'ом и Substance Painter в том, что слои в SP имеют куда больший потенциал и хранят в себе куда больше данных, нежели Photoshop. Все эти данные нужны для работы с PBR (системой текстурирования, которая приближена к реалистичному отображению поверхностей), и мы обязательно будем разбирать их в этой части, но ниже. А пока представьте, что слои - это просто изображения.
Слой заливки в Substance Painter — это набор параметров, который будет храниться в этом слое.
Слои в SPсостоят из каналов, которые мы можем добавлять, удалять и настраивать. Если в Photoshop'е мы не могли регулировать у каждого слоя каналы отдельно, то переходя в SP у нас появляется такая возможность, так как каналы - это набор данных, который можно подключать и отключать у каждого слоя. А так же это возможность придать каждому слою дополнительные свойства.
Параметры в Substance Painter— это по сути каналы и даже группы каналов, из которых они формируются. Например, есть параметр BaseColor (Color), который формируется из 3 каналов (RGB). Или карта нормалей, которой так же для корректного отображения так же требуется 3 канала.
По умолчанию слой состоит из:
- 3 основных канала, которые выделяются для построения цвета. Эти три канала объединены в один параметр «Color».
- 3 дополнительных канала, каждый из которых отвечает за какие-то визуальные эффекты. Это Height (отвечает за ощущение высоты на текстуре). Это Metal (отвечает за ощущение металла в поверхности). Это Rough (отвечает за ощущение шероховатости поверхности).
- 3 канала для работы с картой нормалей (Normal map).
Нас интересует только первые 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 интенсивностью:
Сама маска выглядит так:
Таким образом маска позволила нам определить какой участок в слое со шляпами отображать. Хорошо, это применимо к редактированию котиков. А как это применять к текстурам в играх?
Чуть более ложные комбинации масок.
Теперь давайте рассмотрим чистую плитку для пола. Точнее, ее текстуру:
Теперь представим, что нам нужно создать текстуру плитки, которая была бы испорчена, с трещинами и грязью. Причем, не просто грязью, а именно такой, как ниже на текстуре:
Мы уже умеем создавать слои заливки с текстурами и сейчас наша задача:
- Создать новый проект с теми же настройками, что были в предыдущем (мы будем считать их стандартными).
- Создать 2 слоя — один для плитки, другой для грязи. Так как грязь должна быть сверху плитки, то слой с грязью мы располагаем выше.
Но теперь мы не накладываем маску на слой с грязью, а создаем пустую папку для слоев и помещаем слой с грязью в эту папку (помним, что папка должна все еще быть выше по иерархии, чем плитка).А маску создаем уже на самой папке.
Теперь давайте определим зоны, в которых можно нарисовать грязь (вы делайте свое, а я свое). И не забываем, что для редактирования маски нам необходимо выделить маску на папке, а не какой-нибудь слой.
Итак, у меня получилась примерно следующая картина:
Не шедевр, но зоны, в которых должна отображаться грязь, мы определили.
Теперь создадим еще одну папку внутри готовой папки со слоем грязи и перенесем слой с грязью в эту папку. Итого, у на получилось, что слой с грязью находится в папке, которая находится в другой папке:
На новой папке так же создадим маску, Но на этот раз уже не сплошную заливку, а выберем что-нибудь из существующих различных масок. Например, вот это я нашел в интернете:
Чтобы загрузить изображение и потом использовать его в качестве маски, необходимо перенести в во внутренний браузер файлов SP в shelf (в папку) из браузера и выбрать следующие параметры:
Далее. Установить в качестве маски эту текстуру легко. Кликаем по папке так же ПКМ и выбираем Add Bitmap Mask. В появившемся окне находим нужную нам текстуру и выбираем ее в качестве маски. Иерархия с папками стала выглядеть так:
Отметим, что в маленьком окошке-превьюшке слоя верхней папки вместо полноценной грязи стала отображаться куча квадратиков с мало заметными проблесками грязи. Это результат того, как будет обрабатываться текущий слой грязи с учетом всех масок, которые мы добавили.
А в целом, у нас получилась примерно следующая картина:
В данном примере у нас произошло смешение двух масок.
- Верхняя маска на самой верхней папке в иерархии определяла зоны видимости. То есть, она четко говорила, здесь можно показывать грязь (1), а вот здесь — нельзя (0).
- Вторая маска под ней определяет теперь то, где именно в разрешенных зонах можно, а где нельзя отображать грязь.
Это не всегда легко понять — что такое зонирование маской и что такое — покрасить по маске в разрешенной зоне. Чтобы оценить это — попробуйте на верхней маске нарисовать круг, а на маске ниже попробуйте выйти за пределы этой зоны. И вообще, попробуйте создать 3 маски, 4 и даже 7. И попробуйте удерживать прогнозируемый конечный результат, зайдействовав все 7 масок. А 20?
Те пиксели, в которых обе маски имели значения больше 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 изображения (текстуры):
- Изображение (текстура) с цветом (3 канала на пиксель).
- Изображение (текстура) с каналами для параметров PBR.
- Изображение (текстура) для определения нормалей.
То есть, Substance Painter уже сделает все расчеты так, чтобы можно было полученный конечный результат просто сохранить в изображении.
Контролировать в этих изображениях маски прозрачности грязи уже не получится — изображения (текстуры) в данном случае получились, как конечный результат (часто говорят, что они запеклись из того хаоса из масок, который вы создали в программе), который мы можем расположить на модель, покрасив ее.
Текстура
Я намеренно писал в итогах о масках «Изображение (текстура)», чтобы у вас начало откладываться понимание того, что текстура по факту — это не изображение в привычном для нас понимании.
Текстура — это набор параметров для того, чтобы игровые движки или программы для работы с текстурами, понимали, как нужно обработать пиксель.
Текстура может содержать в себе 1 канал. Например, для прозрачности. Или может содержать в себе сразу 3 канала для различных целей (например, для параметров работы Metal, Roughness и Ambient Occlision).
Разновидностей применения текстур очень много, но все они сводятся к одному — к работе с 1-м или несколькими каналами.
Например, текстура Cavity (трещинки) обычно описывает грани (ребра) объекта на развертке, выделяя пиксели максимальном белым по всей длине ребер. Но по факту — это просто текстура с одним каналом, а белый цвет показывает, где на развертке модели грани (если вы не понимаете, о чем идет речь - не страшно, успеете). Такую текстуру можно использовать, например, в качестве маски грязи — то есть, по ней мы можем отображать грязь на объекте.
Очень важно, поэтому прочтите это внимательно.
Маски - это всегда 1 канал. О чем это может нам сказать?
Мы можем использовать в качестве масок абсолютно любое изображение, в котором есть хотя бы 1 канал. Мы можем взять картинку с моим котом и использовать канал R в качестве маски для смешения каких-нибудь двух слоев.
Мы можем использовать любые абсолютно параметры в качестве маски, потому что маска - это просто канал =)
Немного PBR-текстурировании
Немного заглянем вперед и рассмотрим чуть-чуть PBR.
PBR — это основанный на физике рендер текстур (именно основанный, а не физически корректный). То есть, это набор параметров, управляя которыми мы можем заставить текстуру выглядеть кинематографично.
Для этого используются параметры, которые отвечают за то, как должен свет отображаться на пикселе. Вот список этих параметров:
- Metallic. Отвечает за представление пикселя в качестве металла. То, насколько легко свет отражается от пикселя.
- Roughness. Отвечает за степень шороховатости пикселя. То, насколько сильно свет рассеивается, соприкасаясь с пикселем.
- Ambient Occlusion. Отвечает за затенение пикселей. Тот параметр, который становится устаревшим и, в скором времени, им не будут пользоваться вообще, так как давно просчитывается в реалтайме.
- Normal Map. Отвечает за то, как свет может искажаться на пикселе, создавая мнимую ненастоящую глубину или изгиб.
- Albedo (Color) — цвет, которым должен отображаться пиксель.
Есть еще тонна различных параметров, которые можно или не нужно учитывать, чтобы получить результат. Все зависит от того, какого эффекта вы добиваетесь.
Например, если в Substance Painter указать в канал Metal интенсивность, равную 1 (255), то результат будет максимально отражать все вокруг, как чистейший металл (хром).
А настроив канал Roughness по максимуму (указав 1 или 255), мы видим, что теперь пиксель перестал отражать все вокруг и стал рассеивать свет настолько сильно, что стал серым:
Очень важно понимать, что не существует отдельных текстур, специализирующихся на чем-то одном. Все текстуры — это каналы, у пикселей которых есть интенсивность или значения, указывая которые, вы сообщаете тому или иному параметру реагировать так или иначе.
Максимально подробно PBR мы разберем в следующей части урока. А так же рассмотрим дополнительные приемы смешивания масок для улучшения картинки.
Главное, помните, если вам говорят, что для работы чего-то нужна какая-то непонятная карта высот — теперь вы знаете, что это просто текстура с одним каналом, интенсивность пикселей в которой определяет высоту.
Ну а пока вы отдыхаете перед продолжением - подписывайтесь на меня и не забывайте включить колокольчик, чтобы вам упало уведомление. Вдруг что-то новое напишу =)
Ну и ссылка на след.часть здесь.
Ссылка на предыдущую часть здесь.