Создание современного игрового 3D-окружения

Независимые разработчики White Noise Team, работающие над кооперативным хоррором Twin Soul, делятся опытом.

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

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

Всё начинается с подбора референсов (вспомогательные изображения в качестве примера). Неисчерпаемым и бессмертным источником референсов является Google.

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

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

Для более глубокого погружения мы стараемся максимально правдоподобно копировать референс в 3D. «Эксперты», любящие писать «Вот так вот не бывает!» — знайте: на каждое «не бывает» у нас есть фото, подтверждающее обратное.

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

Мелкие объекты и детали могут быть плохо заметны и «нечитабельны», приходится увеличивать их в разы относительно реальных аналогов. Например, это может быть тонкая картонная упаковка, мелкие радиодетали, незаметные провода и трубы, кнопки на электроприборах и так далее.

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

Готово! Получена желаемая форма, но для использования в игре она не годится. Это пока ещё скетч, на основе него предстоит сделать две модели, и начнем с низкополигональной (полигон — плоскость 3D-модели, описанная точками), будем называть такие объекты — LP (low poly).

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

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

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

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

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

В примере выше «кривой» полигон был триангулирован по-разному, путем соединения ребром разных точек, и в результате получились две разные формы. Любая полигональная графика изначально строится на основе треугольников — так или иначе среда разработки поделит полигоны, но не всегда как нужно. Кроме того, триангулирование даёт дополнительные возможности в работе с нормалями, а в некоторых случаях помогает избавиться от артефактов, вызванных жёсткими группами сглаживания. Правильно строя сетку можно значительно оптимизировать модели и улучшить их визуальное качество.

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

Боковые части объекта одинаковы на предполагаемой текстуре, поэтому положим их друг в друга. На внешней части конуса предполагаем наличие фаски или другой текстурной детализации, поэтому немного увеличим её на развёртке. Дно модели редко будет видно игроку, уменьшим его развертку в несколько раз.

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

Теперь деталь полностью готова к экспорту в игровой движок. Но такие квадратные формы явно не подходят под определения «современного игрового окружения», по-прежнему хочется сгладить все углы. Для этого мы возвращаемся к нашему 3D-скетчу и делаем из него высокополигональную модель — HP (high poly).

Модель сглажена за счёт большого количества полигонов и их нормалей, теперь предстоит задача перенести эти нормали с HP на LP. Перенос осуществляется методом запекания в ранее созданную развёртку. На выходе мы имеем карту нормалей, где RGB-значение каждого пикселя соответствует XYZ значения вектора.

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

Для максимального эффекта карты нормалей нужно заранее хорошо сгладить углы и выделить детали в HP-модели больше, чем в реальном аналоге (референсе). Базовые нормали LP-объекта можно также использовать для подчёркивания формы.

Использование подобных карт — не новинка в игровой графике, но современный пайплайн создания фотореалистичного контента требует совершенно иного уровня качества. Именно поэтому создание почти каждого объекта требует дополнительно HP-вариант, что увеличивает временные затраты разработки. Моделирование промежуточного скетча, сетка которого позволяет быстро получить HP и LP, экономит время и, кроме того, габариты двух моделей выходят идентичными. Чем больше идентичность HP и LP — тем меньше выходит проблем с запеканием нормалей.

Во время запекания на основе LP-сетки строится клетка «захвата», форма клетки влияет на угол проекции запекания. И иногда нам приходится добавлять в LP дополнительные рёбра, тем самым выравнивая клетку и исправляя некоторые «косяки». После этого временные рёбра можно удалить.

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

Для непосредственного запекания может использоваться почти любой современный пакет 3D-моделирования, но мы используем Substance Painter 2 (программа для процедурного текстурирования, далее SP2). Помимо нормалей, софт позволяет качественно запекать на основе HP целый ряд различных карт. К примеру, карта базового затемнения (Ambient Occlusion — АО) или карта высот (Height Map). Эти и некоторые более технически сложные карты могут участвовать в генерации необходимых визуальных деталей — грязь, потертости на углах и так далее.

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

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

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

Часто нас спрашивают, используем ли мы фотограмметрию (способ получения 3D-объекта с помощью фотографий). Бытует мнение, что этот способ является чуть ли не манной небесной. К сожалению, для качественной фотограмметрии нужен студийный равномерный свет, дополнительная работа с фото, большое время для просчета. На выходе получаем меш с хаотичной высокополигональной сеткой, и для дальнейшей работы требуется проведение ретопологии (изменения топологии сетки), а после — устранения артефактов с помощью скульптинга. Одно из преимуществ фотограмметрии — создание реалистичной текстурной карты, но она тоже требует дополнительных правок и сильно ограничивает в оптимизации развёртки.

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

Стандартом для создания тканевых ассетов в игровых пайплайнах давно уже стал Marvelous Design. Он позволяет создавать и симулировать ткани из заготовленных пользователем выкроек. Наша команда пока ещё только осваивает новый инструментарий, но он уже нашел свое применение и для создания предметов окружения.

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

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

