Руководство по работе с Normal Edge Decals от Леонардо Иецци

В данном руководстве от художника Леонардо Иецци (Leonardo Iezzi) рассматривается подход с использованием Normal Edge Decals, создание необходимых карт/геометрии и способы их применения.

В настоящее время (оригинал руководства опубликован в сентябре 2018) эта техника используется во многих играх, однако я считаю компанию IO Interactive в некотором роде пионерами адекватного использования данной техники в Hitman Absolution — игре которая находилась в разработке ещё в 2009 году. Что же я хочу сказать?

Я не изобретаю колесо и не пытаюсь продать его вам, как если бы оно было моим. Я просто пытаюсь показать вам, как оно работает.

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

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

NORMAL EDGE DECALS (сокр. NED, краевые/кромочные декали) очень полезны в тех случаях, когда вы хотите «разбить» жёсткость геометрических линий, которые формируют объект. Обычно они применяются к архитектурным элементам и пропсам, которые используют тайловые текстуры. Это позволяет вам сохранить сам тайловый материал нетронутым, и в то же время получить дополнительные детали, такие как царапины, сколы и другие незначительные повреждения.

Если вы обратите внимание, вы найдете NED практически во всех играх следующего поколения, а также в некоторых старых проектах.

Вот несколько примеров:

Давайте посмотрим на самые очевидные из них:

Найдите необходимые референсы и определитесь с тем, какие декали вы хотите создать.

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

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

Лёгкие повреждения + Тяжёлые повреждения

Лёгкие повреждения

Тяжёлые повреждения

Примечание: В рамках этого урока я просто изменил интенсивность нормалей, но если вы будете использовать данный сценарий в реальной работе, в идеале вы должны сделать ещё один скульпт, который будет более детально и точно передавать повышенный уровень разрушения.

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

Примечание: Я специально выбрал эти материалы, так как они являются наиболее распространенным типам.

Наша конечная цель — получить карту, которая выглядит вот так.

Для этого необходимо разделить текстуру на 5 (или более) слотов A, B, C, D, E и добавить карту нормалей в центр каждого слота, оставив достаточное количество места, для плавного исчезновения, прежде чем она доберется до соседних слотов.

Примечание: Тримы были специально размещены вертикально, поскольку мы собираемся применять их в основном на вертикальных углах. Но если хотите, вы можете разместить их горизонтально.

Мы создаём только один Normal Sheet (или два, в зависимости от ваших планов), для всего сразу. Вам не нужно создавать новый Normal Sheet для каждого ассета, который вы делает. Весь смысл заключается именно в ПОВТОРНОМ использовании одного листа.

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

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

Вариант A

Импортируйте свою модель в ZBrush и в разделе Geometry несколько раз (5-6 раз) нажмите кнопку Divide. Затем, активируйте опцию SMT (Smooth) и нажмите ещё несколько раз, чтобы немного сгладить края. Это поможет при лепке.

Вариант B

В качестве альтернативы, вы можете подразбить свою модель несколько раз с отключённой опцией SMT (Smooth). После чего в разделе Deformation поиграть с деформатором Polish. Это позволит вам лучше контролировать сглаженность краёв.

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

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

Данный подход можно использовать и в других программах, таких как Substance Designer.

Наконец, необходимо запечь информацию с HP-объекта на LP-объект (если вы не знаете, как это сделать, вы можете ознакомиться с уроком, который я подготовил). У вас должно получиться что-то похожее на изображение выше. К сожалению, вам придётся удалить некоторые швы по вертикальной оси (это проблема, потому что мы собираемся использовать эту текстуру в качестве тайловой).

Теперь настало время подправить швы. Вы можете быстро исправить их с помощью Photoshop или любого другого ПО со схожим функционалом.

В окне Offset установите значение по вертикали равное половине от высоты вашей текстуры.

Теперь нам нужно немного подправить нашу текстуру. Поскольку мы запекали нашу 3D модель на сглаженный меш, нам нужно немного сгладить области между впадинами разных углов, чтобы при применении END переход выглядел более плавным/бесшовным.

Чтобы получить подобный результат, откройте её с помощью Photoshop, и создайте новый слой. Затем мягкой кистью сделайте несколько штрихов в промежутках (gaps). Используйте цвет для плоской карты нормалей (flat normal map) HEX: 7E7DFD.

