The Sims 3 Рельеф на одежде (карты нормалей)

cheerful_weasel

Проверенный
Сообщения
9
Достижения
0
Награды
26
Screenshot-64.jpg


В туториале описывается создание рельефа на одежде.

Спойлер

Необходимые программы и материалы:
  • TSR Workshop
  • Adobe Photoshop CS4 или CS5
  • плагин от NVIDIA для импорта/экспорта DDS карт нормалей
  • Milkshape 3d
  • The Sims 3

Давайте вначале разберёмся, что же такое карта нормалей и для чего она используется в SIMS 3. Те, кто занимается 3d моделированием или разработкой игр уже, наверное, знают об этом достаточно, однако советую всё же прочитать эту статью полностью, т.к. в SIMS 3 карты нормалей имеют немного другой формат.
Так же можете ознакомиться с теорией (по ссылкам, которые приведены в конце этого текста)
И так, из курса геометрии мы знаем что нормаль - это прямая, ортогональная (перпендикулярная) касательной прямой к некоторой кривой или касательной плоскости к некоторой поверхности. Если это сложно переваривается у вас в голове, поясню. Возьмём кривую, проведём к ней касательную, проведём к касательной перпендикуляр. Этот перпендикуляр и есть нормаль.
В 3d моделировании карта нормалей нужна для придания модели псевдо-рельефности. Т.е. каждый пиксель карты (текстуры) нормалей содержит информацию о высоте/глубине и угле смещения. Таким образом можно нарисовать мелкие детали, которые будут выглядеть рельефно под разными углами освещения, при этом не нагружая видео карту большим количеством полигонов. Можно рисовать выпуклости и вогнутости на одежде, складки, пуговицы, стежки швов, различные брошки, значки, запонки и т.д. Под разными углами освещения эти элементы будут иметь разное направление тени, но не стоит забывать, что это всё-таки псевдо-рельеф, поэтому если посмотреть под определённым углом, вы увидите что эти участки на самом деле плоские.
Обычная карта нормалей содержит в каждом пикселе информацию о трёх координатах пространства - x, y, z, соответственно их значения расположены в каналах r, g, b. Но разработчики игры SIMS 3 использовали другой вид карты, - тангенциальный, т.е. без координаты z. Поэтому карта нормалей содержит в каналах r, g, b координату y, а в канале a (alpha) координату x. Для тех кто тяжело это себе представляет советую работать с картой нормалей для игры SIMS 3 как с картой бампа (bump), это значит, что светлые участки на текстуре будут означать выступы на одежде, а тёмные - углубления. Пятидесяти процентный серый будет не тронутым. Мы будем рисовать во всех каналах одинаково, так будет проще.
Теперь приступим к практике. Но в начале нужно скачать свежий плагин DDS от NVidia для того чтобы photoshop мог нормально читать карты нормалей. Вот здесь. На момент написания этой статьи была доступна версия 8.23.1101, советую качать её или более свежую. Также нам понадобится свежая версия TSR Workshop. Её можно взять на официальном сайте TSR. Что же касается платного софта, который вам понадобится для выполнения урока, его придётся найти самостоятельно (или если уж это так тяжело, то обращайтесь за помощью [email protected] ).

Этот урок - дополнение к прошлому уроку "Рисуем одежду прямо на модели" (урок в PDF формате и файлы к нему), поэтому я буду объяснять только всё что относится к картам нормалей. Если вы прошли прошлый урок, значит у вас уже есть все программы перечисленные в списке выше, осталось только поставить новый воркшоп и плагин от NVIDIA.
Для примера я возьму олимпийку из раздела Teen/TopJacketAthletic_Stripes

01.jpg


Как и в прошлом уроке я экспортирую мэш и текстуру кожи. Затем в Milkshape вытаскиваю базовый мэш и загружаю в Photoshop.
Перекинув текстуры в фотошоп и раскидав их по слоям получаю вот такую модель:

01b.jpg


Для удобства я раскрасил отдельные участки одежды в разные цвета. Мне так проще воспринимать модель.
Открыв текстуру Diffuse, создайте третий пустой слой. У меня уже два слоя есть – это слой кожи и слой ткани (я импортировал сюда текстуру Multiplier и удалил в ней лишнее, не относящееся к нашей модели одежды) Под ней виден слой с кожей.

02.jpg


03.jpg
03b.jpg


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

04.jpg


Подгоняю под текстуру и получается примерно так:

05.jpg


Кстати, если расположить в фотошопе два окна (с 3d моделью и одной из текстур) рядом, то легко видеть результат. Сделав несколько изменений в текстуре, достаточно нажать CTRL+S и они тут же отобразятся в окне модели.
Слой, в котором я рисовал горло свитера я оставлю пока в покое и соз-дам ещё один слой, где буду работать с курткой. Тут ничего особо сложного я делать не стану, только лишь дорисую пуговицы и складки.

Как делать реалистичные складки. Раскрою секрет. Для примера я создам в новом файле серый фон.

06.jpg


Выше добавляю новый пустой слой. Беру кисть, выбрав тёмный цвет, рисую треугольники (это будут впадины складок).

07.jpg
08b.jpg


А потом, выбрав светлый цвет, рисую грани складок. А теперь беру инструмент Smudgetool и размазываю складки, в итоге должно получиться так:
08b.jpg
08c.jpg


Они будут более мягкими, если снизить контраст. В этом примере я сделал их острыми (т.е. ткань сильно скучена и смята), но можно разгладить их и получить большее натяжение ткани. Тут всё дело в практике.
Вернёмся к куртке. Я дорисовал остальные части и нанёс еле заметные складки. Рукава мне рисовать было лень, поэтому я просто взял имеющиеся и убрал в них кое-какие стежки. В итоге соединив все слои, кроме кожи, получилось это:

