Улучшение текстур с помощью карт нормалей (Normal maps)

В последнее время всё чаще и чаще вижу конверты с современных игр, качество конвертов бывают разных уровней – и хорошие и плохие. Но независимо от качества конверта в целом, в большинстве из них есть синдром "плоских текстур", о чём я, конечно, и жалуюсь в комментариях в файловом архиве. Возможно, конвертеры не знают зачем же нужны эти странные фиолетовый текстуры, или же всего лишь не могут его применить. И я в этой статье научу применять их при конверте.
Теория
Но для начала немного теории с Википедии:
Normal mapping — техника, позволяющая изменять нормаль отображаемого пикселя основываясь на цветной карте нормалей, в которой эти отклонения хранятся в виде текселя, цветовые составляющие которого [r,g,b] интерпретируются в оси вектора [x, y, z], на основе которого вычисляется нормаль, используемая для расчета освещенности пикселя. Благодаря тому, что в карте нормалей задействуются 3 канала текстуры, этот метод дает большую точность, чем Bump mapping, в котором используется только один канал и нормали, по сути, всего лишь интерпретируются в зависимости от «высоты».
Карты нормалей обычно бывают двух типов:
object-space — используется для не деформирующихся объектов, таких как стены, двери, оружие и т. п.
tangent-space — применяется для возможности деформировать объекты, например персонажей .
Для создания карт нормалей обычно используется высокополигональная и низкополигональная модели, их сравнение дает нужные отклонения нормалей для последней.
Это означает что карта нормалей это своеобразная развёртка высококачественной модели которая натягивается на низкокачественную модель с низкокачественной текстурой, в результате которой на поверхности низкокачественной модели визуально появляются детали в виде складок/шероховатостей/структуры тканей хотя фактически этого на модели нет.
Ну как-то так, объяснил как мог, своими словами.
Практика
Ну и собственно сам метод избавления от плоскости и придание объёма текстуре. Нам понадобятся:
• Графический редактор Paint.net (Неплохая программа, весит мало, всегда юзаю сам)
Итак-с начнём.
Нам нужна карта нормалей (normal map, нормал мап, фиолетовая текстура) именно от той текстуры которую мы хотим улучшить. Обычно в файлах игры она называется точно так же как и обычная, но с окончанием "_nor", "_no", "_n". В некоторых играх она бывает практически прозрачной и ,одновременно, радужно-разноцветной как в Battlefield 2. Открываем её в paint.net.

Делаем её чёрно-белой комбинацией клавиш Ctrl+Shift+G или же нажимаем вкладку Коррекция ► Сделать чёрно-белым

На этом этапе нам нужно осознать правильно ли придан объём. Если, к примеру, это карта нормалей от текстуры одежды, то можно обратить внимание на карманы, швы где одна часть одежды должна быть немного выше, а карманы выпуклыми. Зачастую приходится инвертировать цвета, но это не всегда и это надо "почувствовать нутром". Если вы, вдруг, прозевали с моментом то скорее всего текстура в конце проделанной работы станет светлее прежнего и модель будет выделяться на общем фоне. Инверсия цветов происходит комбинацией клавиш Ctrl+Shift+I или всё в той же вкладке Коррекция ► Инвертировать цвета.

Всё, мы подготовили само улучшение. Теперь нам нужно открыть улучшаемую текстуру (color map, колор мап, текстура) и создать новый слой комбинацией клавиш Ctrl+Shift+N или через вкладку Слои ► Добавить новый слой. Внимание: нам хватит одного нового слоя. У нас должно быть только два слоя.

Теперь меняем свойства этого слоя. Клавишей F4 или через вкладку Слои ► Свойства слоя... В появившемcя окошке на нужен режим смешивания "Перекрытие" и нажимаем ОК.

Теперь переключаемся на подготовленное улучшение и копируем её последовательностью действий: Выбираем всё комбинацией клавиш Ctrl+A и, собственно, копируем комбинацией Ctrl+C. Переключаемся на улучшаемую текстуру, выбираем новый слой который мы подкорректировали (если вдруг по каким-то причинам он не выбран) и вставляем то, что скопировали, в этот слой комбинацией клавиш Ctrl+V. И мы сразу заметим улучшение.

Попробуйте почувствовать разницу:

Теперь объединяем наши слои комбинацией клавиш Ctrl+M или во вкладке Слои ► Объединить со следующим слоем. И сохраняем нажав иконку дискеты перезаписывая файл или же через вкладку Файл ► Сохранить как.. и задав новое имя файлу. Иначе вы сохраните его как незаконченный проект программы, а не в привычном нам формате PNG/BMP.

В принципе на этом всё. Если модель состоит нескольких подмоделей (например модель человека – из головы, ног и туловища), то придётся и их текстуры улучшить данным способом. После этого запихать/заменить текстуры в файле формата .txd через TXD Workshop или другой подобной программы и запихать её в игру.
Как итог проделанной работы, в качестве примера приведу модель пользователя почетный призрак под названием Боец ВС РФ в камуфляже "Горка"
Рекомендуемые файлы

ASSC (Anti Social Social Club) Grey Hoodie White Title 1.0


Airbus A380-800 F-WWDD Etihad Titles


Custom Wasted/Busted Title

GTA 3 titles upscaled

GTA SA Style loadscreens

Сайлент Хилл. Тизер.

DYOM# v1.7

[RU] Новый русификатор для GTA 3 Definitive Edition v2.1.2 Remastered

CLEO Redux v1.2.2

[RU] GTA San Andreas - Миссии 27-28 (Русская озвучка)


Emotion 98.3 (Advanced Track Player)


Интро ролик GTA SA с участием Young Maylay

Улучшение текстур с помощью карт нормалей (Normal maps)

