Как создать стилизованное 3D-окружение

Концепт-художник Джейми Рид поэтапно показывает процесс работы над локацией.

Джейми Рид — создатель окружения в игре RuneScape от Jagex. Он начинал тату-художником и со временем заинтересовался гейм-артом, в частности — 3D. Джейми занялся онлайн-обучением, параллельно подрабатывая в супермаркете на полставки. Первую работу художник получил через два года в небольшой студии мобильных игр Neon Play.

Тогда я в основном работал в Unity. Многие из проектов не были изданы, но я получил опыт в различных стилях и жанрах. В 2018 году я перешел в Jagex и стал работать с окружением.

Джейми Рид, художник

Пайплайн создания локации Sunset Glade

Sunset Glade — личный проект Джейми. Его цель — создание крупной среды в Unreal Engine для портфолио. На эту работу Джейми вдохновили локации Spyro: Reignited Trilogy. Под впечатлением от этих игр, художник решил придумать собственный проект локации.

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

Джейми Рид, художник
Как создать стилизованное 3D-окружение

Шаг первый: мудборд и референсы

Прежде чем погрузиться в моделирование или работу с игровым движком, важно составить мудборд, список ассетов и подобрать референсы. Джейми рекомендует не ограничиваться одним ресурсом вроде Artstation или Pinterest. Собирайте внутриигровые скриншоты и не пренебрегайте старым добрым поиском в Google. Такая смесь средств делает ваш образ мышления шире, а художественный стиль — более разнообразным.

Я использую PureRef для создания артбордов. Для удобства группирую изображения по категориям: освещение, цветовая палитра, архитектура, листва и так далее.

Джейми Рид, художник
Как создать стилизованное 3D-окружение

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

В финале препродакшена у дизайнера должно быть представление о каждом элементе локации
В финале препродакшена у дизайнера должно быть представление о каждом элементе локации

Шаг второй: блокаут

Блокаут — предварительное конструирование локации максимально простыми формами. На этом этапе всё сводится к нанесению широких мазков, созданию простого ландшафта и отображению крупных форм с использованием базовых примитивов. Это позволяет быстро собрать композицию пространства, легко изменяя отдельные элементы при необходимости.

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

Джейми Рид, художник

В качестве ориентира для композиции дизайнер использовал правило третей. Портал — точка интереса на правой вертикальной линии сетки.

Как создать стилизованное 3D-окружение

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

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

Джейми Рид, художник
Как создать стилизованное 3D-окружение

Шаг третий: моделинг

Рабочий процесс над Sunset Glade выглядел следующим образом:

  • Maya — для моделирования;
  • Zbrush — для скульптинга;
  • Substance Painter и Photoshop — для создания текстур и компоновки;
  • Unreal — для начального блокинга, сборки уровней, создания материалов и vfx (visual effects — визуальные эффекты).

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

Лично мне гораздо удобнее создавать прокси/базовую сетку в Maya и импортировать её в Zbrush для скульптинга, если мы не говорим об органике. В дальнейшем я экспортировал эти модели в Unreal, заменив ими примитивные формы, чтобы сверить масштаб и читаемость перед тем, как перейти к Zbrush.

Джейми Рид, художник
Как создать стилизованное 3D-окружение

Шаг четвертый: скульптинг

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

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

Джейми Рид, художник
Кисти, используемые Джейми при скульптинге в ZBrush. Слева направо: грани, объем, поверхности, трещины и надломы
Кисти, используемые Джейми при скульптинге в ZBrush. Слева направо: грани, объем, поверхности, трещины и надломы

Края и грани дизайнер сделал с помощью TrimDynamic и TrimSmoothBorder для нескольких скосов, небольших сколов и ямок. Объём, в основном для скульптуры головы оленя, он наращивал с ClayTubes. Orb_Rock_Detail — в качестве основы для поверхностей скал.

После использования этой кисти Джейми вручную редактировал каждый элемент, чтобы поверхность не выглядела одинаковой. Orb_Cracks и Orb_Slash01 использовались для добавления трещин и щелей на камнях и стволах деревьев. Чтобы привести в порядок и сгладить геометрию — Dynamesh Tool и Polishing.

Этих инструментов достаточно для стиля, к которому я стремился. Я знал, что как только я начну добавлять больше элементов в сцену, детализировать наслоения и добавлять декорации — всё будет выглядеть самодостаточно.

Джейми Рид, художник
Как создать стилизованное 3D-окружение

С помощью плагина Decimation Master Джейми сделал ретопологию ассетов, уменьшив количество полигонов с сохранением качества модели. Затем он экспортировал их в Maya для дополнительной очистки вручную и создания UV-развертки.

Шаг пятый: текстурирование

Чтобы сохранить единообразие стиля, текстуры тоже должны быть простыми.

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

Джейми Рид, художник

Для текстурирования стволов деревьев и каменных поверхностей Джейми использовал плагин для Substance Painter под названием SoMuchMaterials. В нем есть множество встроенных предустановок, которые можно использовать в качестве базового шаблона для стилизованных материалов. Поместите материал в свой стек слоёв, выберите нужный пресет и задайте необходимые свойства в настройках.

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

Джейми Рид, художник
Как создать стилизованное 3D-окружение

Для текстуры листвы на деревьях Джейми решил подобрать единый «модуль», по которому будут сделаны все кромки. В Photoshop с помощью альфа-каналов он сформировал группы элементов по формам веток деревьев. Затем художник использовал эти макеты для текстур и оклюжена.

