Авторизация
Вам поступит звонок на указанный номер
или
Вход по Email
Введите Email и пароль, если вы зарегистрированы на сайте
или
Забыли пароль?
Мы пришлем Вам код на E-mail, указанный при регистрации
Пароль должен состоять не менее, чем из 8 символов с использованием букв и цифр
Мы используем файлы cookie. Нажимая на кнопку «Согласен» и (или) оставаясь на сайте, вы даете согласие на обработку файлов cookie и пользовательских данных в соответствии с Политикой конфиденциальности. Если вы не согласны, можете изменить настройки браузера или покинуть сайт.
Постер для записи в блоге - Постобработка в компьютерных играх

Постобработка в компьютерных играх

Смотришь иной раз на какую-нибудь игру и думаешь: «как же она здорово выглядит!» А вы никогда не задумывались, какие технологии за этим стоят? Специально для Вас магазин лицензионных ключей ICE GAMES подготовила статью о процессе постобработки в компьютерных играх — необязательном, но таком важном этапе в отрисовке графики. Вы узнаете, что общего она имеет с фотошопом, почему у неё больше возможностей, чем у графических редакторов, как она может упростить жизнь разработчикам и как с её помощью превратить игру в мультфильм.

Смотришь иной раз на какую-нибудь игру и думаешь: «как же она здорово выглядит!» А вы никогда не задумывались, какие технологии за этим стоят?

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

Изображение для контент-блока 1

Что такое постобработка и с чем её едят

Для начала разберёмся, как вообще картинка отрисовывается на экране. Вообще, это зависит от того, в каком движке игра была сделана, но в целом процесс выглядит примерно так:

  1. Смотрим, какие объекты за какими находятся (чтобы не рисовать то, что не видно)
  2. Рисуем их на экране
  3. Накладываем постобработку

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

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

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

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

  1. Сглаживание и масштабирование
  2. Цветокоррекция
  3. Эффекты камеры
  4. Screen-space эффекты
  5. Симуляции природных явлений
  6. Художественные эффекты

Сглаживание и масштабирование

Сглаживание

Начнём мы с группы эффектов, которые используются практически в любом современном проекте. Из чего состоит любой экран монитора и любое изображение? Из пикселей. Их вполне ограниченное и конечное количество (даже на ultrawide 4K экранах), и у них есть свой размер. И из-за этого во время отрисовки объектов могут появиться неприятные побочные эффекты: острые, блочные края на границе объектов, мелкое мерцание из-за их малого размера. Для исправления такой проблемы используют различные виды сглаживания, которые проходят по изображению и аккуратно “размывают” резкие переходы. Таким образом, сама картинка практически не изменится, а неприятная резкость пропадёт.

NVIDIA DLSS и AMD FidelityFX SR

Последние годы набирают популярность технологии рейтрейсинга, гипер-реалистичная графика и большие разрешения мониторов. Системные требования к играм растут быстрее, чем успевают улучшаться компьютеры пользователей. Но ведь так хочется поиграть в новинки с хорошей графикой и хотя бы 60 FPS!

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

NVIDIA DLSS использует для этого специальные модели искусственного интеллекта. Но у этой технологии есть существенный недостаток — она работает только на видеокартах NVIDIA 20-й серии и выше, а это достаточно дорогое удовольствие.

Но есть альтернатива! И имя ей — AMD FidelityFX Super Resolution (или короче — AMD FSR). В отличие от конкурента, на момент написания статьи она технологии ИИ не использует, и, по заверениям разработчиков, работает практически на любой видеокарте (и даже на видеокартах от NVIDIA).

Цветокоррекция

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

HDR и Тонмаппинг (Tonemapping)

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

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

Но этого будет недостаточно. Ведь мониторы не поддерживают все цвета, которые человеческий глаз способен воспринимать. В конце концов HDR-цвета будут снова преобразованы так, чтобы его можно было показать на экране (нельзя показать цвет зеленее, чем зелёный). А чтобы ничего не потерять, используют тонмаппинг — процесс передачи цветов из одного пространства (HDR) в другое (которое может показать монитор). Благодаря тонмаппингу, например, можно достичь синематического эффекта, который часто видно в фильмах и в целом немного точнее передать цвет.

Свечение (Bloom)