В последнее время всё чаще и чаще вижу конверты с современных игр, качество конвертов бывают разных уровней – и хорошие и плохие. Но независимо от качества конверта в целом, в большинстве из них есть синдром "плоских текстур", о чём я, конечно, и жалуюсь в комментариях в файловом архиве. Возможно, конвертеры не знают зачем же нужны эти странные фиолетовый текстуры, или же всего лишь не могут его применить. И я в этой статье научу применять их при конверте.
Теория
Но для начала немного теории с Википедии:
Normal mapping — техника, позволяющая изменять нормаль отображаемого пикселя основываясь на цветной карте нормалей, в которой эти отклонения хранятся в виде текселя, цветовые составляющие которого [r,g,b] интерпретируются в оси вектора [x, y, z], на основе которого вычисляется нормаль, используемая для расчета освещенности пикселя. Благодаря тому, что в карте нормалей задействуются 3 канала текстуры, этот метод дает большую точность, чем Bump mapping, в котором используется только один канал и нормали, по сути, всего лишь интерпретируются в зависимости от «высоты».
Карты нормалей обычно бывают двух типов:
object-space — используется для не деформирующихся объектов, таких как стены, двери, оружие и т. п.
tangent-space — применяется для возможности деформировать объекты, например персонажей .
Для создания карт нормалей обычно используется высокополигональная и низкополигональная модели, их сравнение дает нужные отклонения нормалей для последней.
Это означает что карта нормалей это своеобразная развёртка высококачественной модели которая натягивается на низкокачественную модель с низкокачественной текстурой, в результате которой на поверхности низкокачественной модели визуально появляются детали в виде складок/шероховатостей/структуры тканей хотя фактически этого на модели нет.
Ну как-то так, объяснил как мог, своими словами.
Практика
Ну и собственно сам метод избавления от плоскости и придание объёма текстуре. Нам понадобятся:
• Графический редактор Paint.net (Неплохая программа, весит мало, всегда юзаю сам)
Итак-с начнём.
Нам нужна карта нормалей (normal map, нормал мап, фиолетовая текстура) именно от той текстуры которую мы хотим улучшить. Обычно в файлах игры она называется точно так же как и обычная, но с окончанием "_nor", "_no", "_n". В некоторых играх она бывает практически прозрачной и ,одновременно, радужно-разноцветной как в Battlefield 2. Открываем её в paint.net.

Делаем её чёрно-белой комбинацией клавиш Ctrl+Shift+G или же нажимаем вкладку Коррекция ► Сделать чёрно-белым

На этом этапе нам нужно осознать правильно ли придан объём. Если, к примеру, это карта нормалей от текстуры одежды, то можно обратить внимание на карманы, швы где одна часть одежды должна быть немного выше, а карманы выпуклыми. Зачастую приходится инвертировать цвета, но это не всегда и это надо "почувствовать нутром". Если вы, вдруг, прозевали с моментом то скорее всего текстура в конце проделанной работы станет светлее прежнего и модель будет выделяться на общем фоне. Инверсия цветов происходит комбинацией клавиш Ctrl+Shift+I или всё в той же вкладке Коррекция ► Инвертировать цвета.

Всё, мы подготовили само улучшение. Теперь нам нужно открыть улучшаемую текстуру (color map, колор мап, текстура) и создать новый слой комбинацией клавиш Ctrl+Shift+N или через вкладку Слои ► Добавить новый слой. Внимание: нам хватит одного нового слоя. У нас должно быть только два слоя.

Теперь меняем свойства этого слоя. Клавишей F4 или через вкладку Слои ► Свойства слоя... В появившемcя окошке на нужен режим смешивания "Перекрытие" и нажимаем ОК.

Теперь переключаемся на подготовленное улучшение и копируем её последовательностью действий: Выбираем всё комбинацией клавиш Ctrl+A и, собственно, копируем комбинацией Ctrl+C. Переключаемся на улучшаемую текстуру, выбираем новый слой который мы подкорректировали (если вдруг по каким-то причинам он не выбран) и вставляем то, что скопировали, в этот слой комбинацией клавиш Ctrl+V. И мы сразу заметим улучшение.

Попробуйте почувствовать разницу:

Теперь объединяем наши слои комбинацией клавиш Ctrl+M или во вкладке Слои ► Объединить со следующим слоем. И сохраняем нажав иконку дискеты перезаписывая файл или же через вкладку Файл ► Сохранить как.. и задав новое имя файлу. Иначе вы сохраните его как незаконченный проект программы, а не в привычном нам формате PNG/BMP.

В принципе на этом всё. Если модель состоит нескольких подмоделей (например модель человека – из головы, ног и туловища), то придётся и их текстуры улучшить данным способом. После этого запихать/заменить текстуры в файле формата .txd через TXD Workshop или другой подобной программы и запихать её в игру.
Как итог проделанной работы, в качестве примера приведу модель пользователя почетный призрак под названием Боец ВС РФ в камуфляже "Горка"
Рекомендуемые файлы

ASSC (Anti Social Social Club) Grey Hoodie White Title 1.0


Airbus A380-800 F-WWDD Etihad Titles


Custom Wasted/Busted Title

GTA 3 titles upscaled

GTA SA Style loadscreens

Сайлент Хилл. Тизер.

DYOM# v1.7

[RU] Новый русификатор для GTA 3 Definitive Edition v2.1.2 Remastered

CLEO Redux v1.2.2

[RU] GTA San Andreas - Миссии 27-28 (Русская озвучка)


Emotion 98.3 (Advanced Track Player)


Интро ролик GTA SA с участием Young Maylay

Создатель и разработчик - Evgenii Sokolov
При копировании материалов ссылка на LibertyCity.Ru обязательна.