Последнее, что нам нужно сделать, это создать альфа-текстуру (маску), чтобы замаскировать часть нормали, которая нам не нужна. Также вы можете создать более комплексную/сложную альфу, если вы видите некоторые проблемы в том, как нормали нашей декали смешиваются с другими нормалями. Оба варианта должны работать хорошо, но комплексный вариант более точен. В то же время, если он сделан неправильно, это может привести к другим проблемам. Мой совет — начните с простого варианта, и если нормали вашей декали будут смешиваться плохо, вы можете попробовать сделать более точную маску. Создать их можно с помощью инструмента Brush в Photoshop, а каналы карты нормалей могут помочь вам экстраполировать некоторые фигуры.

На данном этапе, всё что нам нужно — это просто объект который будет представлять собой угол (corner mesh). Далее я буду называть его трим-мешем (rim mesh). Грани должны быть немного смещены относительно исходного меша, чтобы избежать визуальных проблем, связанных с перекрытием. Ширина граней может варьироваться в зависимости от желаемого масштаба декали. UV-развёртка трим-меша должна быть правильно наложена поверх одного из имеющихся у вас слотов. Меш должен иметь одну группу сглаживания (другими словами, ребро должно быть мягким(soften edge)).

Теперь давайте посмотрим на что-то более сложное.

В некоторых случаях вы хотите иметь обычную кромочную декаль на основе объекта, чтобы получить более плавный визуальный переход между вертикальной и горизонтальной поверхностями. В моём примере (изображение сверху) мне нужны некоторые детали от «бетонных плит», но при этом я хочу оставить сам пол нетронутым. Важно, чтобы вы сохранили эти скрытые грани (выбранные грани на изображении выше) нетронутыми, поскольку они позволяют краю угла оставаться мягким. Это необходимо для правильной визуализации информации, которую передают нормали. Кроме того, вы можете повернуть нормаль вершины (vertex normal) на 45 градусов.

«Проблема»

Как вы могли заметить, удаляя скрытую грань трима у основания, вы (по умолчанию) выпрямляете нормали вершин (vertex normal). Это значит что карта нормалей (которая была создана вдоль усредненной нормали угла этих двух граней) будет работать неправильно, и она будет наклоняться, пытаясь обогунть отсутствующую старую усредненную нормаль вершины (average vertex normal). Вы можете специально удалить грань, если пытаетесь добиться чего-то подобного (на верхнем изображении).

Решения:

Первый вариант

Плюс: Это быстро.

Минус: Дополнительные грани.

Второй вариант

Плюс: Одна грань.

Минус: Это медленно.

Сделав UV развёртку для трим-мешей вы получите что-то вроде следующего изображения. Вы можете сместить некоторые UV островки, чтобы наложить трим на другую часть текстуры. Так вы сможете добиться большего разнообразия.

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

Поскольку мы привязаны к сетке в UV Editor (в моём случае в Maya), мы можем установить Offset Tool на 0,2 (в моём случае). Таким образом, каждый раз, когда я буду нажимать стрелки влево и вправо, я буду смещать выбранный UV к предыдущему или следующему слоту, позволяя быстро их опробовать .

Помните что функция смещения UV есть не только в Maya

В 3ds Max после открытия UV Editor есть две опции: абсолютные значения и относительные значения, вы можете изменить их, кликнув по соответствующей иконке. Я бы рекомендовал вам использовать Realtive Mode: и в моем случае я использую 0,2 или -0,2, чтобы переместить UV в следующий или предыдущий слот.

В Modo в UV Editor вы выбираете UV трима, который хотите переместить, выбираете инструмент Transform и в свойствах Transform у вас есть значения U и V. Вы можете выполнить смещение, добавив или отняв 0,2 (как в моем случае).

В Blender после открытия UV Editor нажмите «N», чтобы появилась правая панель со свойствами. Значения являются абсолютными (absolute), поэтому вам нужно добавить или вычесть желаемое смещение (offset). В моем случае 50 units.

В Houdini вы создаёте uvedit (или когда делаете UV), открываете UV редактор (Space+5) и выбираете UV, затем добавляете или вычитаете 0,2 (в моём случае) в Transform Proprieties.