Благодаря эффекту свечения яркие объекты действительно кажутся яркими. Здесь поможет тот же HDR, с помощью которого можно будет поднять яркость сверх лимита. Рецепт свечения прост — берём картинку с экрана, уменьшаем её размер в несколько раз, растягиваем обратно и накладываем обратно на экран. В процессе уменьшения и увеличения изображения часть деталей будет «размыта» по соседним пикселям, благодаря чему после наложения размытой картинки поверх обычной будет складываться ощущение, что у яркие объекты по краям немного светятся.

Автоматическая экспозиция (Auto Exposure)

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

Эффекты камеры

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

Глубина резкости (Depth of Field)

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

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

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

Размытие в движении (Motion Blur)

Наверняка вы не раз сталкивались с неприятным явлением, когда вы пытались что-то или кого-то сфотографировать, но из-за движения объектов или рук фотография получалась нечёткой. Такая ситуация также именуется словами «шевелёнка» или «смаз».

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

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

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

Хроматическая аберрация (Chromatic Aberration)

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

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

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

Отблеск от линз (Lens Flare)

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

Виньетка (Vignette)

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

Screen-space эффекты

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

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

Затенение АО (Ambient Occlusion)

Затенение придаёт реалистичности изображению, немного понижая яркость мест, в которые попадает мало света (чаще всего углы). Без него картинка будет выглядеть совсем плоской.

Затенение для обычной геометрии достаточно сложно просчитать, поэтому его аппроксимируют с помощью экранного затенения, или SSAO (Screen-Space Ambient Occlusion). Есть и другие вариации затенения, но это самое дешёвое из всех и его можно использовать даже в мобильных играх.

Отражение и преломление

Отражение и преломление, как понятно из названия, отражают зеркальное и преломляют прозрачное.

С помощью преломлений можно симулировать поведение прозрачных веществ, таких как вода или стекло. Этот эффект не так популярен в играх, как его отражающий собрат, и используется только на самых производительных платформах (ПК, Xbox и PS) в AAA-проектах, поэтому сегодня на нём останавливаться не будем. Но с первым эффектом картина интереснее.

Настоящий, честный расчёт отражений — очень дорогое удовольствие. Здесь либо рейтрейсинг включай (дорого по средствам), либо заранее их просчитывай (дорого по памяти и вычислительным ресурсам). Второй способ поможет, если имеется несколько маленьких комнат. А если вокруг открытый мир с огромными пространствами и бескрайними водными гладями?

В игру вступает экранное отражение. Всё, что ему нужно, это цвет, буфер глубины и буфер нормалей. Последний говорит нам, какое направление имеет каждый пиксель, куда он «смотрит» (нам же нужно понимать, в какую именно сторону что отражать, верно?). Также пригодится некоторая информация о материалах объектов, например, их отражаемая способность.

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

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

Тени

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

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

Симуляции природных явлений

Мы спускаемся всё ниже. Сглаживание, цветокоррекция, камера, экранные эффекты. Что ещё можно добавить? А как насчёт целых природных явлений?

Туман

Туман — самый популярный такой эффект (и практически бесплатный). Мы просто берём расстояние до пикселя, и на основе него красим его в цвет тумана. Чем дальше пиксель, тем гуще туман. Его часто используют не только для задания настроения сцене, но и сокрытия технических ограничений игры. Например, в старых версиях Minecraft густой туман прятал границы генерируемого ландшафта.

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

Реалистичная атмосфера и объёмные облака

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

Рисовать физически аккуратное небо невероятно сложно, и для того, чтобы только понять принцип работы эффекта, наверное, нужно иметь хотя бы диплом бакалавра в математических науках. И ещё один по программированию, чтобы его реализовать. К счастью, умные люди, работающие в компаниях, разрабатывающих популярные движки (таких как Unreal Engine или Unity) сделали всё за нас с вами, и эти эффекты можно использовать из коробки.

Художественные эффекты

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

Выделение границ (Edge Detection)

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

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

другой объект, и нужно нарисовать границу в этом месте.

Фильтр Кувахары (Kuwahara Filtering)

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

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

Пикселизация и постеризация

И напоследок расскажем о двух простых и небольших эффектах, которые могут имитировать пиксельную графику. Один из них — пикселизация изображения. Используется в некоторых 3D-играх для создания пиксельной графики, например, в замечательной игре с маленьким открытым миром A Short Hike. Второй, постеризация, нужен для понижения количества цветов до очень маленького значения. Его, кстати, используют не только для стилистического эффекта, но и для понижения размера изображений, в том числе анимированных (т.к. картинки с маленькой палитрой проще сжимать).

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

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

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

1
17