12.jpg
13.jpg


Имейте в виду, что раскрашивать эту одежду мы будем уже в TSRW, поэтому текстура должна быть нейтрально серой.
Создав текстуру маски (это я рассказывал в прошлом уроке), я удалил текстуру Specular и Overlay, и импортировал Multiplier и mask.
В итоге вышло вот так:

14.jpg


Если вдруг у манекена всё кроме одежды стало чёрным (в TSRW), то попробуйте сохранить проект (на всякий случай под другим именем) и перезапустить TSRW.
А теперь заключительная часть.
Создаём карту нормалей. Это как раз то к чему мы шли весь этот урок.
Как советуют на сайте TSR, можно взять карту multiplier как основу карты нормалей. Сейчас нам модель уже не понадобится, теперь нам понадобится фильтр, который вы скачали с сайта NVIDIA.

Шаг 1.
Скопируйте отредактированный вами файл multiplier и назовите его другим именем, например NormalMap. Затем откройте его в Photoshop. Инвертируйте (CTRL+I).

Шаг 2.
Повысьте контраст.

15.jpg


Шаг 3.
Зайдите в меню Filter/NVidiatools/NoralMapFilter… и не изменяя настроек, заданных по умолчанию нажмите ОК.
Сгенерируется карта нормалей.

16.jpg


Так выглядит стандартная карта нормалей. Но нам нужно сконверти-ровать её для игры TheSIMS 3. Поэтому делаем следующее.
Шаг 4.
Находим палитру каналов

17.jpg


Выбираем красный канал (Red) и выделяем его (ALT+A), копируем (CTRL+C), затем выбираем канал Alpha (если его нет, то создайте, нажав на значок в виде странички внизу палитры каналов
18.jpg
). Аналогичным образом скопируйте зелёный канал (Green) в красный и синий.
Получается такая текстура:

19.jpg


Обратите внимание на выступающие части (например пуговицы), они должны выглядеть выпуклыми, а не вогнутыми!
Сохранить её нужно в формат DXT5_NM
Остаётся только импортировать её во все ЛОДы:

20_1.jpg

20.jpg

21.jpg


Чтобы лучше увидеть рельеф, включите кнопку ToggleNormalMap

20.jpg

21.jpg

22.jpg

23.jpg


Также можно этот урок скачать (с советами по фотошопу, файлами текстур, PSD и FAQ) в PDF формате (7 мб).

Ссылки по теории в помощь:
 

-Николай-

Проверенный
Сообщения
7
Достижения
0
Награды
2
cheerful_weasel, Урок очень полезный, но сложный! Но ничего, я разберусь.
smile.gif
 

Miss_sage

Проверенный
Сообщения
11
Достижения
95
Награды
1
а я вот точно не смогу с этой прогой разобраться, прямо в воршопе меняю карту нормали
biggrin.gif
 

LestaD

Проверенный
Сообщения
20
Достижения
0
Награды
7
cheerful_weasel сказал(а):
Выбираем красный канал (Red) и выделяем его (ALT+A), копируем (CTRL+C), затем выбираем канал Alpha (если его нет, то создайте, нажав на значок в виде странички внизу палитры каналов ). Аналогичным образом скопируйте зелёный канал (Green) в красный и синий.

Вобще-то в фотошопе каналы таким способом не выделяются.
Наверное Ctrl+Click
И я не понял куда что копировать, перебробовал много способов. Не получается объясни этот пункт подробнее
 

cheerful_weasel

Проверенный
Сообщения
9
Достижения
0
Награды
26
LestaD сказал(а):
Вобще-то в фотошопе каналы таким способом не выделяются. Наверное Ctrl+Click

Да, видимо опечатка
sad.gif

Выделять CTRL+A (так выделяется весь слой)

Если более подробно этот момент описать:
1. В палитре каналов выбираем канал Red
2. жмём CTRL+A затем CTRL+C
3. выбираем канала Alpha, если его нету то надо нажать на значок, похожий на листик внизу палитры и выбрать созданный канал
4. жмём CTRL+V
5. выбираем канал Green
6. жмём CTRL+A, затем CTRL+C
7. выбираем канал Red
8. жмём CTRL+V
9. выбираем канал Blue
10. жмём CTRL+V
 

cheerful_weasel

Проверенный
Сообщения
9
Достижения
0
Награды
26
dasha28rus,
Пожалуйста
smile.gif


Я подумывал сделать видео урок. Но всё никак руки не доходят. После переустановки Windows надо по новой устанавливать всё.
Думаю что в видео уроке всё будет понятнее, поскольку все действия видны.
 

Gardolir

Mistborn
Старший администратор
Сообщения
5.962
Достижения
2.105
Награды
5.079
cheerful_weasel, урок очень полезный и очень мне помог когда-то! Одежда стала смотреться значительно лучше. И в принципе, получилось с первого раза, так что я бы не сказала, что урок сложный. В нем все понятно. Спасибо!
happy.gif
 

Shushilda

Плохой сценарист
Друг форума
Сообщения
3.284
Достижения
2.025
Награды
4.221
cheerful_weasel, ммм)) интересно)))) а вот в уроке "про модели" этого не было))) знаешь сколько нервов мне это стоило) но благо я уже разобралась) если не затруднит, кинь мне в личку ссылки на все уроки что ты делаешь) я почитаю на досуге) понятнее тебя учителей в деле креаторства я еще не находила))))
 
Верх