Выделение контура у объекта в UE4

В этой статье я расскажу, как создать в 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». Посмотреть, как это все работает, можно в файле, ссылку на который можно найти ниже, в разделе «Загрузки».

Итого

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

Демонстрационное видео

Загрузки

• Здесь можно скачать материал с эффектом выделения контура, созданным по инструкциям этого руководства.
• Здесь можно скачать проект, в котором используется этот эффект.

Оригинал можно прочесть тут.