Making of "Байк из игры Days Gone". Процесс создания сетки с рваными краями

I. Знакомство

Привет! Меня зовут Татьяна, я из г. Пенза. У меня педагогическое образование, художественного нет. Работала учителем начальных классов, сейчас я нахожусь в отпуске по уходу за ребенком. Для себя я решила, что работать в школе больше не хочу. Время в декрете-это шанс начать с чистого листа и идти по жизни той тропой, которую выбираю сама. Я новичок в 3D моделировании, можно сказать, нулячок, никогда не интересовалась технологиями, и не думала даже, каким образом создается графика, которую мы видим в фильмах и играх.

На моем жизненном пути вовремя встретился университет Kaino. Нам дали базу знаний и весь инструментарий для создания полноценной GAME-READY модели, а применение их на практике зависело только от меня.

После теоретической части курса GameDev не было времени на осознание всего масштаба полученных знаний, поскольку хотелось успеть все за отведенные на курс 4 месяца, в том числе и поработать над личным проектом в портфолио. В любую свободную минуту я старалась моделировать, осознавая, что если не сейчас, то уже никогда, ведь, когда откладываешь на потом, то это "потом", зачастую, не наступает.

О проекте

В будущем мне хотелось бы создавать игровые модели и работать полноценно в студии, поэтому я решила повторить что-то из крутой ААА - игры, с классной графикой, на которую смотришь и восхищаешься. К тому же, в своем проекте мне хотелось видеть разнообразный материал: металл, кожаное изделие, ткань, пластик. Посоветовавшись с преподавателем, и под романтизированными впечатлениями от недавно пройденной игры, выбор пал на помощника главного героя - “железного коня”, который выручал его в опасных ситуациях. Байк из игры Days Gone.

1-4.jpg

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

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

44.jpg

Сбор рефлиста

01
04

Подготовиться я решила основательно. Референсы на детали пришлось искать по запчастям от чоппера и эндуро, я изучала устройство и механику мотоцикла, какие особенности и размер рамы у чоппера, пришлось стать автомехаником на время и узнать, из каких сплавов металла можно в домашних условиях сварить раму для мотоцикла, чтобы понимать, какие свойства имеет этот металл, как он изменяется при износе, как ржавеет и пр. Эти знания пригодятся при текстурировании. Выяснила, что шины у эндуро имеют разный размер и диаметр. Передняя шина узкая, её диаметр составляет 18-20 см. Задняя - широкая, диаметром 22 см, что обеспечивает маневренность и больший угол наклона при повороте на дороге.

Очень эффективным способом сбора дополнительного количества рефов оказался просмотр видео-обзоров. В моем случае - я смотрела обзор на двухцилиндровые двигатели. Внимательно изучив механику двигателя, в голове уже строилась виртуальная 3D модель, и прокручивалось, какие инструменты будет необходимо использовать в моделировании. Если ты понимаешь, КАК что-то работает, то ты лучше понимаешь, КАК это сделать.

1-4.jpg
Референсы двигателя

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

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

44.jpg

Референсы повреждения, коррозии сплавов металла и окисления меди

44.jpg

Референсы кофра из ткани и кожаного изделия

44.jpg

Референсы износа резины

01
03

II. Making of

На создание этого проекта у меня ушло 6 недель. Начиная с поисков референсов и анализа функционала. GAME-READY модель, все по пайплану, около 104 тыс трис. Моделирование Blender, запекание Marmoset, текстурирование Substance painter. Референсы в Pure Ref.

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

Моделирование, симуляция ткани

Основной моей задачей было повторение сетки на 2м сидении: это сетчатая ткань, перетянутая шнурками.

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

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

1) Создаем плейн, поднимаем его над тем мешем, на который должна лечь ткань. Выравниваем плоскость, чтобы “ткань” легла равномерно.

1-4.jpg

