что такое post processing
Пост-эффекты в мобильных играх
Большинство публикаций по графике для консолей и десктопов рассказывают о чем-то новом, а для мобильных платформ во главе угла всегда стоит оптимизация уже существующего.
Что касается пост-обработки — её волшебное действие на фотографии было открыто задолго до появления первых компьютеров, а её математический и алгоритмический базис, созданный для цифровой обработки изображений, удачно вписался в программируемый конвейер GPU.
Помимо того, что пост-эффекты (точнее — их не очень грамотное использование) являются предметом ненависти среди игроков, они также едва ли не единственный способ быстро и дешево «оживить» и «освежить» картинку. Насколько качественным получится это «оживление» и не обернется ли оно в результате «свежеванием», зависит по большей части от художников.
Слегка «освежеванный» скриншот War Robots.
Как уже было сказано выше, эта статья будет посвящена в основном оптимизации. Для тех кто не в теме — отличным вводным курсом будут книги из серии GPU Gems, первые три из которых доступны на сайте NVidia [1].
Рассматриваемые примеры реализованы на Unity, тем не менее методы оптимизации, описанные здесь, применимы к любой среде разработки.
Оптимальная архитектура пост-обработки
Существует два способа рендеринга пост-эффектов:
В то же время пакетный рендеринг заметно эффективнее, поскольку он экономит общее число обращений к памяти. Последнее наиболее актуально для мобильных платформ, на которых повышенная вычислительная нагрузка сопровождается повышенной же теплоотдачей (кто бы мог подумать). И даже если устройство сумеет выдать требуемую частоту кадров, вряд ли игроку будет комфортно играть, держа в руках горячий «кирпич».
Для наглядности приведу последовательную и пакетную схемы рендеринга пост-эффектов, используемых в War Robots.
Последовательный рендеринг: 8 чтений, 6 записей.
Пакетный рендеринг: 7 чтений, 5 записей.
Пакетный рендеринг для Unity реализован в модуле Post Processing Stack [2].
Последовательность применения пост-эффектов без изменения кода изменить невозможно (но и не нужно), а вот отдельные пост-эффекты отключить можно. Кроме того, в модуле интенсивно используется встроенный в Unity кэш ресурсов RenderTexture [3], так что в коде конкретного пост-эффекта, как правило, содержатся только инструкции по рендерингу.
Ресурсы же пост-эффект запрашивает непосредственно во время рендеринга, и освобождает их по его завершению. Это позволяет организовать повторное использование ресурсов в последующих пост-эффектах, поскольку кэш удаляет только те ресурсы, которые не были востребованы в течении последних нескольких кадров.
Финальный этап в пакетном рендеринге — композиционный эффект, который комбинирует результаты всех предшествующих шагов и рендерит их при помощи мультивариантного «убер-шейдера». В Unity3D такой шейдер можно сделать при помощи директив препроцессора #pragma multi_compile или #pragma shader_feature.
В целом, Post Processing Stack нам понравился, но все же без доработки напильником дело не обошлось. Нам требовался масштабируемый модуль с возможностью добавлять или заменять пост-эффекты (включая препассы), а также модифицировать захардкоженный пайплайн, задающий последовательность рендеринга, и композиционный «убер-шейдер». Плюс ко всему в эффектах были разнесены настройки качества эффекта и его параметры на конкретной сцене.
Оптимизация fillrate
Основной метод рендеринга в пост-процессинге — это блиттинг: заданный шейдер применяется ко всем фрагментам текстуры, используемой в качестве render target. Таким образом, производительность рендеринга зависит от размера текстуры и вычислительной сложности шейдера. Простейший способ повысить производительность (а именно — уменьшение размера текстуры) сказывается на качестве пост-процессинга.
Но если заранее известно, что рендеринг необходим только в определенной области текстуры, можно оптимизировать процесс, к примеру, заменив блиттинг на рендеринг 3D-модели. Разумеется, никто не запрещает вместо этого использовать настройки viewport’а, но 3D-модель отличается от блиттинга увеличенным объемом per-vertex данных, которые в свою очередь позволяют задействовать более «продвинутые» вертексные шейдеры.
Именно так мы поступили с пост-эффектом рассеивания света от солнца [4]. Мы упростили оригинальный препасс, заменив его на рендеринг биллбоарда с текстурой «солнца». Фрагменты биллбоарда, скрытые за объектами сцены, выделялись с использованием полноэкранной маски, которая по совместительству служит нам буфером теней (подробнее о рендеринге теней я расскажу чуть позже).
Справа: буфер теней и маска, которая получается, если применить к нему степ-функцию. Все тексели, альфа которых меньше 1, перекрывают собой “солнце”.
Сглаживание текстуры препасса также выполняется при помощи рендеринга 3D-модели.
Разумеется, мы пошли до конца: финальный проход тоже сделан с помощью рендеринга 3D-модели. И в отличие от предыдущих случаев, которые при желании можно заменить блиттингом во вьюпорт, здесь 3D-модель содержит дополнительные данные (цвет вертекса), которые используются в шейдере эффекта.
Оптимизация динамических теней
Не смотря на вычислительную сложность пост-эффектов, динамические тени зачастую ещё более ресурсозависимы. Связано это не только с вычислительной сложностью соответствующих шейдеров, но и с тем, что для получения сглаженных теней требуется дополнительный полноэкранный проход рендеринга.
Обычно, для расчета затенения для фрагмента изображения с использованием техники Shadow Mapping’а используется фильтр PCF [5]. Однако результат без дополнительного сглаживания дает только PCF с очень большим размером ядра, что неприемлемо для мобильных платформ. Более продвинутый метод Variance Shadow Mapping требует поддержки инструкций аппроксимации частных производных и билинейной фильтрации для floating-point текстур [6].
Для получения мягких теней рендер всей видимой сцены выполняется дважды — в первый раз в offscreen-буфер рендерятся только тени, затем к offscreen-буферу применяется фильтр сглаживания, и после этого на экран рендерится цвет объектов, с учетом влияния тени из offscreen-буфера. Что приводит к двойной загрузке как CPU (отсечение, сортировка, обращение к драйверу) так и GPU.
Как один из вариантов решения проблемы — мы решили избавиться от двойного рендера сцены, не переходя на технику отложенного освещения.
Для начала рендерим изображение в промежуточный буфер в формате RGBA (1). Значение альфы — отношение яркости цвета фрагмента если бы он был в тени, к яркости без тени (2). Затем, используя command buffer, перехватываем управление в момент завершения рендера непрозрачной геометрии, чтобы забрать альфу из буфера. Далее сглаживаем (3), и модулируем сглаженные тени с цветовыми каналами промежуточного буфера (4). После этого возобновляется работа пайплайна Unity: рендерятся прозрачные объекты и скайбокс (5).
Данный трюк ведёт к небольшой деградации цветопередачи в затенённых местах, но хитрости вычислений того, что пишется в альфу позволили снизить это влияние до минимума.
В результате мы получили заметный прирост производительности (10-15%) на устройствах средней производительности (в основном на андроидах), и на ряде устройств уменьшилась теплоотдача. Данная техника — это промежуточное решение, до перехода на отложенное освещение.
Для съемки промо, мы по прежнему используем более качественный вариант, т.к. деградация цветопередачи там нежелательна, а ресурсов PС хватает. Для улучшения мягкости тени в этом случае мы применили следующее: при наложении тени используется формула, учитывающая LDotN, что позволяет добиться более плавного перехода в освещенных местах.
Плата за неё — небольшое выгорание тени в местах, где она при блюре становится не абсолютно черной, но зато в результате получается более плавный переход полутени.
postprocessing
Тематики
Смотреть что такое «postprocessing» в других словарях:
Postprocessing — Der Begriff Postprocessing bezeichnet die Nachbearbeitung und Aufbereitung von Ergebnissen einer Computersimulation, wie zum Beispiel einer numerischen Strömungssimulation. Man versucht, die dabei entstehenden großen Datenmengen in eine… … Deutsch Wikipedia
postprocessing — adj. following processing, following treatment or preparation … English contemporary dictionary
EAS3 — Infobox Software name = EAS3 caption = author = Inst. f. Aero Gasdynamik (University of Stuttgart) developer = released = August 1999 latest release version = 1.6.5 latest release date = 18. August 2008 latest preview version = latest preview… … Wikipedia
Miniature faking — Digitally blurred miniature fake of Jodhpur Original p … Wikipedia
Peltarion Synapse — Infobox Software name = Synapse caption = Design mode in Synapse developer = Peltarion operating system = Microsoft Windows genre = Neural network software license = EULA website = [http://www.peltarion.com/products/products.html Synapse… … Wikipedia
GPS-Satellit — Die Artikel GPS Technologie und Global Positioning System überschneiden sich thematisch. Hilf mit, die Artikel besser voneinander abzugrenzen oder zu vereinigen. Beteilige dich dazu an der Diskussion über diese Überschneidungen. Bitte entferne… … Deutsch Wikipedia
GPS Drawing — Die Artikel GPS Technologie und Global Positioning System überschneiden sich thematisch. Hilf mit, die Artikel besser voneinander abzugrenzen oder zu vereinigen. Beteilige dich dazu an der Diskussion über diese Überschneidungen. Bitte entferne… … Deutsch Wikipedia
Global Positioning System — NAVSTAR Satellit der zweiten Generation Bewegung der Satelliten über der Erde Global Positioning System (GPS), offiziell NAVSTAR GPS, ist ein globales Navigationssatelliten … Deutsch Wikipedia
NAVSTAR — Die Artikel GPS Technologie und Global Positioning System überschneiden sich thematisch. Hilf mit, die Artikel besser voneinander abzugrenzen oder zu vereinigen. Beteilige dich dazu an der Diskussion über diese Überschneidungen. Bitte entferne… … Deutsch Wikipedia
NAVSTAR-GPS — Die Artikel GPS Technologie und Global Positioning System überschneiden sich thematisch. Hilf mit, die Artikel besser voneinander abzugrenzen oder zu vereinigen. Beteilige dich dazu an der Diskussion über diese Überschneidungen. Bitte entferne… … Deutsch Wikipedia
Precise Positioning Service — Die Artikel GPS Technologie und Global Positioning System überschneiden sich thematisch. Hilf mit, die Artikel besser voneinander abzugrenzen oder zu vereinigen. Beteilige dich dazu an der Diskussion über diese Überschneidungen. Bitte entferne… … Deutsch Wikipedia
Улучшаем стандартную графику Unity за несколько минут
Привет. Недавно решил начать делиться накопленным опытом по разработке, и записал своё первое видео. Статья прилагается. 🙂
Принято считать, что графика в движке Unity не сравнится с картинкой Unreal Engine. Но так ли это? Попробуем сегодня понять, почему проекты на Unreal выглядят лучше.
Один из секретов Unreal Engine — сразу после создания нового проекта в нём уже включены эффекты пост-обработки. Пост-эффекты обрабатывают финальное изображение игры перед выводом на экран, улучшая внешний вид игры. Даже плохие модели и текстуры иногда можно немного вытянуть правильно настроенными пост-эффектами.
В Unity тоже есть эффекты пост-обработки, но они не активируются при создании проекта, более того — их даже нет в самом движке и их нужно скачивать отдельно. Ну, на текущий момент.
Это можно сделать через Package Manager, набрав в поиск Post Processing. Устанавливаем найденный плагин и теперь мы можем пользоваться пост-эффектами в юнити. У меня он уже установлен, поэтому я перейду к настройке.
К слову, я добавил в проект ассеты скал и неба для демонстрации, все их можно загрузить на Unity AssetStore для вашей игры бесплатно. Сейчас можно видеть, как выглядит сцена без настройки:
Для того, чтобы настроить плагин, добавляем на объект с основной камерой компонент Post-Processing Layer, в нём задаём Layer на Everything (и заодно сглаживание, которое уберёт лесенки с краёв моделей).
Затем создаём новый пустой объект с компонентом Post-Process Volume, в котором включаем галочку Is Global, что будет означать, что он влияет на всю вашу сцену. Нажатием кнопки New создаём новый профиль с эффектами.
А, и да, для игр на ПК стоит в Project Settings сменить Color Space с Gamma на Linear, это значительно улучшит общий вид игры, рекомендую почитать об этом в справке Unity, а может я даже сделаю отдельный материал по этой теме.
Возвращаемся к нашему объекту с Post Process Volume и сразу добавляем 4 новых эффекта:
Теперь настраиваем их по порядку. Начнём с Bloom. Для включения эффекта ставим галочку возле Intensity, а затем прибавляем значение для того, чтобы усилить действие эффекта.
Сразу можно заметить, что мой эффект огня на сцене, если его можно так назвать, преобразился и стал гораздо сочнее. Так же это повлияло на небо на заднем плане, создав небольшую «дымку» от него. Этот эффект очень хорошо подходит для визуальных эффектов вроде пуль, огня, неона и прочих источников освещения, он добавляет кинематографичности сцене. Играясь с его параметрами можно получить голливудскую картинку на бликах и не хуже, чем в Unreal Engine.
Ambient Occlusion даёт дополнительное затенение, имитируя скопление теней в выемках в реальном мире, только немного сильнее для художественного эффекта. После применения эффекта окружение приобретает глубину.
Color Grading позволяет применить к изображению игры дополнительную цветокоррекцию и набор параметров тут очень обширный. Подобным эффектом пользуются при пост-обработке фильмов и видеоклипов, что намекает на его немалый функционал. Например, можно добавить художественности сцене, добавив какой-то цветовой оттенок.
Vignette имитирует виньетку от объектива камеры. Этот эффект может добавить кинематографичности, хотя в кино он наоборот является нежелательным.
Теперь можно сравнить картинку с исходной, отключив компонент Post-Process Layer на камере.
Сразу видно, что пост-эффекты, настроенные за несколько минут, неплохо меняют итоговый вид игры. А я показал всего лишь минимальный набор, параметров у них гораздо больше. При должной сноровке, можно добиться впечатляющих результатов, а применять их можно, как в трёхмерных, так и 2D-играх.
Для большего эффекта, покажу так же сравнение со сценой без Linear Color Space, настроенного в начале.
Напоследок хочу отметить, что существует ещё множество способов улучшить картинку и придать ей художественный вид, ведь не только технологии делают игры на Unreal Engine красивыми, но и люди, что стоят за созданием графики. Для создания красивых уровней можно настроить красивое освещение, использовать туман для объёма, добавить мелкие частицы пыли в воздух с помощью системы частиц и многое, многое другое.
Заголовок немного кликбейтный, а сама тема — избитая, и всё же о таких вещах многие начинающие разработчики попросту не знают, из-за чего дефолтные настройки графики просто не дают получить хорошую картинку, а у Unity с очередным инди-релизом увеличивается репутация движка с плохой графикой. Однако, меня радует, что с каждым годом общий визуальный уровень проектов на различных движках от независимых разработчиков только растёт, и я бы хотел тоже сделать небольшой вклад в это.
И там и там, можно делать красиво, просто где-то какие-то инструменты легче и удобнее, где-то через заднее место реализовано. ред.
У тебя есть примеры картинок на Unity которые можно спутать с анрилом? Я тоже раньше утверждал что «юнити тоже может», пока не поспорил с одним товарищем. Мы перерыли интернет на тему различных интерьеров в реалтайме, анрил был лучше. Да что и гоорить, можно зайти в ассетстор и посмотреть что там продают под видом «фотореализм». Глаз видит что сделано на компе. В случае с анрилом глаз всё таки иногда обманывается думая что это фото.
Из последнего, что ОЧЕНЬ сильно впечатлило. Выкрутить. Можно.
Так же про что значит «лучше»? На субъективный ваш взгляд? У каждого свой вкус. Меня лично раздражает сильный блум и моушнблюр. + еще несколько дефолтных (или нет) эффектов.
те или иные ассеты «фотореализма» практически всегда с обильным поливанием постобработки, и та том и на другом сторах. Обработка нужна, дабы картинка выглядела сочнее и с повышенным шансом ее купили. имхо ред.
Post & Pre Processing CSS
Привет, читатель. На пути изучения верстки ты постиг CSS и хочешь продвинуться дальше? Тогда тебе под кат. Осторожно, много кода.
В данной статье я сделаю обзор на препроцессоры и постпроцессор(ы?).
Я не буду вдаваться в подробности насчет CSS, подразумевая, что вы его уже знаете. Классы буду именовать в BEM нотации. Также я не буду углубляться в установку и настройку всего о чем напишу, но тем не менее буду оставлять ссылки, по которым можно пройти и самостоятельно узнать как это сделать.
Начнем с препроцессоров.
Препроцессоры
Что такое препроцессор вне контекста CSS? Вики знает ответ.
Что же такое препроцессор в контексте CSS? В нашем случае препроцессор — это программа, которой на вход дается код написанный на языке препроцессора, а на выходе мы получаем CSS, который мы можем дать на вход нашему браузеру.
Я буду делать обзор на примере Sass. А точнее на его новом синтаксисе — SCSS, так как он наиболее приближен к CSS, чем старый синтаксис. Начнем с возможностей, которые добавляют препроцессоры и которых нет в CSS, а закончим решаемыми проблемами.
Возможности
Переменные
Вложенность
В начале статьи я ссылался на BEM. В данном примере элемент с классом chat-area — блок. В случае, если появилась внезапная потребность его переименовать, то теперь это будет возможно сделать в одном месте, а это становится рутиной если в одном файле набирается несколько десятков селекторов, которые содержат в себе имя блока. Также хочу подметить, что это своеобразная защита от опечаток, ведь имя блока написано единожды.
Миксины
Дополнительные функции
В основном новые функции облегчают работу с цветом. Например функция lighten — осветляет цвет на заданное кол-во процентов(противоположная функция darken).
Решаемые проблемы
Модульность
Проблема стандартного import в том, что он создает дополнительный запрос к серверу, а это дорогая операция. Было бы неплохо если бы import сразу вставлял в исходный файл весь текст импортируемого, не так ли?
Так или иначе раньше ведь не было никаких препроцессоров, а проблему надо было как-то решать. Например можно писать весь код в одном файле.
Однако у нас есть препроцессоры и они решат эту проблему за нас. Препроцессор переопределяет стандартный import и теперь он вместо запроса на сервер вставляет в исходный файл импортируемый, прям как мне и хотелось.
Прошу заметить, что исходные файлы преобразовались в один. Один запрос на сервер за статикой — один ответ.
Наследование
Прелесть шаблонных селекторов в том, что они не попадают в сгенерированные стили. Шаблонный селектор %equal-heights не был никак задействован в коде и не оставил никаких следов в CSS. Селектор же %message отразился в виде правил для селекторов, которые его расширили. Наследоваться можно и от обычных селекторов, но предпочтительнее использовать шаблонные, чтобы не оставалось лишнего мусора.
Форматирование
После того как код написан, его нужно отформатировать(для продакшена сжать). Можно делать это и с помощью сборщиков по типу webpack, а можно и через стандартные инструменты.
Всего в Sass есть 4 вида форматирования.
expanded — Наиболее всего похож на код, написанный человеком.
nested — Приближен к формату старого синтаксиса. Читаемость не теряется, но это холиварный вопрос.
compact — Все еще сохраняет читаемость, но уже с трудом. Полезен для определения на глаз кол-ва селекторов в проекте.
compressed — Уже совершенно не читаемый формат. Все символы, которые можно удалить, удаляются. Подходит для «скармливания» браузеру.
Постскриптум
Я не разобрал некоторые возможности добавляемые Sass. Например циклы или особенности арифметических операторов. Я оставлю их вам на самостоятельное ознакомление.
Постпроцессоры
Разобравшись с препроцессорами переходим к постпроцессорам.
В контексте Css постпроцессор по сути тоже самое, что и препроцессор, но на вход постпроцессору дается не код написанный на языке препроцессора, а тоже css. То есть постпроцессор — это программа на вход которой дается css, а на выходе получается css. Пока не сильно понятно зачем это надо.
Объясню на конкретном примере работы PostCSS — единственного представителя постпроцессоров в контексте css.
PostCSS из коробки на самом деле не делает с CSS ничего. Он просто возвращает файл, который был дан ему на вход. Изменения начинаются, когда к PostCSS подключаются плагины.
Весь цикл работы PostCSS можно описать так:
Плагины
Autoprefixer
Этот плагин настолько популярен, что многие считают, что они используют этот плагин, но не используют PostCSS. Они не правы.
Autoprefixer добавляет браузерные префиксы к вашим правилам. Ничем не заменимый и один из самых важных плагинов, с которого и началась история PostCSS. Можно даже сказать, что имеет смысл поставить PostCss только ради этого плагина.
Preset Env
PostCSS Preset Env добавляет возможности, которые только обсуждаются в черновиках разработчиков css. В данном примере была реализована директива @custom-media, а так же функция color-mod. Начни использовать css будущего уже сегодня!
CSS Modules
Все эти BEM не для вас, но проблема с конфликтами имен классов все еще стоит? Тогда PostCSS предлагает другое решение.
CSS Modules изменяет названия классов по некоторому паттерну(все настраивается). Теперь мы не знаем заранее имя класса, ибо оно определяется динамически. Как же теперь проставлять классы элементам, если мы не знаем их заранее? Объединяя PostCSS, Webpack и ES6 могу предложить такое решение:
Теперь мы не просто импортируем файл со стилями(например в файле React компонента) и подставляем заранее известные нам значения, а импортируем некий объект. Ключами этого объекта будут изначальные селекторы, а значениями — преобразованные. То есть в данном примере styles[‘name’] = ‘Logo__name__SVK0g’.
Short
PostCSS Short добавляет кучу сокращенных записей для различных правил. Код становится короче, а следовательно в нем меньше места для ошибок. Плюс повышается читаемость.
Auto Reset
PostCSS Auto Reset позволяет нам не создавать отдельный файл со сбросом всех стилей. Плагин создает для всех селекторов один большой селектор, куда помещает правила, сбрасывающее все стили. По умолчанию создается лишь правило all со значением initial. Это полезно в комбинации с плагином postcss-initial, который в свою очередь превращает это правило в портянку правил на 4 экрана. Впрочем все можно настроить и сделать сброс например таким:
Помните в начале статьи я говорил что PostCSS не только постпроцессор?
PostCSS — препроцессор?
Рассмотрим один парсер и один плагин, после которых вы измените свое сложившееся мнение о PostCSS.
SugarSS
SugarSS — парсер(не плагин!), который базируется на отступах, а не на фигурных скобках, как стандартный. Имеет отдельное расширение «.sss». Код написанный с помощью SugarSS по стилю схож со старым синтаксисом Sass, но без его примочек вроде переменных, миксинов, наследования и тд.
Вы ведь догадались что добавит следующий плагин?
PreCSS
PreCSS как раз и добавляет те самые возможности препроцессоров о которых написано в первой половине статьи.
И чем же PostCSS теперь не препроцессор?
Stylelint
О Stylelint уже написано довольно много. Он попал в этот обзор, так как использует PostCSS, как парсер строк CSS файлов. Предположим у нас есть такой файл.
Вот его вывод для текущего файла:
Полезность этого инструмента довольно сложно переоценить.
Выводы
Препроцессоры добавляют очень много новой функциональности, которой нет в CSS. Однажды попробовав, вы с трудом вернетесь к обычному CSS.
PostCSS гораздо ближе к изначальному CSS, чем препроцессоры, но тем не менее при определенных подключенных плагинах может обладать той же функциональностью(и даже похожим синтаксисом). Новички верстальщики могут верстать даже не задумываясь, что верстают не на чистом CSS. Некоторые плагины(например Autoprefixer) не имеют аналогов в препроцессорном мире.
Никто не мешает использовать препроцессоры и PostCSS в связке. Вариант довольно неплох для проектов, которые уже используют препроцессоры и имеет место на жизнь.
Для новых же проектов я бы посоветовал использовать только PostCSS. Верстальщики привыкли к синтаксису препроцессора? Поставьте плагин PreCSS и парсер SugarSS. Нужна кроссбраузерность? Поставьте плагин Autoprefixer. Больше не нужна кроссбраузерность(например ваш проект обернули в электрон и он стал десктопным)? Просто удалите Autoprefixer! С PostCSS вы сможете, как с помощью конструктора, собрать именно то, что нужно вашему проекту.