ДЕВБЛОГ // Графика в VALORANT: об инструментах передачи изображения

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

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

Это может быть нелегкой задачей, потому что игры имеют жесткие требования к производительности – каждый кадр должен обрабатываться не более, чем за 6,9 мс, чтобы соответствовать порогу качества, равному 144 кадра в секунду. Шейдеры сглаживают углы и симулируют эффекты, так что нам нередко приходится делать сложный выбор: реализм или производительность. И не забывайте, что VALORANT – соревновательная игра, и нам также нужно учитывать влияние реализма и производительности на соревновательную суть игры.

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

В зависимости от целей разработчиков, эти приоритеты разнятся между играми. Мы выбрали именно эти «краеугольные камни» для VALORANT как наиболее важные (например, вместо реализма, погружения или синематиков), и нам нужно обязательно оказаться точно в центре этого треугольника.

У VALORANT очень амбициозные минимальные системные требования к видеокарте — игра должна запускаться на встроенной видеокарте 2012-го года… то есть на самом обычном лёгком ноутбуке из тех лет. Шейдеры должны хорошо исполняться на этой уже не новой машине. Также нам нужно убедиться, что игроки на более производительных компьютерах не будут иметь преимуществ в игре. Это значит, что между низким, средним и высоким качеством графики не должно быть различий, которые могут повлиять на соревновательный игровой процесс. К примеру, у нас нет динамических теней в игровом пространстве, потому что люди, играющие с низким качеством графики (обычно при нём тени отключены), лишатся критически важной информации. Вместо этого мы сосредоточились на повышении чёткости.

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

Говоря о чёткости, мы учитываем несколько категорий: отражение от материалов, специфические шейдеры для данной области и элементы, которыми можно пренебречь при снижении качества графики. Давайте подробнее рассмотрим каждую категорию и то, как мы работаем с ними в VALORANT.

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

Диффузное освещение создаёт эффект матовой/шероховатой поверхности.

Бликовое освещение создаёт эффект гладкой/глянцевой поверхности.

Фоновое освещение – это непрямой свет, увеличивающий яркость всего окружения, даже если оно находится вне прямого солнечного света.

По сути «диффузное освещение» создаёт ощущение матовой поверхности.

ПРИМЕРЫ ИЗ РЕАЛЬНОГО МИРА: мел, белая бумага

Термин, который мы возьмём из физики — ламбертово отражение, означающее что яркость рассеиваемого света одинакова во всех направлениях. В коде игры оно выглядит как (свет * нормаль), где свет это вектор в направлении источника, а нормаль — вектор перпендикулярный поверхности. Это скалярное произведение, поэтому поверхность ярче в направлении источника.

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

Но VALORANT основан на так называемом «полуламбертовом освещении» для смягчения света. Эта технология была создана Valve для Team Fortress 2 и используется в стилизованных играх, чтобы темные области казались немного светлее.

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

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

В коде это достигается с помощью нормировки (свет * нормаль) на [0,1], чтобы воспроизвести другое распределение на градиентной текстуре. Градиентная текстура создается с помощью модификации для движка Unreal Engine 4, позволяющей создавать такие текстуры в интерактивном режиме. В этом видео художник настраивает освещение, используя некоторые наши элементы управления UE4.

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

Бликовое освещение проще всего описать как… яркие блики.

ПРИМЕРЫ ИЗ РЕАЛЬНОГО МИРА: зеркала, металл, глянец

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

В старых играх используется модель, известная как Затенение по Фонгу, описываемое уравнением (отражённый свет * нормаль) ^ сияемость. То есть блик становится четче и движется в зависимости от угла обзора и свойств материала.

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

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

Основное отличие вышеописанных методов друг от друга заключается в том, как они интерпретируют шероховатость. Грубо говоря, шероховатость – это степень неровности поверхности на микроскопическом уровне. Это означает, что блестящая хромированная поверхность менее шероховатая, чем матовая. Каждый из аналитических методов создания виртуального динамического освещения (Фонга, Блинна-Фонга, Бекмана) использует для описания шероховатости экспоненциальную функцию, где меньшее значение степени соответствует более шероховатой поверхности.

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

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

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

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

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