Я хотел иметь возможность подкрашивать листву в Unreal (подробнее об этом позже), поэтому упаковал различные чёрно-белые маски в каналы RGB, чтобы отделить друг от друга листья и ветви.

Джейми Рид, художник
Как создать стилизованное 3D-окружение

Эту же технику Джейми использовал для создания текстур куста, цветов, плюща и травы. Внимательный зритель увидит ту же альфа-форму листа во многих из них. Это позволяет создать сходство языка форм в окружении.

Как создать стилизованное 3D-окружение

О листве подробнее

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

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

Слева направо: вырезанные компоненты, готовые модули листвы, собранная модель кроны<br />
Слева направо: вырезанные компоненты, готовые модули листвы, собранная модель кроны

Чтобы контролировать, какие части веток будут затронуты ветром, Джейми добавил градиент в Unreal. Яркий зеленый цвет — ближе к вершине, там ветер сильнее всего, более темный цвет — у листьев ближе к стволу. Это кропотливый процесс, который требует много времени.

Как создать стилизованное 3D-окружение

Другие материалы

Мастер-материал, используемый для камней и стволов деревьев, имеет несколько разных функций внутри.

Чтобы добавить мох на вершины скал и портал, Джейми использовал тайловую текстуру, которая накладывалась по мировым координатам. Эту текстуру он сделал в Photoshop, и действовала она только на поверхностях по оси Z. Она использовалась в качестве альфа для выравнивания среды и с параметрами для управления резкостью и наклона зеленого мха. Также художник добавил параметры для управления объёмом и интенсивностью карты нормалей с параметром Static Switch для его включения или выключения.

С помощью функции Vertex painting стало возможным рисовать в красном и зелёном каналах для плюща на стенах, скалах и столбах. В синем канале наложена маска мха.

Последним этапом Джейми добавил парящие драгоценные камни на вершине колонн. Для этого он использовал математику на основе ноды Time, Sine и перемножение на Contast3Vector со значением 0,0,5, что позволило создать медленное движение вверх-вниз по оси Z. Он также подключил это через переключатель Static Switch, таким образом, можно включать это подпрыгивающее движение только для материалов кристаллов.

Как создать стилизованное 3D-окружение

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

Покачивание листвы он настроил с помощью SimpleGrassWind с постоянными параметрами, используемыми для управления прочностью в инстансах материалов. Это было умножено на узел Vertex Color, чтобы указать, какие части мешей были затронуты, а затем подключено к World Position Offset.

Как создать стилизованное 3D-окружение

Для портала, кристаллов и облаков Джейми создал закрученную текстуру, используя альфы листьев, и добавил движение, повернув её с помощью узла вращения. Небольшой шум Перлина использован, чтобы перемещаться по объекту и смещать вершины, с помощью подключения к ноде World Position Offset.

Как создать стилизованное 3D-окружение

Шаг шестой: освещение

В процессе работы над Sunset Glade концепция освещения изменилась. В основном за счет эффектов постобработки. Но об этом чуть ниже.

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

Чтобы сбалансировать отсутствие отраженного света, Джейми использовал вторичный направленный свет с небольшим желто-зеленым оттенком, расположенный в противоположном направлении от солнца, чтобы помочь обозначить наиболее темные области. Едва уловимый свет от неба (с использованием изображения, загруженного с HDRI Haven) добавляет немного света в затененные области.

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

Как создать стилизованное 3D-окружение

Шаг седьмой: постобработка и фокусировка

Во время работы над локацией я увидел трейлер Everwild от Rare. Я вдохновился их художественным стилем и захотел привнести в Sunset Glade похожее сияние.

Джейми Рид, художник

Чтобы добиться подобного эффекта, Джейми использовал постпроцессорный материал Simi CelShade (это материал, который состоит из математики, искажающей изображение определённым образом, например, Sharp или Cel Shader. Материал накладывают в конце с использованием Post Processor Volume — потому и называется Post Processor Material, — прим. ред.).

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

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

Джейми Рид, художник
Как создать стилизованное 3D-окружение

В завершение проекта Джейми перенёс изображение сцены в Photoshop, где с помощью корректирующих слоев изменил насыщенность, яркость, контраст и уровни. Создал LUT таблицу (Lookup table — специальная картинка, которая позволяет сохранить информацию о цветокоррекции, — прим.ред.). для своей сцены, которую можно было использовать уже в Unreal.

Слева — до настройки, справа — после
Слева — до настройки, справа — после

Решение использовать для постобработки Simi CelShade помогло привнести уникальности в художественный стиль локации. Джейми Рид достиг цели и сумел создать нечто среднее между Spyro: Reignited Trilogy и Everwild.

Оригинал статьи. За помощь с переводом благодарим Сергея Панина, создателя курса по Игровой локации в UE.

Перевод сделан Юлией Хлебко, автором в Smirnov School. Мы готовим концепт-художников, левел-артистов и 3D-моделеров для игр и анимации. Если придёте к нам на курс, не забудьте спросить о скидке для читателей с DTF.

140140
10 комментариев

Комментарий недоступен

10
Ответить
4
Ответить

Успех инди-геймдева и качество навыков индивидуальных спецов работающих над визуальной составляющей игры очень далеко друг от друга стоят, так-то 

Ответить

Эка смирнов скул начал бомбить постами на дтф после скандала с XYZ 

2
Ответить

Комментарий недоступен

2
Ответить

Комментарий недоступен

1
Ответить

Да, чет вообще не рядом с тем, что он на рефах показывал.

Ответить