Текстурирование игровой модели огнетушителя.  (Прочитано 10981 раз)

Автор: Soni Kumari
Источник
Вся серия уроков от Sonu Kumari
Перевод: Viewport


Всем привет!
Этот перевод -- часть серии уроков, начиная  от моделирования и заканчивая рендером, про создание игровой модели огнетушителя от CG художницы Soni Kumari.

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



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

Мы обсудим с вами основные правила и пайплайн текстурирования, используя Photoshop и xNormal. Мы будем использовать стандартные фотошоповские кисти и и некоторые текстурные фотоимеджи.

Шаг 1
Для нашего набора карт мы будем использовать размер 2048х2048. Для этого создадим в Фотошопе новый документ этого размера.





Шаг 2

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



Шаг 3

Прежде чем начать текстурирование, давайте организуем наши карты в Photoshop как показано ниже.   UV/ Screen map —это наша UV развёртка. AO и Normal карты —это те, что мы уже сгенерировали ранее ( в предыдущей части ). Нам нужна будет ещё одна важная карта – Selection map – я создала её с помощью плагина Textools в 3ds Max.



Запустите Textools script и нажмите на опцию TxMap.  Выберите BlockoutMap, укажите размер текстуры  (2048 x 2048) и Edge Padding и кликните на Save  As. В результате вы получите карту Selection? Которую и будем использовать в Photoshop.




Шаг 4

Вернёмся в Photoshop, и сделаем отдельные группы для слоёв. Создадим Utilities group и поместим в неё UV и Selection слои.
Сделайте группу АО и положите в неё слой АО. Сделать  группу Normal , и в неё пложите слой с нормалями, и наконец, сделайте новую группу под названием Color , а затем создайте новый слой с серым цветом и поместите его в группу.

Примените указанные режимы наложения к каждому слою, как показано на рисунке ниже. Режим Screen применяется к UV-слою, так что видна будет только сетка. Multiply  применяется к слою АО, чтобы  извлечь тень.




Шаг 5

Теперь давайте создадим cavity карту с помощью карты нормалей. Cavity map может быть очень полезной для создания подсветки по краям и в углах предмета. Итак, прежде всего, выберите Normal layer , нажмите Control-J (или щелкните правой кнопкой мыши и выберите Duplicate Layer), чтобы создать дубликат слоя. Затем переименуйте его в Cavity map.




Шаг 6


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

После установки плагина в Photoshop, перейдите на Filter> Xnormal> Normals2Cavity.



Шаг 7


Так как  наша Normal map запекалась в 3ds Max, координаты Swizzle должны быть установлены в X +, Y +, Z + и  Method option должен быть установлен в EMB. Затем нажмите на Update и зактем Continue.



Шаг 8.
Это Cavity map.



Шаг 9.

Теперь поместите Cavity map в группу Color и примените смешение Overlay. Здесь 1 слой с серым цветом является фоном.



Шаг 10.

Сейчас мы применим цвет к нашей текстуре. Создайте новый слой в нутри группы Color и залейте его цветом меди  (R: 175, G: 123, B: 99). Назовите этот слой – Copper (Медь).



Шаг 11

Поместите слой Copper между слоями Cavity и Base.



Шаг 12.

Сохраните текстуру в файл и примените его на огнетушитель в 3d Max. На рисунке вы увидите как текстура выглядит на двух разных материалах. На одном из них только диффуз, а на другом диффус с некоторым значением отражения.

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



Шаг 13.

Если назначить Selection map, то вы увидите что части разделены разными цветами. Они показывают где будет находиться нужный материал – латунь, медь, резина.




Шаг 14.

Вернёмся в Фотошоп и сделаем отдельное выделение для каждого объекта. Используя  Magic Wand tool (W), выберите нужную область слоя  Selection и нажмите Control-J —выбранная часть будет находиться в новом слое.

Как вы видите ниже, я создала выделение для слоя Copper, используя выделение зелёного цвета из слоя Selection.




Шаг 15

 Замаскируйте свои цветные слои соответствующим выделением. Выберите  слой Copper и примените маску , используя кнопку Add a Mask внизу  Layer Manager-а. Затем залейте выбранную область белым цветом в маске ( там, где вы хотите, чтобы была медь)

Всё что в маске белое – будет видно, то, что чёрное – будет невидимым.




Шаг 16.

Теперь создайте новый слой над слоем с медью и назовите его Brass ( латунь)
Залейте его цветом, напоминающим латунь.



Шаг 17.
 Здесь вы видите как я сделала тот же процесс для латуни. Я применила маску к слою Brass и заполнила её белым цветом там, где мне нужно увидеть латунь. Также я создала слой Rubber( резина) и просто залила его тёмным цветом. Также применила выделение, которое я создала для материала с резиной.



Шаг 18.