Прежде всего, мы должны принять во внимание одну важную вещь: мы всегда должны уменьшать ту часть меша, которая станет прозрачной, на основе Альфы, которую мы создали ранее. Это нужно по двум причинам. Во-первых, из-за размера прозрачной области, которую мы визуализируем. Меньше прозрачности дешевле в плане производительности. Во-вторых, из-за того, что уменьшая ненужную область меша, мы уменьшаем размер трим-меша, что снижает дистанцию прорисовки (draw distance). Это значит, что трим-меш визуализируется только крупным планом. Если вы планируете масштабировать детали, выбирайте с умом. Ниже приведены некоторые из доступных вариантов.

Создать материал для обычной декали в Unreal Engine невероятно просто. Просто импортируйте две созданные вами текстуры (карту нормалей и альфа-канал) в редактор материалов, соедините их, как показано на изображении выше, и настройте свойства материала. Затем примените этот материал к слоту трим-меша.

Decal Blend Modes | Unreal Engine Documentation

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

Ниже показано как всё это работает в Unreal Engine. Я также применил тайловый материал, чтобы лучше смоделировать результат, который вы получите. Декаль работает, даже если наша поверхность абсолютно плоская.

Вместе с этим руководством вы получите шейдер, который необходимо использовать для получения функционала Deferred Normal Decal. В вашем проекте, если он хорошо организован, у вас должна быть папка с названием «shader». Перетащите файл шейдера в эту папку. Если у вас нет директории shader, просто закиньте его куда-нибудь внутрь проекта.

Автор шейдера: Dickie McCarthy (@dickiemccarthy)

Добавив шейдер, создайте новый Материал и примените к нему новый шейдер. Затем назначьте текстуру, которую вы создали ранее (карту Нормалей и Альфу). Чтобы вы смогли увидеть декали, необходимо настроить Rendering Path для камеры или проекта, выбрав тип Deferred.

Ещё одна технология, которую вы можете использовать для улучшения своих декалей — это цвета вершин (vertex color). Цвета вершин дают нам четыре дополнительных значения, которые вы можете использовать в сочетании с вашим Мастер-Материалом практически бесплатно. В примере выше (M_NormalDecal) я использую красный канал для маскирования декали. (Я также экспонировал Global Float для управления видимостью). Существует много идей связанных с цветом вершин, например, вы можете управлять интенсивностью нормали с помощью канала, вы можете сместить текстуру в другой слот и т.д. и т.д.

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

Вы можете раскрасить вершины в Unreal Engine с помощью инструмента рисования, а также в программах 3D моделирования, таких как Maya, Max, Modo и т.д.

В этом случае я использую цвета вершин, для добавления перехода между двумя разными декалями (смешивания). Например, небольшие вмятины на «мягком» (пористом) бетоне можно комбинировать с сильно повреждённым бетоном. В этом примере, я накладываю две декали в центральной части и стираю красный цвет с двух последних перекрывающихся вершин. В этом случае, у вас не должно быть значительных проблем с отображением LOD'ов, так как у вас есть два разных меша, состоящих из очень малого количества граней.

В этом случае я использую цвета вершин, для маскирования декалей, чтобы «разбавить» их повторяемость и добавить немного вариативности. На изображении сетки, можно увидеть, что я добавил ряд дополнительных вершин, чтобы иметь больше контроля при использовании Vertex Color. Недостатком или спецификой, с которым вы можете столкнуться при использовании этого подхода, является выскакивание LOD. Если вы генерируете LOD'ы автоматически, с помощью Unreal, Sympligon или любого другого инструмента, они будут удалять вершины. Это означает, что нужная плотность сетки в сгенерированном LOD'е будет потеряна, что приведет к «выскакиванию».

Плюсы

Минусы

На изображении выше, показана последовательность пассов — это то, что происходит (в очень упрощенном виде) в буфере каждый раз, когда вы рендерите кадр с помощью конвейера отложенного шейдинга (Deferred Shading pipeline). Через шейдеры мы можем получить доступ ко всем этим слоям и переопределить или изменить свойства каждого из них.

