Полезное

Мы Вконтакте

Пиксельная графика

Добавлено Июл 30 2015

В этом уроке мы создадим материал для пост обработки, который будет «пикселить» изображение в несколько раз. Так же этот эффект можно применить для пикселизации обычных текстур.
Урок разделен на две части: Установка материала в качестве пост обработки и написание материала для пикселизации.

Итак, приступим.

Настройка материала для пост обработки

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

Создание нового материала

После создания называем его (я назвал PixelPostProcess) и откроем его в редакторе материалов двойным кликом.

В параметрах материала нужно сразу указать, что материал не для поверхностей объектов, а для пост обработки. Меняем параметр Material Domain на Post Process.

Параметр материала для пост обработки

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

Теперь давайте установим этот материал в качестве эффекта в пост обработку. Для этого нам нужно определиться, в каком именно месте мы хотим включать этот эффект. Тут варианта два: в самой камере или в PostProcess Volume (участок на сцене. внутри которого включаются эффекты пост обработки). Я помещу наш эффект в камеру, что бы эффект был всегда. В моем случае камера находится в персонаже, поэтому я открою класс моего персонажа, найду в нем камеру и открою настройки пост обработки.

В настройках пост обработки мне нужна категория Misc и в ней есть массив, под названием Blendables. В нем как раз и хранятся пользовательские материалы, накладываемые в качестве эффекта пост обработки, и в него мы должны добавить наш материал. Добавьте один элемент в массив и в качестве значения выберете ваш материал (можно перетащить прямо из Content Browser’а).

Установка материал на пост обработку

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

Теперь наша пост обработка установлена, однако материал будет выводить нам черный экран, так как материал пока что пуст.

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

Поставим этот блок и присоединим его к Emmisive свойству. Обращаю внимание, что Emissive свойство именно то, что будет выводится на экран.

Установка SceneTexture

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

По умолчанию материал обрабатывается до остальных эффектов пост обработки (Экспозиция, Блум и так далее). Из-за этого выводимое изображение из ScreenTexture может быть далеко от того, что вы видете через камеру редактора. Вы можете вручную произвести манипуляции после него, либо установить, что мы материал пост обработки обрабатывался уже после остального. Для этого нужно поставить параметр Blendable Location на Before Tonemapping.
Порядок обработки материала

Создание пикселизации в материале

Для создания эффекта пикселизации, мы будем производить математические операции над TexCoord, поэтому важно понимать, как работает TexCoord и UV контакт. Подробности об этом: http://uengine.ru/site-content/articles/texcoords-details

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

TexCoord блок

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

Мы уже знаем, что TexCoord выдает значения от 0 до 1. Но нам нужно сделать ступени вроде 0.1, потом 0.2 и так далее, без промежуточных значений. Этот эффект мы можем получить простым округлением до десятых.

Поскольку изначально нету подобного блока, мы округлим вручную:

Округление до десятых

  1. Умножаение на 10 даст нам текстуру от 0 до 10
  2. Округление позволит округлить значения до целых чисел. Например значение 5.453 округлится до 5.
  3. Деление на 10 вернет нам текстуру обратно, однако сейчас текстура не будет иметь всяких значений, вроде 0.346, а будут ровные значения 0.3, 0.4 и т.д.
Если вам не нравится, что делает Round внутри себя (можно посмотреть двойным кликом по нему), можно использовать Custom блок с HLSL кодом. В этом коде нужно создать x вход и создать простую формулу round(x). Кстати уже готовый такой блок можно найти внутри Round функции. Он не используется, но лежит там как раз в качестве альтернативы. Просто скопируйте его и вставьте в основной график вашего материала, заменив им саму функцию Round.

Обратите внимание, что TexCoord двумерная карта, поэтому это действие нужно повторить на каждый канал. Тем более, что Round работает только с одномерными значениями.

После округлений каждого канала нужно обратно собрать их в одну двумерную карту. Это можно сделать через Append блок, который добавляет к A новый канал со значением B.

Поэтому график будет подобного вида:

Округление TexCoord

Вместо того, что бы доставать каналы через Component Mask (На скриншоте Mask(R)и(G)), можно разбить карту через BreakOutFloat2Components.
Разбитие Float2

Теперь этот результат можно соединить с UV’s контактом нашего SceneTexture.

Материал пикселизации

Можно запустить и посмотреть, что получилось. Если все сделано правильно, то в итоге будет подобное:

Пикселизация на разрешение 10 н 10

Однако можно заметить, что у нас вышло слишком малое разрешение.. Это все из-за того, что мы округлили до десятых чисел. То есть наш TexCoord разделился на 10 частей: 0.1, 0.2 и так до 1. Более того, пиксели не квадратные, так как соотношение экрана у нас не ровное, а пикселей по Y и X одинаковое количество.

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

Плотность пикселей 100 на 100

Однако меня этот результат тоже не устаивает. Я хочу устанавливать размер пикселей, а не делить экран на определенное количество.

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

Предположим, что наш экран 1920 на 1080. Что бы получить пиксели 10 на 10, логично поставить на красный канал значения 192, а на зеленый, 108, так как именно столько пикселей у нас будет на X и Y. Тогда наши пиксели будут квадратные и размером 10 на 10. Вот так:

Ровные пиксели для разрешения 1920 на 1080

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

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

  1. Получаем значение текущего разрешения через Screen Resolution.
  2. Делим на желаемый размер больших пикселей.
  3. Вытаскиваем значения по X и Y в отдельные составляющие.
  4. Результаты присоединяем в соответствующий канал округления.

Адаптивная пикселизация под разрешение

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

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

Оригинальное изображениеПиксельное изображение

Вы можете использовать эту схему и для пикселизации текстур в материалах. А так же для пикселизации заднего плана за прозрачными материалами.

Пиксельный материалПрозрачный материал, пикселизующий все за собой

Добавил: Flakky Категория: Материалы


Комментарии
Аватар

Можно подробнее о пикселизации заднего плана за прозрачными материалами?? Не совсем понятно как, если PostProcess Volume, дак всё внутри него пикселизируется, а как именно сделать что бы на определённый объект действовала пост обработка?

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

Вы должны войти, что бы оставлять комментарии.

UEngine.ru © 2017
Все права защищены. При копировании материалов с сайта, ссылка на первоисточник обязательна.
Яндекс.Метрика
Главная страница