2) Далее подразделяем геометрию: в реж. редактирования, пкм → Subdivide. Количество подразделений выставляю на 10, это необходимо для уплотнения сетки, чтобы она смогла стать “обтекаемой” и максимально правдоподобно симулировала ткань, но этого оказалось недостаточно. Я повторила подразделение еще на 1 итерацию, все-таки это лоуполи, лишние трисы нам не нужны, даже если у нас нет рамок и ограничений поликаунта.

3) Заходим в панель симуляций, назначаем плейну - Cloth (ткань).

1-4.jpg

4) Выделяем объект, на который “ткань” должна упасть, назначаем его Collision(коллизия), т.е противостоянием. Нажимаем на Play и видим, как наша ткань начинает опускаться на сидение, это может занять определенное количество времени, все зависит от вашего ПК.

1-4.jpg

Останавливаем симуляцию, когда ткань упала на сидение и крутим ползунок, ищем результат который устроит.

1-4.jpg

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

1) Перед тем как производить манипуляции, например: скейлить или удалять полигоны, нужно применить симуляцию в списке модификаторов.

1-4.jpg

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

1-4.jpg

3) Сглаживаем поверхность, угловатость от полигональной сетки мешает восприятию картины в целом.

01
02

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

1-4.jpg

Переходим к самим шнуркам.

1) Добавляем кривую Path, располагаем ее в нужном месте. Затем придаем толщину кривой: в правой панеле инструментов открываем параметры настройки кривых, ищем вкладку Geometry→Bevel→Depth, значение 0,002 m.

1-4.jpg

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

2) Кривые не экспортируются в fbx, поэтому нужно было их конвертировать в меши. В верхней панеле инструментов Object→Convert→Mesh.

01
02

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

1-4.jpg

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

Отсюда возникает отдельный этап пайплайна — UV развёртка.

Разворачиваем UV “ткани”, “шнурки” разрезаем как обычные цилиндры - делаем 2 шва (Mark seam) вдоль, сами «узлы» я разворачивала основываясь на рястяжении текстуры-включаем функцию стретчинг (Stretch), если цвет текстуры был зеленый или желтый, это говорило о сильном растяжении, тогда я делала дополнительные разрезы в местах, где швы на текстуре будут незаметны.

У таких элементов, как спирали, или любого длинного цилиндрического меша, развертку необходимо выравнивать. Такое выравнивание нужно делать и для тканей, т.е. когда объект деформирован, а текстуру надо наложить правильно, "изначально гладко". Это еще и несет пользу в экономии UV пространства, за счет такой экономии повышается текстелизация.

1) В верхней панели включаем выделение по ребрам, затем выделяем «боковое» (вертикальное) ребро и выравниваем по оси: Shift+W → Aligm х.

1-4.jpg

2) Затем выделяем параллельное ребро и выравниваем по той же оси.

3) Перпендикулярные ребра (верхнее и нижнее) выравниваем поочередно, соответственно, по другой оси: Shift+W → Aligm y.

1-4.jpg

4) В верх. панели выбираем выделение по островам, выделяем остров, который мы выровняли, затем ПКМ → "Follow Active Quads" эта функция выравнивает весь шелл по выделенному, выровненному острову.

1-4.jpg

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

Пару слов о следующем этапе - запекание.

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

Этап текстурирования

1-4.jpg

В текстурировании важна последовательность. Сначала нужно проанализировать референсы, найти основной материал на объекте, и распределить его составляющие в соответствующие слои и папки. На этом этапе имена папок/слоев лучше назначать понятные, чуть позже, когда материалы усложнятся и слоев станет больше, будет намного проще ориентироваться.

1-4.jpg

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

От блокинга к детализации, от базовых цветов до детализированных материалов. Базовый материал → цвет → прозрачность → элементы износа.

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

Чтобы создать новый шейдер текстурного сета, нажимаем на Main Shader в Texture Set List.

1-4.jpg

Сменим тип шейдера на pbr-metal-rough-alpha blending:

1-4.jpg

Alpha-blending шейдер с градацией, он поддерживает степень прозрачности.  

1-4.jpg