Снова сохраните карты и вернитесь в 3D Max. Вы видите как легко узнать материал по цветам.



Шаг 19

Теперь давайте добавим некоторые детали на поверхность. Мы добавим детали шаг за шагом, и от простых  к сложным. Создайте новый слой над слоем Brass и Copper, и пойдите в  Filter > Noise > Add Noise... и примените шум, используя следующие настройки.  Так мы придадим немного шума нашим текстурам.



Шаг 20

Теперь пойдите в Filter >Artistic >Sponge и примените эти настройки.



Шаг 21

 Теперь сохраните теккстуру и примените на объект в 3d Max. Здесь есть проблема с Texel rate (об этом можно больше узнать в части урока , где мы делали Uv маппинг) . Шум выглядит слишкм большим, поэтому мы должны его немного уменьшить.



Шаг 22
Выберите  слой Noise , нажмите  Control-T, чтобы войти в режим Трансформации и уменьшите слой на 50%, чтобы сделать мельче зерно шума. Теперь сдублируйте и разместите  этот шум, покрывая всю текстуру.



Шаг 23.
 Посмотрите на результат. Это как раз тот размер шума, что нам нужен.


Шаг 24
Вернёмся в Фотошоп и изменим режим наложения слоя на Soft Light  с opacity 30%. Теперь вы увидите небольшой шум по всей цветной поверхности.


Шаг 25

Добавим детали -- пятна, гранж для более изношенного вида. Я использую текстуру из http://www.cgtextures.com. Но существет множество  подобных карт и в других местах, которые вы можете поробовать использовать.


Шаг 26

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



Шаг 27

Измените режим смешивания на Luminosity и установите значение Fill до 20%.


Шаг 28

Добавим еще одну текстуру с царапинами и деталями грязи.



Шаг 29

Кликните дважды на слое, чтобы открыть диалоговое окно Layer Style. И отрегулируйте смешивание с помощью опции Blend If. Переместите белый правый бегунок к середине, и вы увидите  как светлые области из текстуры начнут растворяться. Сделайте то же самое с черной рукояткой с левой стороны, чтобы добиться желаемого результата. Можно также разделить  бегунки и настроить их вручную, нажав на них с Alt.


 Шаг 30
Теперь мы применим патину на поверхность. Патина – это покрытие , которое состоит  из различных химических соединений, таких как оксиды, карбонаты, сульфиды и сульфаты, которые образовались на поверхности при воздействии атмосферных элементов (кислорода, углекислого газа, дождя, кислотного дождя, серосодержащих соединений). Типичным примером является ржавчина, которая образуется на железе и стале при контакте с кислородом.


Патина также может появиться в текстуре поверхности и цвета даже при нормальной эксплуатации предметов. С течением времени могут покрыться патиной монеты или предметы мебели.

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


Шаг 31

Выберите слой  AO  и нажмите Control-A, чтобы выделить всё. И затем нажмите Control-C чтобы скопировать выделенное. Затем выберите слой с патиной, добавьте маску, и с нажатым ALT, кликните на маску и вставьте вашу АО (Control-V)

Затем инвертируйте маску, используя Ctrl+I, и вы увидите как появятся зелёные области на вашей текстуре. 



Шаг 32

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



Шаг 33

Сейчас латунь выглядит слишком чистой и равномерной.  Мы добавим детали и царапины, чтобы она выглядела как настоящая.



Шаг 34

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



Шаг 35

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


Шаг 36

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



Шаг 37

Замаскируйте эту текстуру, используя выделение Brass.



Шаг 38

Примените  режим смешивания  Soft Light  с  50%  прозрачности.



Шаг 39

Теперь мы можем видеть детали на медной поверхности.


Шаг 40

Добавим ещё немного грязи и гранжа на основную поверхность. Здесь я использую различные текстуры. Сделайте её тайловой и отрегулируйте под размер вашей текстуры.



Шаг 41

Инвертируйте этот слой Control-I и измените метод смешивания на Hard Light, с прозрачностью, а значение  Fill до 82%.


Шаг 42

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



Шаг 43

Применим другую маску для меди.



Шаг 44

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




Шаг 45

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



Шаг 46

Когда текст готов, скройте Color group и добавьте этот слой  к слою Normal. Фон текстового слоя должен быть серым.


Шаг 47

Сконвертим этот текст в карту нормалей. Выберем слой с текстом и идём Filter > xNormal > Height2Normals.


Шаг 48

Установите такие настройки


Шаг 49

Посмотрите на эту отличную карту нормалей. Поместите её через Overlay на основную карту нормалей.



Шаг 50

Двойной щелчок на слое и вы откроете диалоговое окно Layer Style. Перейлите в раздел Advanced Blending и отключите синий канал B (Blue).



Шаг 51

Так карта выглядит в 3ds Max.  Чтобы применить карту нормалей к материалу и включить её видимость во вьюпорте , смотрите раздел уроков «Запекание карты нормалей».


