В этой статье я расскажу, как создать в UE4 выделение очертания. Как правило, разработчики используются для этого двумя разными способами:
- Рендерят сетку двукратно. В этом случае сначала рендерится одна сетка (со типовым материалом), а затем вторая (со слегка увеличенным масштабом и эмиссионным материалом)
- Используют алгоритм распознавания очертания. Он задается в виде материала пост-обработки
В этой статье я расскажу о втором методе, т.к. он легче интегрируется в уже существующие проекты. Это руководство написано с учетом того, что вы знакомы с основами UE4 (в частности, с тем, как трудится редактор материалов). Кроме того, чтобы было удобопонятно, как реализовать алгоритм распознавания контура в виде UE4-материала, также сгодятся базовые знания в области обработки изображений.
Основные шаги
Реализация эффекта выделения очертания в виде материала пост-обработки проходит в несколько этапов:
- Создание материала пост-обработки, какой выделит контур у объектов со включенным параметром Render Custom Depth.
- Добавление этого материала пост-обработки в список Blendables, какой находится в параметрах блока Post Process Volume.
- Включение параметра Render Custom Depth у всех скелетных и статичных сеток, у каких нужно выделить контур
Ниже я подробнее объясню любой из этих шагов. Если вы здесь лишь затем, чтобы скачать материал, можете разом перейти к разделу «Загрузки», который находится в самом крышке статьи.
Карта глубины
В UE4 есть отличная функция, позволяющая рендерить отдельные сетки в отдельную карту глубины, а затем использовать ее в материалах. Эта карта глубины кормит информацию о дистанции между каждым пикселем – и в мировых координатах, и в поле зрения камеры. Типическая карта глубины выглядит примерно так:
Наша карта глубины выглядит вылитым образом, за исключением того, что в ней видны лишь объекты, у каких включен параметр «Render Custom Depth»:
Карта глубины приметно упрощает применение эффектов вроде выделения контура, созданию какого и посвящена эта статья.
Создание материала
Самый сложный этап. Мы создадим материал, в каком будет реализован оператор Собеля, свернутый с кастомной картой глубины. Иными словами, мы применим на кастомную карту глубины фильтр распознавания очертания.
Начнем с алгоритма свертки. В его основе лежит довольно мудреная математика, но на самом деле все сводится к нескольким несложным шагам
- Берем пиксель P
- Берем 8 пикселей PN, прилегающих к пикселю P
- Умножаем смыслы в пикселях P и PN на значения в ядре свертки (т.е. делаем 9 умножений)
- Складываем полученные смыслы
- Возвращаем результат
Сначала нужно задействовать карту глубины. Делается это попросту: добавьте нод Scene Texture и подключите его к Emissive Color материала. Также выставьте настройку Scene Texture ID на CustomDepth.
Сейчас давайте задействуем прилегающие пиксели. Для этого можно использовать параметр UVs в ноде Scene Texture. Но проблема в том, что UV-параметры трудятся в текстурных координатах, т.е. используют значения от «0,0» (левый верхний угол текстуры) до «1,1» (правый нательный угол текстуры). Поэтому нам нужно взять инвертированные смыслы высоты и ширины текстуры, умножить их на смещение от центра ячеи (-1,-1), а затем прибавить к UV-координатам текущего пикселя. Таким манером мы выберем левый верхний пиксель.
В редакторе материалов это будет глядеть следующим образом:
Теперь делаем то же самое для оставшихся семи прилегающих пикселей. В итоге расчет смещения для всех восьми прилегающих пикселей будет глядеть следующим образом:
Итак, у нас есть набор UV-параметров для всех прилегающих пикселей, потому теперь можно задействовать данные из кастомной карты глубины. Я создал для этого несложную функцию материала: в качестве входных параметров она принимает UV-координаты, а затем возвращает смысл обработанного пикселя.
Если воспользоваться этой функцией для обработки этих от прилегающих пикселей, то у нас, собственно, будут все необходимые данные для распознавания очертания. Теперь давайте создадим еще одну функцию материала, какая будет выполнять свертку.
С левой стороны – два набора входных параметров. Первые 9 векторов – это попросту значения пикселей, которые мы будем обрабатывать. Другие 3 вектора служат для смыслов ядра свертки. По сути, это просто матрица 3х3, но поскольку в редакторе материалов UE4 нет образа данных для матрицы, я сделал собственную при помощи параметров Vector3.
Итак мы скопили все кусочки алгоритма. Теперь осталось лишь объединить их внутри итогового материала.
В операторе Собеля, по сути, задействованы две функции пакеты: вертикальная и горизонтальная. Вы, вероятно, заметили, что единственная разница между ними – это входные эти о ядре свертки.
Теперь давайте объединим два этих смыслы.
Далее открываем редактор материалов, при помощи рассчитанных смыслов создаем вектор, а затем возвращаем длину вектора. Итогом будет черное изображение с контуром вокруг сеток, у каких включен параметр Render Custom Depth. Осталось лишь смешать полученный эффект с финальной картинкой. В моем случае будет использоваться оператор «IF», но вы можете встроить алгоритм и по-своему. Ничего сложного в этом нет.
ПРИМЕЧАНИЕ: Уверитесь, что ваш материал находится в домене Post Process, а не Surface (есть в виду «material domain»; это параметр, через который настраивается, для чего будет использоваться материал). Это можно поменять в свойствах материала.
Настройка подмостки
Теперь, когда материал готов, нам нужно добавить его в список пост-обработочных эффектов подмостки. Выберите у своей сцены блок Post Process Volume и отыщите пункт Blendables. Добавьте в список Blendables новый компонент, а затем изберите из списка созданный нами материал. Если блока пост-обработки в вашей сцене нет, создайте его. Также уверитесь, что у блока Post Process свойство Unbound выставлено на «true». В противном случае игрок будет видать эффект строки только в том случае, если будет быть внутри блока Post Process Volume.
Чтобы проверить итог, поместите в сцену какую-нибудь сетку и включите у нее параметр Render Custom Depth.
Блюпринт
Я настроил сцену таким манером, что эффект строки будет появляться у статической сетки лишь в том случае, если игрок наведет на нее прицел. Я решил воспользоваться штампом для FPS. Кроме того, я добавил в блюпринт MyCharacter функцию Trace. Она вызывается таймером, тикающим любые 0,1 секунды, и проверяет, смотрит ли игрок на статичную сетку. Если глядит, параметр Render Custom Depth выставляется на «true». Если игрок перестает целить в сетку, значение в переменной Render Custom Depth меняется на «false». Посмотреть, как это все трудится, можно в файле, ссылку на который можно найти ниже, в разделе «Загрузки».
Итого
Итак, это руководство рассказало о несложном и легко интегрируемом методе для создания у объектов эффекта выделения очертания. Впрочем, этот метод можно использовать и для других задач. В подневольности от используемого ядра свертки мы можем создать эффекты вроде размытия, тиснения, резкости и т.д. Немало подробно читайте тут.
Демонстрационное видео
[embedded content]
Загрузки
- Тут можно скачать материал с эффектом выделения контура, созданным по руководствам этого руководства.
- Здесь можно скачать проект, в каком используется этот эффект.
Оригинал можно прочесть тут.