После настройки шейдера добавим новый канал — opacity — в текстурный сет. Он управляет прозрачностью в материале с помощью чёрно-белой текстуры. Чем темнее пиксель, тем он прозрачнее на модели, и наоборот.

1-4.jpg

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

1) Создаем первый слой заливки - Fill Layer. Оставляем только каналы Roughness и Color. Ткань полностью не отражает свет, поверхность ткани матовая, поэтому выкручиваем roughness на 1. Выбираем значение базового цвета.

1-4.jpg

2) Слой заливки - Fill Layer. Подключаем канал с Opacity и Height, она создает впечатление объемности, без высоты ткань выглядит плоской. Нужно помнить, что за прозрачность отвечает черный цвет, выставляем ползунок в сторону черного. На слой заливки назначаем черную маску, на маску подслой заливки: Add mask → Add blacke mask → Add effect → Add fill → grayscale, во вкладке grayscale выбираем подходящую черно-белую маску, по которой будет проявляться прозрачность. В результате у нас получится некорректная сетка, мы помним, что за прозрачность отвечает черный цвет, поэтому просто инвертируем маску.

3) Для создания рваных краев создаем слой заливки Fill Layer, оставляем только канал Opacity. На заливку черную маску, на маску подслой «рисование»: Add mask → Add blacke mask → Add effect → Add paint, выбираем какой альфа кистью будем рисовать, и «закрашиваем» прозрачностью края.

4) Просмотрев референсы, я решила «поиграть» с цветом, мне хотелось создать впечатление застарелой ткани, где в местах складок, забивается грязь, а места которые на виду, выгорают «на солнце».

1-4.jpg

Для вариативности цвета добавляем еще один Fill Layer, оставляем каналы Roughness, Color и Ambient occlusion, на слой заливки-черную маску, на маску-генератор «грязь», регулируем настройки до того результата, который устроит и будет похож на референс.

Раз уж мы затронули тему прозрачности, думаю, вам интересно будет узнать, как использовать готовую текстуру с альфа-каналом.

1-4.jpg

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

Скачиваем из интернета готовую бесшовную текстуру (PBR материал) сетки рабицы со всеми сопутствующими текстурными картами:

Создаем слой заливки, оставляем все каналы. В каждый канал добавляем соответствующую текстурную карту. Получается довольно плоско, я решила разнообразить эту текстуру: добавила слой заливки, оставила каналы: Roughness, Color, Height, Metal. Благодаря каналу высоты, создается впечатление, что у металла появился объем, и изображение уже не кажется настолько 2д-шным.

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

1-4.jpg

Текстурирование шнурков ничем не отличается от текстурирования ткани, кроме канала с прозрачностью, он там не нужен. Отличие лишь в использовании готового материала от Substance - «carbon_fiber». Мне показалось, этот материал по рисунку похож на волокна ткани, из которой делают шнурки или веревки. Я только добавила канал высоты (Height), и текстура стала выглядеть объемной.

Для вариативности цвета использовала канал АО (Ambient occlusion). Затем, как обычно, добавляем истории и следы износа: грязи, пыли, потертостей и прочее. Эти шнурки мне хотелось сделать запачканными, масляными от рук, в моем представлении они поблескивали от грязи и жира, который копился годами.

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

После покраски, переносим все обратно в Blender, экспортируем карты текстур подключаем и любуемся результатом. Я надеюсь, что кому-то пригодится мой опыт.

III. ЗАКЛЮЧЕНИЕ

1-4.jpg

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

Берите такие проекты, которые кажутся непосильными. Мы выбрали такую сферу, которая развивается очень быстро, и чтобы быть действительно хорошим специалистом, мы должны развиваться сами, каждый день. Верьте в свои силы, ищите мотивацию, и творите крутые работы.

Автор: Татьяна Турукина

37
Mozilla/5.0 (iPhone; CPU iPhone OS 15_4_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.4 Mobile/15E148 Safari/604.1 (compatible; YandexMobileBot/3.0; +http://yandex.com/bots)