Фоновое освещение – постоянный свет на всей поверхности объекта, симулирующий непрямое освещение.

ПРИМЕР ИЗ РЕАЛЬНОГО МИРА: тени не полностью чёрные, так как свет отражается от других объектов, делая область в тени немного светлее.

В VALORANT не используется традиционная методика фонового освещения – наше диффузное отражение и так не создает полностью чёрные участки благодаря использованию градиентов. Чтобы непрямое освещение соответствовало окружению, мы используем инструмент Unreal Engine – Indirect Lighting Cache, который воспроизводит образец поступающего статического освещения на всей сцене. Мы используем эти образцы освещения для измерения фонового освещения на любой точке карты.

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

Сравнительные изображения одних и тех же объектов в различном фоновом освещении.

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

Мы делим входные данные для шейдеров на четыре основных категории:

· Персонажи (от первого лица, от третьего лица и в режиме выбора персонажа)

· Оружие (от первого и от третьего лица)

· Окружение (определяется преобладающим типом отражения от материалов)

· Визуальные эффекты (почти все в единственном экземпляре)

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

Помимо особенностей диффузного, бликового и фонового освещения, для персонажей в VALORANT есть дополнительные инструменты, обеспечивающие четкость и стильный внешний вид. Рассмотрим некоторые из этих инструментов, например, подсветка «свой-чужой» с эффектом Френеля, затенение кожи, текстуры и определение глубины.

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

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

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

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

Это было почти то, что надо, но всё ещё не хватало того самого бархатистого полупрозрачного эффекта. Наши художники привели в пример предпросмотр воскового материала в Zbrush.

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

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

Персонажи, в самом общем представлении, имеют 4 текстуры:

Мы не добавляем блики в качестве контрольной текстуры, потому что, как выяснилось, инвертированная карта шероховатостей довольно хорошо работает в качестве карты бликов. Мы также используем фоновое затенение и эмиссионные текстуры вместе, потому что они редко встречаются у нас одновременно; значения ниже 0,5 трактуются как фоновое затенение, выше 0,5 – как излучение.

Глубина очень важна для чёткости персонажа и крайне важна для VALORANT – персонажи должны всегда выделяться среди окружения. Благодаря художественному оформлению персонажи отличимы вблизи, но чем дальше вы находитесь, тем меньше деталей видите.

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

Взгляните на эту сцену. Здесь две Sage находятся на разном расстоянии.

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

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

Для оружия используется более старая версия нашего диффузного освещения – вместо градиента мы используем функцию Smoothstep, чтобы менять свет * нормаль

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

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

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

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

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

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

Изменение прозрачности – особенно сложная проблема, если учитывать минимальные системные требования нашей игры. Например, в CS:GO используется прозрачный дым, но некоторые виды оружия, такие, как коктейли Молотова, иногда показывают силуэты персонажей, хотя они не должны быть видны в дыму.

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

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

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

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

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

Оружие в основном сделано из блестящего металла, поэтому мы, как правило, пренебрегаем диффузным отражением. Базовое оружие масштабируется от 103 до 73 инструкций.

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

Например, дым Omen – это чёткая сфера, блокирующая видимость. Для высокого качества графики мы добавляем призрачные эффекты, но они не влияют на ваше взаимодействие с дымом.

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

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

Абсолютные умения Sova и Viper – примеры умений, дизайн которых нам пришлось изменить для лучшей производительности.

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

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

VALORANT — командный тактический шутер от первого лица, выпущенный Riot Games. 4 августа в игре начался второй акт, вместе с которым в игре вышла новый Агент Killjoy, добавился новый режим «Бой насмерть», а также свежий боевой пропуск и облики на оружие линейки «Глитч-поп»

#valorant