Как создать matte-painting для видеоигры

Существует немало техник для создания живописных перспектив в играх, но информацию по этой теме найти довольно непросто. На GDC 2023 Патрик Росандер из Remedy Entertainment представил доклад о создании панорамного вида в игровой локации с помощью matte-painting. И хотя эту технику чаще практикуют в киноиндустрии, она подходит и для производства видеоигр.

Чтобы доказать это на практике, художник создал в Unreal Engine небольшой уровень и в рамках презентации продемонстрировал этапы сборки зрелищной сцены за пределами игровой карты.

Редакция «Геймдев» Skillbox Media разбирает термин matte-painting и делится основными тезисами специалиста.

Кратко о спикере

Концепт-художник Патрик Росандер всегда был большим поклонником живописных панорамных видов в играх: они не только впечатляют визуально, но и создают ощущение присутствия в другом мире. Это мотивировало его развиваться в matte-painting и продвигать его в играх.

За 12 лет в профессии он успел поработать над несколькими частями серий Warhammer и Magicka; создавал концепт-арты и фоны в технике matte-painting для анимационного сериала «Любовь, смерть и роботы». В 2022 году Патрик устроился в Remedy Entertainment в качестве старшего концепт-художника. Сейчас он продолжает работать в этой компании, но уже в качестве заместителя арт‑директора.

Matte-painting и потенциал этой техники в играх

Говоря о наиболее точном и ёмком определении matte-painting, Патрик ссылается на англоязычную страницу в «Википедии». Согласно ей, matte-painting — это «нарисованное изображение ландшафта, сцены или локации дальнего плана; c его помощью кинематографисты могут создать иллюзию окружения, которого на самом деле нет на съёмочной площадке».

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

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

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

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

На что обратить внимание при создании matte-painting

Во время создания matte-painting важно учитывать несколько факторов. Рассмотрим каждый отдельно.

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

Расположение ассета matte-painting на игровом уровне. Патрик всегда разделяет локацию уровня на три сегмента: передний план (foreground), дальний план (backdrop) и небесный купол (skydome или skybox). Под передним планом подразумевается интерактивное пространство, по которому перемещается игрок. Дальний план — это место, в котором не предусмотрено никакое взаимодействие с окружением. Как правило, игрок попадает в эту область, если по какой-то причине улетит за пределы карты. А небесный купол, известный в игровых движках как skydome или skybox, — это текстура неба.

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

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

Зачем использовать matte-painting в играх

Возникает вопрос: зачем использовать эту технику, ведь можно просто добавить деталей в текстуру skydome или сделать полноценное 3D-окружение? На деле всё зависит от специфики проекта. Но нужно помнить, что разрешение текстур неба слишком низкое, чтобы отобразить множество деталей. К тому же сами текстуры не могут передать эффект параллакса.

Подход, предполагающий использование полноценного 3D-окружения, довольно эффективен. 3D-модели являются многофункциональным контентом, который можно использовать в разных сегментах игры, к тому же они более гибкие в настройках. Но главный недостаток 3D-ассетов в том, что на их создание нужно много времени и они хуже поддаются итерациям. К тому же наличие высокополигональных объектов снижает производительность. Matte-painting в этом случае сокращает и временные, и ресурсные затраты.

Процесс создания matte-painting

В описанном ниже примере продемонстрирован полный цикл создания matte-painting для сцены в условном шутере от первого лица, действие которого происходит в научно-фантастической вселенной. Согласно задумке концепт-художника, локация будет служить своеобразным переходом между двумя сегментами уровня. Техника matte-painting идеально вписывается в такие отрезки, поскольку в этот период игрок может отдохнуть от предыдущего напряжённого боя, насладиться живописным видом и подготовиться к будущей перестрелке.

Сам процесс включает следующие этапы:

• выбор местоположения камеры;
• черновой 3D-блокинг;
• работа с концептом;
• настройка проекции;
• усовершенствованный блокинг;
• финальная доработка.

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

Выбор местоположения камеры