Шаг 52

Создайте Cavity map для слоя с текстом, так же как мы делали это в шаге 7.


Шаг 53
Примените Overlay  к Cavity map  на карту Brass. Если хотите, можете добавить немного теней под текстом.



Шаг 54

Создайте новый слой над слоем Brass и залейте его красным цветом.



Шаг 55

Примените маску и вставьте её  в текстовый слой так, чтобы текст был виден через красный цвет. Переименуйте слой в Paint Layer.



Шаг 56

Сдублируем слой  Patina и поместим копию  поверх слоя Brass.Назначим маску и зальём её чёрным цветом.



Шаг 57

Выберите инструмент Brush и выберите правым кликом Wet Media brush.  Выделите Rough Ink brush и включите  Shape Dynamics  и  Scattering.


Шаг 58

Нанесите несколько лёгких мазков в углах и внутри,  в местах, где соединяются формы.

Примечание: Когда вы делаете мазки, используя белый цвет на маске, это означает,  что нижний слой будет виден. Но если нажать X или изменить цвет на черный, это работает как ластик. Таким образом, вы можете настроить видимость ваших мазков, выбирая чёрный или белый, пока вы рисуете.



Шаг 59
Теперь сделайте копию слоя Grunge  (Шаг 40) и поместите его поверх слоя Paint.


Шаг 60

Инвертируйте этот слой и примените режим наложения Multiply. Маску покрасьте в чёрный цвет.


Шаг 61

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


Шаг 62

Выберите кисть Rough Dry и добавьте несколько царапин на красной покрашенной части.


Шаг 63

Чтобы сделать царапины, выберите в палитре чёрный цвет и зарисуйте на маске вдоль краёв и углов этой текстуры.



Шаг 64

Добавим отдельку и заклёпки.


Шаг 65

Над слоем с нормалкой создайте новый слой и нарисуйте чёрно-белую линию и белые кружочки для заклёпок.


Шаг 66
Вставьте этот слой в карту нормалей с помощью Xnormal (шаг 48). Отрегулируйте глубину как вам нужно.




Шаг 67

Это результат нормал карты в 3d Max.


Шаг 68

Добавьте детали вокруг шва и заклепки, как мы делали в шаге 58.


Шаг 69

Это финальный результат.



Шаг 70

Теперь сделаем карты Specular и Gloss.
Specular map: Эта карта используется для определения света и блеска на поверхности.

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

Gloss map: Карта блеска определяет ширину или размер бликов и количество отражений на поверхности. В настоящее время большинство игровых движков и системы визуализации используют Gloss map для контроля отражения.



Шаг 71

Для начала  скопируйте  папку Color map и переименуйте её в Spec (Шаг: А). Откройте эту папку и применять корректирующий слой для Hue / Saturation (Шаг: B). (Вы можете найти этот инструмент в нижней части диалогового окна Layer). Теперь сохраните эту текстуру как Specular.



Шаг 72

В 3ds Max, удалить карту Diffuse из слота  Specular и применить новую карту Specular.

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



Шаг 73

Вы видите specular map и заметьте, что теперь поверхности имеют различные значения в зависимости от различных материалов.



Шаг 74

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



Шаг 75

Теперь мы должны сделать карту Gloss . Процесс создания очень похож на процесс создания  карты Specular.



Заключение

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

Есть много различных вариантов для рендеринга (Scanline, Mental Ray, V-Ray и т.д.), чтобы сделать вашу работу более красивой. Здесь я показала в реальном времени скриншот, сделанный в  Marmoset Tool Bag.   Ура!!



Автор: Soni Kumari
Источник
Вся серия уроков от Sonu Kumari
Перевод: Viewport

Прежде чем начать текстурирование, давайте организуем наши карты в Photoshop как показано ниже.   UV/ Screen map —это наша UV развёртка. AO и Normal карты —это те, что мы уже сгенерировали ранее ( в предыдущей части )


а где это предыдущая часть?

Я перевела только часть из серии уроков ( я писала об этом в самом начале )
Вся серия состояит из 5 частей. Пятая часть -- о текстуринге. Только её я и перевела для форума.
Остальные части можно посмотреть на английском тут -- http://cgi.tutsplus.com/series/create-a-game-ready-fire-extinguisher--cms-596

Делюсь наблюдениями по уроку.
Шаг 31. О создании патины. Не получилось у меня создать маску АО для патины способом, о котором говорит автор урока.

Я её сделала по-другому. Выделяла не саму АО карту, а зашла в каналы ( Channels) и там только выделила АО ( такм образом, выделив только тёмный тон, а не весь документ)
 И потом выделение перенесла в маску. Инвертировал и уже далее по уроку...

отличный урок. Света, тебе спасибо за труд!!!   (handshake)