Полезное
Мы Вконтакте
Discord канал
В этом уроке мы создадим материал для пост обработки, который будет «пикселить» изображение в несколько раз. Так же этот эффект можно применить для пикселизации обычных текстур.
Урок разделен на две части: Установка материала в качестве пост обработки и написание материала для пикселизации.
Итак, приступим.
Назначить материал для работы в пост обработке достаточно легко. Для начала создадим материал. Создать нужно обычный материал, ничего особенного тут нету.
После создания называем его (я назвал PixelPostProcess) и откроем его в редакторе материалов двойным кликом.
В параметрах материала нужно сразу указать, что материал не для поверхностей объектов, а для пост обработки. Меняем параметр Material Domain на Post Process.
Обратите внимание, что все свойства материала, кроме Emissive, отключились. Это из-за того, что остальные свойства работают с освещением, углом, геометрией и остальными вещами, которых в пост обработке нету, так как это просто эффект для изображения, который рендерится на экран.
Теперь давайте установим этот материал в качестве эффекта в пост обработку. Для этого нам нужно определиться, в каком именно месте мы хотим включать этот эффект. Тут варианта два: в самой камере или в PostProcess Volume (участок на сцене. внутри которого включаются эффекты пост обработки). Я помещу наш эффект в камеру, что бы эффект был всегда. В моем случае камера находится в персонаже, поэтому я открою класс моего персонажа, найду в нем камеру и открою настройки пост обработки.
В настройках пост обработки мне нужна категория Misc и в ней есть массив, под названием Blendables. В нем как раз и хранятся пользовательские материалы, накладываемые в качестве эффекта пост обработки, и в него мы должны добавить наш материал. Добавьте один элемент в массив и в качестве значения выберете ваш материал (можно перетащить прямо из Content Browser’а).
Теперь наша пост обработка установлена, однако материал будет выводить нам черный экран, так как материал пока что пуст.
Давайте зайдем в материал и настроем его так, что бы он показывал изображение сцены. Сделать это очень просто.. Нам понадобится блок Scene Texture, который может вывести на изображение нужный нам канал.
Поставим этот блок и присоединим его к Emmisive свойству. Обращаю внимание, что Emissive свойство именно то, что будет выводится на экран.
Теперь в качестве пост обработки будет выводится то, что рендерится на экран. И с этим мы можем переходить к следующей части.
Для создания эффекта пикселизации, мы будем производить математические операции над TexCoord, поэтому важно понимать, как работает TexCoord и UV контакт. Подробности об этом: http://uengine.ru/site-content/articles/texcoords-details
Теперь давайте приступим. Для начала, нужно вывести сам TexCoord, что бы мы могли переопредлить то, как пиксели в SceneTexture рисуются на экране.
Что бы у нас получился эффект пикселизации, нам нужно сделать так, что бы TexCoord был не таким плавным, какой он изначально, а был более ступенчатым. Это и позволит отрисовать одно значение на нескольких пикселях сразу.
Мы уже знаем, что TexCoord выдает значения от 0 до 1. Но нам нужно сделать ступени вроде 0.1, потом 0.2 и так далее, без промежуточных значений. Этот эффект мы можем получить простым округлением до десятых.
Поскольку изначально нету подобного блока, мы округлим вручную:
Обратите внимание, что TexCoord двумерная карта, поэтому это действие нужно повторить на каждый канал. Тем более, что Round работает только с одномерными значениями.
После округлений каждого канала нужно обратно собрать их в одну двумерную карту. Это можно сделать через Append блок, который добавляет к A новый канал со значением B.
Поэтому график будет подобного вида:
Теперь этот результат можно соединить с UV’s контактом нашего SceneTexture.
Можно запустить и посмотреть, что получилось. Если все сделано правильно, то в итоге будет подобное:
Однако можно заметить, что у нас вышло слишком малое разрешение.. Это все из-за того, что мы округлили до десятых чисел. То есть наш TexCoord разделился на 10 частей: 0.1, 0.2 и так до 1. Более того, пиксели не квадратные, так как соотношение экрана у нас не ровное, а пикселей по Y и X одинаковое количество.
Что бы плотность была выше, можно просто округлить не до десятых, а до 100х, скажем. В нашем округлении нужно значение изменить на 100.
Однако меня этот результат тоже не устаивает. Я хочу устанавливать размер пикселей, а не делить экран на определенное количество.
Давайте пока на словах разберем, какая же должна быть логика, на примере размера квадратиков в 10 на 10 пикселей.
Предположим, что наш экран 1920 на 1080. Что бы получить пиксели 10 на 10, логично поставить на красный канал значения 192, а на зеленый, 108, так как именно столько пикселей у нас будет на X и Y. Тогда наши пиксели будут квадратные и размером 10 на 10. Вот так:
Но повторюсь, мы не знаем, какое разрешение будет у игрока. Для этого мы посмотрим, как мы получили эти 192 и 108.
Мы посмотрели разрешение, посмотрели, какой размер пикселей должен быть и поняли, сколько всего квадратиков ляжет на экран в данном случае. То есть мы просто поделили разрешение на размер и получили количество больших пикселей. Это мы и сделаем.
Теперь не важно, какое разрешение у пользователя, у вас пиксели будут все равно одного размера и их количество будет пропорционально и соответствовать этому разрешению экрана. Да и мы решили проблему с тем, что пиксели были не квадратные.
Вот и все. Можете даже динамически менять значение размера пикселей через блупринты, создавая постепенную пикселизацию, или же настройки размера пикселей.
Вы можете использовать эту схему и для пикселизации текстур в материалах. А так же для пикселизации заднего плана за прозрачными материалами.
Можно подробнее о пикселизации заднего плана за прозрачными материалами?? Не совсем понятно как, если PostProcess Volume, дак всё внутри него пикселизируется, а как именно сделать что бы на определённый объект действовала пост обработка?
Вы должны войти, что бы оставлять комментарии.