По сути, мы говорим шейдеру, чтобы он воздействовал на один или несколько ранее показанных пассов. Как именно мы выбираем, на какой пасс мы хотим воздействовать? При выборе Deferred Decal вы активируете Decal Blend Mode. Отсюда вы можете выбрать другой способ смешивания декалей, в нашем случае у нас есть Normal. Это значит, что будут затрагиваться только нормали объекта (*). Если нам нужны определенные цветовые вариации (например, декали с засохшей кровью или следы от краски), вы можете выбрать тип Stain, а если требуется весь материал, вы просто оставляете значение Translucent (например, лучше для декалей краски с резкими вариациями).

Всё это имеет свою цену. Как видно из этой «блок-схемы», мы добавили дополнительный пасс, который будет обрабатываться в каждом кадре. В идеале, это не имеет большого значения. Проблемы начинаются, когда вы накладываете много отложенных декалей друг на друга. Это весьма вероятный сценарий, ведь они такие крутые :) Так что будьте с этим осторожны.

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

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

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

Если вам понравился этот урок, ставьте «палец вверх». В комментариях на Artstation, вы можете написать мне что по вашему мнению вышло хорошо, а что не очень или осталось непонятным. Если у вас есть предложения или идеи для следующих уроков вы также можете написать мне об этом. Можете не стесняться и спокойно распространять данный урок среди своих друзей и коллег.

Автор руководства Leonardo Iezzi

Текст перевёл и подготовил: Константин Пономарёв

Впервые данный перевод был опубликован на DTF.ru 25 мая 2022 (ссылка на вебархив прилагается). В конце декабря 2022 после удаления моего аккаунта. данный перевод был опубликован повторно, без моего согласия и указания авторства. После моего запроса администрация распубликовала этот «перезалив». Чтобы подобная ситуация не повторилась я завёл новый аккаунт и приступил к восстановлению статей. Увидив это, местные крысы забились в истерике и предприняли последнюю попытку поднасрать мне и зачем-то опубликовали данное руководство на английском языке.

Затем, уже 9 февраля 2023 очередная контора инфоциган под названием cgitems опубликовала «рерайт» данного перевода у себя на сайте под видом своего собственного перевода. Ссылки приводить не буду, дабы не рекламировать их.

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

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

Если это оригинальный перевод с нуля, то как вот из этого:

Using the gradient layer you can create a spherical shape with a smooth black outline, might be better to set the background mid-grey to see the dark ring around the circle (B).

Могло получиться вот это:

B. Используя Gradient Layer, вы можете создать сферическую форму с гладким черным контуром. Чтобы это сделать выберите Gradient Layer - New Fill Layer - Gradient. В диалоговом окне Gradient Fill укажите тип Radial и выставьте значение Scale на уровне 18%. Затем нажмите на полоску градиента в верхней части окна что поможет открыть Gradient Editor. В Gradient Editor настройте так, чтобы они повторяли картинку B. При этом может быть лучше будет установить средне-серый фон (120-128), чтобы лучше увидеть темное кольцо вокруг круга.

В тексте отчётливо видны следы рерайта. Например: "может быть лучше будет" или "что поможет открыть". Кто вообще так говорит?

Если бы горе-рерайтеры из cgitems переводили текст сами у них никогда не получился бы НАСТОЛЬКО похожий текст. И таких моментов в тексте буквально десятки. Ну, молодцы что хоть картинки перевели. Хотя, по факту, просто взяли и засрали хороший перевод своими дебильными «изменениями».

UPD от 21.02.2023

К нам «на огонёк» заскочил представитель cgitems, аж с целым скриншотом, который доказывает что текст УНИКАЛЕН. Честно-честно.

К счастью, существуют сервисы для подробного сравнения текстов, которые способны находить не только точные 100% соответствия, но и незначительные изменения. Например copyleaks.com

Ярким красным цветом отмечены места где новоиспечённый «переводчик» (которого наняли за много-много денег) решил не утруждаться и оставил «как есть».

Самое забавное, что у этих «интеллектуалов» не хватило ума, не копировать целиком главный маркер оригинального текста NORMAL EDGE DECALS (сокр. NED, краевые/кромочные декали). Надо ли упоминать что никаких NED'ов в оригинале никогда не было.