С приходом консолей последнего поколения в пайплайн разработчиков внедрился новый технологичный стандарт, пришедший в игры из кинематографа — физически корректный шейдинг (сокращено PBS, в сети можно встретить также под аббревиатурами PBR и IBR). Технология представляет собой наиболее подобную реалтайму симуляцию взаимодействия света и материалов.

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

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

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

Остальная информация о материале раскидана по другим картам, их количество зависит от особых физических свойств объекта, которые требуется просимулировать. В нашем пайплайне для простых объектов, на базе работы с Unreal Engine 4, используется не так много карт. К знакомым нам уже картам нормалей и альбедо добавляется рафнес (roughness — карта шероховатости), металик (metalic — карта «металличности») и АО (ambient occlusion — карта базового затемнения).

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

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

Программа предназначена для работы с PBR и, по аналогии с Marvelous Designer, широко распространена среди игровых разработчиков. В базе SP2 имеется библиотека уже готовых процедурных материалов. При наличии прямых рук и художественного вкуса, можно быстро «разукрасить» большинство простых объектов, не прибегая к использованию сторонних ресурсов.

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

Путем манипуляций с Curvature map (карта кривизны) и наложением стандартных материалов можно получить стальной чайник с эффектами стёртой краски по краям.

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

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

Подобно Adobe Photoshop, программа имеет функционал работы со слоями и масками. С помощью слоёв поверх базового металла мы добавим новые материалы, полностью скрывающие базовый. В данном случае мы покрыли чайник эмалью, а с помощью масок основа чайника и его ручка окрашены в разные цвета.

Фактически чайник уже готов, но его внешний вид не подходит под определение «старый». Как правило, для эффекта состаривания добавляются грязь, царапины, цветовые вариации и прочее. На этом этапе работа по большей части идёт на уровне Roughness maps (карты шероховатости). Естественно, карты шероховатости уже содержатся в базовых материалах, но ничто не мешает добавить новые поверх них. Для «тела» чайника мы добавим карту, имитирующую потёртости, а для ручки — ещё и следы от пальцев.

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

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

Из дополнительных приёмов можно отметить использование старых добрых фото-текстур. Для подобного чайника, как и для другой утвари советского периода, характерны декоративные изображения цветов. Найдем в гугле подходящую картинку и с помощью фотошопа подготовим для дальнейшей работы. Cамая большая сложность — найти изображение хорошего качества, без засветов, теней, перспективы. Готовую текстуру импортируем в SP2 и проецируем на поверхность чайника.

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

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

«Нарисовать» объект — это половина работы. Нужно ещё произвести с ним много различных манипуляций, сделать лоды и коллизию, лайтмап развертки, произвести батчинг, настроить пивоты… Но рассмотреть все аспекты пайплайна тяжело в рамках ознакомительной статьи, поэтому сконцентрируемся только на сборке визуальной составляющей.

Одна из основ оптимизации современной графики — сокращение количества текстурных карт, материалов и упрощение последних. Тем самым мы уменьшаем количество обращений к видеокарте для отрисовки элементов. К сожалению, текстурных карт даже в простом чайнике выходит не мало, и они требуют дополнительной оптимизации. Если внимательно взглянуть на AO, Roughness и Metalic, можно заметить, что все три карты чёрно-белые, а почти любые цифровые изображения состоят из RGB-каналов, каждый из которых является градацией серого. Проще говоря, один цветовой канал позволяет хранить одну чёрно-белую текстуру. В результате мы сливаем все три вышеуказанные карты в одну текстуру.

Различные дополнительные карты, к примеру для светящихся материалов или материалов с прозрачностью, мы дополнительно запаковываем в Alpha-канал альбедо-текстуры (некоторые форматы изображений имеют помимо RGB дополнительный канал для прозрачностей).

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

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

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

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

Но и тут не без подводных камней. То, что в Unreal Engine 4 называется материалом и редактором материалов, является полноценным шейдером и редактором шейдеров. Здорово, что шейдер может теперь создавать рядовой художник — пользователи Unity или CryEngine, к примеру, лишены такого удобства в «стандартной коробке», — но любая работа, созданная таким образом, генерирует полноценный C++ код и, к сожалению, не самый оптимизированный.

Раньше материал представлял собой экземпляр конкретного шейдера с изменением параметров или текстурных карт, но неизменным кодом. Граница понятий и терминов во многих 3D-редакторах со временем размылась, но возможность создавать традиционные «материалы» в UE4 осталась, и в подобном виде у нас хранятся материалы для большинства объектов.

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

Если захотите помочь нам, то можете дать фидбек, распространить статью, поддержать наш патреон, или просто подписаться на наши социалки:

https://twitter.com/WN_Team

https://vk.com/whitenoiseteam

https://www.youtube.com/c/WhiteNoiseTeam

https://www.facebook.com/twinsoulgame/