Сначала Патрик создал пролёт камеры через весь сегмент уровня, имитируя прохождение игрока. На видео ниже можно увидеть, что в некоторых местах в течение нескольких секунд камера направлена на обрыв. Эти участки станут ключевыми точками: на них художник будет ориентироваться при размещении matte-painting.

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

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

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

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

Черновой 3D-блокинг

Следующий шаг — создание черновой визуализации блокинга. Для этого Патрик воспользовался инструментами для 3D-моделирования в Unreal Engine. С их помощью он быстро собрал примерную форму из блоков, повторяющую очертания будущей композиции.

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

Также на этом этапе нужно задать базовые настройки будущего освещения. В текущей сцене лучи от источника света создают приятные глазу блики и тени на конструкции. Такой подход поможет определиться с расположением будущих элементов сцены и создать аналогичные эффекты отражения и теней уже в 3D-сцене с концепт-артом. Это один из главных секретов хорошего matte-painting, и чем больше работы художник проделает на этом этапе, тем лучше. 3D-блокинг — своего рода проверка концепции, потому что если нужный эффект не достигнут, то его не добиться и на следующих этапах.

Работа с концептом

Как правило, концепт-арты готовят в 2D, но, если возникнет необходимость создать фон на их основе, придётся собрать аналог сцены в 3D.

Будучи концепт-художником, Патрик делает концепт-арты самостоятельно. Художник экспортировал в 3D-софт геометрию уровня, камеру и блокинг из движка, после чего начал сопоставлять блокинг с готовым 3D-концептом, постоянно переключая сцены. На этом этапе важно удостовериться, что результат соответствует ожиданиям.

Если возникают сомнения в расположении matte-painting, Патрик рекомендует вернуться на предыдущую стадию, перепроверить углы обзора и поэкспериментировать с ракурсом, расстоянием и положением отдельных объектов — в том числе в самом 3D-концепте. При готовом 3D-концепте подобные манипуляции могут занять всего полдня, в остальных случаях — один или два. За счёт простоты этой техники результат можно итерировать очень быстро.

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

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

Настройка проекции

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

В большинстве случаев на этой стадии придётся менять положение камеры и настраивать её до тех пор, пока не получится желаемый рендер 3D-сцены для matte-painting. После этого сцена дублируется, геометрия космической 3D-сцены убирается с копии и заменяется плоскостью. Размер плоскости можно сопоставить с размером сцены концепт-арта и наложить текстуру методом UV-проекции с камеры.

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

На видео выше можно оценить промежуточный результат. И несмотря на то, что пока matte-painting — всего лишь плоскость, на объекте уже отображено большое количество деталей. Это одно из преимуществ техники.

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

Усовершенствованный блокинг

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

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

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

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

Кроме того, небо также может подчеркнуть эффект параллакса за счёт динамических элементов. Для этого художник добавил анимации с помощью карт потоков (flow map). А чтобы динамика облаков перекликалась с общей композицией, ко всем объектам 3D-окружения matte-painting Патрик применил текстуру шума (noise texture), имитирующую тени. Текстура движется с определённой скоростью. Совокупность этих эффектов позволяет создать иллюзию глобального освещения и полноценной игровой среды, а не просто статичную картинку.

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

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

Финальная доработка

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

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

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

Matte-painting и производительность

Производительность — один самых щепетильных вопросов в разработке игр. И в этом плане использование matte-painting менее ресурсозатратно, чем создание полноценного 3D-окружения. Как уже упоминалось ранее, сам ассет с плоскостью низкополигональный и использует unlit-шейдер.

Самый «тяжёлый» элемент — это текстуры, но и они разнятся в зависимости от сцены. Что касается дополнительной геометрии, то её размер может варьироваться от пары сотен полигонов до пары тысяч в зависимости от сложности проекции. В целях экономии можно отсечь геометрию, в которой используются альфа-каналы, то есть прозрачность.

Итог

Использование техники matte-painting в играх — это быстрый и эффективный способ донести до игроков фантазию художника и создать визуально богатый игровой мир, от которого захватывает дух.

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

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