Как происходит рендер кадра в Shadow Fight 3

Обработка окружения и одежды персонажей.

Ведущий технический художник Banzai Games Роман Терский написал для DTF колонку, в которой рассказал о том, как происходит отрисовка кадра и устроены материалы для персонажей в мобильной игре Shadow Fight 3. Кроме того, он раскрыл небольшие хитрости в настройке окружения.

Как происходит рендер кадра в Shadow Fight 3

Shadow Fight 3 — игра в жанре файтинг-RPG, разработанная на базе движка Unity3d. Релиз проекта состоялся на iOS и Android в ноябре 2017 года, и с тех пор суммарное количество установок игры превысило 50 миллионов.

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

Критики и игроки часто отмечают визуальную составляющую Shadow Fight 3. В этой статье я предлагаю вам заглянуть «под капот» игры и узнать, как нам удалось достичь такого качества.

Рендер кадра

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

Во время рендера кадра игры для каждой статической группы объектов, объединённых одним материалом, Unity запускает вызовы отрисовки (Draw Call) и накладывает их друг на друга. Каждый Draw Call требует затрат ресурсов CPU, поэтому важным этапом оптимизации является уменьшение количества этих вызовов. Нашей целью было минимизировать этот показатель до 100 вызовов на каждый кадр игры в среднем.

Процесс рендера одного кадра

Первым этапом рендеринга в Shadow Fight 3 является отрисовка динамических теней персонажей и Glow-эффектов для светящихся элементов на доспехах и оружии игроков.

Оба этих процесса имеют свои особенности и их стоит разобрать подробней.

Тени

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

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

Область ShadowReciever

В рассматриваемом кадре на этот процесс ушло 20 вызовов отрисовки.

Glow

Процесс создания эффекта свечения на доспехах и оружии персонажей схож с процессом создания динамических теней. Вокруг модели со светящимися элементами создается куб BlurCube, на который каждый кадр проецируются Glow-эффекты, исходя из информации, хранящейся в синем канале RGB-текстуры материала этого объекта (то есть синий канал выступает в роли «маски» для проекции свечения —подробнее об этом ниже, в разделе про материалы).

Затем применяется размытие и информация сохраняется в виде альфа-текстуры, которая заменяет текстуру с результатом рендера предыдущего кадра в динамическом материале BlurCube.

BlurCube
BlurCube

В нашем кадре на этот процесс ушло 15 вызовов отрисовки, плюс ещё два на размытие эффекта.

Отрисовка мешей

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

Следом отрисовываются системы частиц, мелкие детали ближнего и дальнего плана и, наконец, модели с вертексной анимацией (об этом ниже). В конце за два вызова применяются рассчитанные и отрисованные ранее тени и эффекты свечения (Glow).

UI

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

Таким образом, после отрисовки сцены, персонажей и всех эффектов UI рендерится и располагается поверх основного кадра, а вместе с ним накладывается эффект затемняющей виньетки по краям.

В сумме на рендер финального кадра игры потребовалось 92 вызова отрисовки.

Как устроен материал доспеха персонажа

Для создания материала доспеха персонажа используются текстуры с разрешением 512х512: Diffuse, RGB-маски, MatCap, дополнительная Diffuse-карта для теневой формы, а также небольшая шумовая текстура MorphMask, используемая для создания эффекта перехода персонажа в теневую форму.

И если с Diffuse-картой всё стандартно (это просто текстура самого доспеха), на остальных остановимся поподробней.

RGB-текстура масок

Так как RGB-текстура условно состоит из трёх цветовых каналов, заданных числами от 0 до 1 для каждого пикселя, её удобно использовать для хранения различных данных о материале в каждой конкретной точке UV-развёртки объекта.

В нашем случае в каналах RGB-текстуры (маски) содержится информация для следующих процессов.

  • Red (красный канал) указывает на то, какие элементы материала будут менять свой цвет, в случае если в бою участвуют противники в одинаковых доспехах (мы пользуемся этой системой, чтобы игрок не путал своего персонажа с оппонентом; определённые части доспеха, заданные в канале Red, перекрашивается для оппонента в альтернативный цвет, который был задан художником отдельно).
  • Green (зелёный канал) призван указать, к каким элементам доспеха применяется текстура MatCap для придания эффекта металлической поверхности, а также силу воздействия этого эффекта (чем светлее, тем сильнее металлический блеск).
  • Blue (синий канал) содержит в себе информацию, к каким деталям будет применен Glow, создающий эффект светящейся поверхности.

