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

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

Ведущий технический художник Banzai Games Роман Терский написал для DTF колонку, в которой рассказал о том, как происходит отрисовка кадра и устроены материалы для персонажей в мобильной игре 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. Такой подход позволяет избежать необходимости рассчитывать реальные тени и отрисовывать их на всех моделях локации, что заметно сказалось бы на общей производительности.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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