MatCap

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

В зависимости от того, на какой локации ведётся бой, к материалу доспехов и оружия персонажей применяется соответствующая MatCap-текстура. Применение эффекта металлической поверхности происходит на определенные участки материала, исходя из информации в зеленом канале RGB-текстуры материала.

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

Теневая форма

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

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

Освещение локаций

Всё освещение и тени на локации запечены в lightmap-текстуры с разрешением 2048х2048, что позволяет исключить необходимость рассчитывать освещение в реальном времени и существенно увеличивает производительность.

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

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

В качестве альтернативы для каждой локации мы храним отдельный, уникальный градиент shadowing map: по сути, это текстура с разрешением 1024х1, представляющая из себя градиент, основанный на скриншоте локации и передающий степень затенения в каждой ее части.

Карта shadowing map
Карта shadowing map

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

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

Как происходит рендер кадра в Shadow Fight 3

Динамические эффекты арен

Немаловажную роль в «оживлении» локаций Shadow Fight 3 играют FX-эффекты и динамические объекты, такие как флаги, шевелящаяся листва на деревьях, колышущаяся трава и так далее.

FX

Большая часть FX-эффектов (огонь, дождь, солнечные лучи и прочие) в SF3 выполнены по принципу применения анимированного материала к статическим низкополигональным моделям. Однако есть и эффекты, построенные на системе частиц.

Динамические объекты

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

Вертексная анимация листвы
Симуляция ткани на флагах

Отражения

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

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

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

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

Вопрос оптимизации рендера под мобильные устройства сейчас актуален как никогда. То, что вы увидели в данной статье, — это проработанные нами решения конкретно под проект Shadow Fight 3. В настоящее время компания Banzai Games начала разрабатывать две новых игры, в которых мы постараемся сделать графику ещё лучше, применив как текущие наработки, так и добавив что-то новое.

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

160160
42 комментария

Отличная статья, побольше бы таких. Технические подробности о том, как работают игры, это лучше, чем скандалы/интриги/расследования.

42
Ответить

dtf вроде и был про это изначально, жаль в сторону повело

3
Ответить

Спасибо за статью. Очень круто, что разработчикам удалось добиться ~100 draw calls на кадр

6
Ответить

Непонятно правда, почему оружие для правой/левой руки, судя по гифке, рисуется разными draw call'ами. Голову в закрытом шлеме можно и не рисовать. Деревья тремя draw call'ами тоже странно. Хотя были, видать, причины.

3
Ответить

добиться 100 draw calls на игре с 1 шейдером и 1 материалом/текстуройУ них в сцене объектов меньше, чем draw calls. У них точно 100 разных материалов?

1
Ответить

А вообще по самой игре как, кто играет здесь в этот файтинг? Есть такие кто мобильные игры не любит, но про эту игру что то сказать интересное сможет или это по сути такой же плати много и играй более менее

1
Ответить

Я играл на старте, когда она ещё только вышла. Там было пару глав буквально. Игра расчитана больше на дроч/донат, чем на скилл.
Потому что в какой-то момент ты так или иначе проходишь достаточно боёв, а следующий уже показывается как "НЕВОЗМОЖНЫЙ!". И чтобы его пройти, нужно либо играть как боженька, не пропуская ни одного удара (который тебя просто заваншотит) и в течение получаса нудно тыкая оппонента (потому что твой дамаг будет ничтожен, ты будешь снимать по паре процентов хп ему), либо переигрывать предыдущие мисии или вроде того, собирая ресурсы (я уже слабо помню, что там было, но смысл такой) для апгрейда своего оружия.
При этом тебе может подфартить и ты выбьешь, например, легендарное оружие намного сильнее текущего и ближайшие 3-4 боя пролетишь, т.к. будешь складывать оппонентов в 2-3 удара.

2
Ответить