Создание Next-Gen текстур для игрового окружения

Привет, меня зовут Daniel Vijoi, я работаю в игровой индустрии уже 7 лет. Моя нынешняя профессия – главный художник по текстурам в AMC Студии, румынской компании по разработке игр, основанной в Бухаресте. В течение этого времени я работал над многими проектами, такими как TestDrive Unlimited (Atari), Mercenaries 2, Saboteur (Pandemic Studios/EA), Pure (Blackrock Studios/DISNEY), Rise of Nations & Rise of Legends (BigHuge Games/THQ).

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

Для этого урока я использовал 3Dtotal Texture DVD — огромную библиотеку разнообразных текстур, которую мы регулярно используем в студии. В конце статьи вы найдете список всех текстур, которые я использовал в этой работе. Изображения некоторых текстур включены в эту статью.

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

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

Текстурирование

Текстурирование

Концепт представляет собой пустынное здание — собирательный образ здания колонии на планете Татуин и реальных тунисских строений. Для антуража я добавил некоторые детали в стиле научной фантастики. Пустынное окружение и погодные условия определяют основные цвета и детали текстур. Поскольку здание многоцелевое, детали разнообразны: в башне находится генератор, а задняя сторона строения может быть использована в качестве торговой лавки.

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

Скриншот геометрии здания с двух различных ракурсов:

Текстурирование

Та же геометрия с UV-разверткой. Проверка текстуры позволила убедиться, что все части развёртки пропорциональны и ни на одном из них не наблюдается деформация текстуры.

Текстурирование

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

Текстурирование

В первую очередь, особое внимание следует уделить планированию развёртки. Эскиз должен быть максимально компактным, с минимальным количеством свободного пространства. Большие области на конструкции будут занимать больше места на UV, чем маленькие. В данном случае я выбирал разрешение 128px/метр, что позволило мне сохранять пропорции и рассчитывать область, занимаемую каждой деталью здания на текстуре. Одинаковый масштаб и разрешение для всех частей гарантирует отсутствие областей с повышенной «размытостью».

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

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

На этом рисунке показано, как была сделана текстура стены. Верхнее изображение – оригинал текстуры, а нижнее — результат настройки цветов с помощью Color Adjustment и Unsharp Mask.

Текстурирование

Следующее изображение иллюстрирует процесс нанесения слоя краски и различных цветовых тонов имеющуюся текстуру стены. Самый простой способ — выбрать необходимые детали с помощью Color Range и добавить их в наш PSD. Я часто использую этот метод.

Текстурирование

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

Текстурирование

Большинство деталей добавляется тем же способом, с использованием маски или Color Range для выделения желаемых деталей на одной из текстур и добавления их на другую. При необходимости цвет текстуры в любой момент может быть изменен с помощью Replace Color.

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

Ещё один немаловажный момент для размышления – грамотная организация PSD-файлов, которая не только поможет достичь максимального качества текстуры, но и сэкономит время при плотном графике работы.

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

Если избежать использования других режимов смешения не удаётся, важно максимально сохранить фотореалистичность результирующей текстуры. Мягкий Свет (Soft light) представляется подходящим для выделения ярких участков, теней, фасок и пр.

Вот один из примеров применения описываемого метода:

Текстурирование

Следующее изображение – финальная текстура стены с добавлением насыщенности (saturation):

Текстурирование

Две направляющие (guidelines) в Photoshop определяют, как текстура повторяется (tiled). Мне нужно сделать текстуру повторяющейся (tileable) между этих двух линий, поскольку стена имеет высоту 5,5 метров, а у меня есть всего лишь 4 метра полезной площади текстуры, с которыми можно работать.

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

Ниже та же текстура, наложенная на геометрию:

Текстурирование

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

Текстурирование

Ниже ещё несколько примеров повторяемых (tiled) текстур:

Текстурирование

Текстурирование

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

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

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

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

Текстурирование

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

Затем я выделил из текстуры бетона детали с потёками и использовал их для крыши так же, как и для остальных элементов строения.

Текстурирование

Пришло время заняться деталями; начнём с входной двери. Очень важно помнить об организации PSD-файлов. Для того, чтобы итоговая текстура не выглядела загромождённой, они, насколько это возможно, должны содержать несколько слоёв со специальными режимами смешения.

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

Текстурирование

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

Текстурирование

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

Последняя детализированная область, процесс создания которой я хочу показать — это трубы:

Текстурирование

Подведём итоги.

  • При создании текстуры было использовано всего несколько инструментов Photoshop, таких как Color Range, Replace Color и Healing Brush.
  • Лучше придерживаться минимального количества слоёв и как можно реже использовать режимы смешения.
  • Следите за разрешением: оно должно быть одинаковым для всех текстур.
  • Не забывайте выносить объемные детали на отдельные слои. Это упростит создание карт нормалей и отражения.
  • Время, сэкономленное благодаря организации рабочего процесса, позволит вам уделить дополнительное внимание настройке текстуры или дополнительной детализации тех областей, которые вы могли упустить.

Текстурирование

Изображение выше – это итоговая версия первой карты со всеми повторяемыми (tiling) областями. Я решил ограничить себя двумя текстурами 1024×1024 и одной альфа-текстурой 512×256. Любые ограничений никогда не должны препятствовать максимально полной детализации. Добавление большего количества деталей на повторяемую (tiled) текстуру всегда лучше, чем добавление меньшего количества, в попытках уменьшить заметность повторения текстуры.

Текстурирование

Это вторая диффузная текстура, на которой так же отмечены повторяющиеся области.

Карта нормалей

Следующий важный – создание карты нормалей. Первое, что необходимо сделать, — создать карту высот из только что подготовленной диффузной карты. Это нечто большее, чем простое уменьшение насыщенности (de-saturating) цвета текстуры с последующим запуском фильтра. Необходимо тщательное изучение объемов, обозначенных на цветной текстуре.

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

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

Текстурирование

А таким образом выглядит результирующая карта нормалей после применения фильтра карт нормалей nVidia (nVidia Normal Map Filter) к созданной ранее карте высот. С той же целью можно использовать Crazybump или Xnormal. Эту карта нормалей в дальнейшем можно доработать в Photoshop. Если некоторые детали будут нуждаться в дополнительном выделении, их можно скопировать в отдельный слой с режимом смешения Overlay, поверх карты нормалей. Это действие увеличит глубину такой области.

Текстурирование

Тот же метод был использован и для второй текстуры. Карта высот и карта нормалей для текстуры на одном изображении:

Текстурирование

Для некоторых областей я добавил на карту нормалей дополнительные детали, отсутствующие на диффузной карте. Чуть ниже приведены несколько таких деталей, добавленные (в слой с режимом Overlay) для разнообразия ранее созданной карты нормалей.

Текстурирование

Карта бликов

Карты отражений нужна для того, чтобы определить, как свет будет отображаться от поверхности. Такие материалы, как дерево, кирпич или бетон будут отражать свет хуже specular values, чем стекло или металл. Как в случае с картой нормалей, при работе с картой бликов без тщательного изучения поверхностей не обойтись. Некоторые художники используют ч/б карту отражений, некоторые цветную.

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

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

В целом, карта бликов будет более контрастной, чем диффузная карта, из которой она была сгенерирована.

Текстурирование

Текстурирование

На рисунке, расположенном ниже, скомпонованы скриншоты из Maya, сделанные с использованием High Quality Renderer. Это изображение максимально приближено к тому, что вы сможете увидеть непосредственно в игре.

Текстурирование

Список 3D Total текстур, использованных в уроке:

Parts01 texture

  • brick15 (02 — aged & stressed)
  • brick18 (02 — aged & stressed)
  • ceiling_01 (07 — sci-fi textures)
  • door_12 (07 — sci-fi textures)
  • hull_05 (07 — sci-fi textures)
  • metal09 (02 — aged & stressed)
  • paint03 (02 — aged & stressed)
  • paving03 (01 — general)
  • red10 (03 — bases & layers)
  • wall10 (02 — aged & stressed)
  • wall13 (02 — aged & stressed)
  • wall14 (02 — aged & stressed)
  • wood_03 (02 — aged & stressed)

Parts02 texture

  • african15 (09 — ancient tribes & civilizations)
  • brown_01 (03 — bases 7 layers)
  • misc09 (02 — aged & stressed)
  • normal06 (03 — bases 7 layers)
  • paint01 (02 — aged & stressed)
  • plaster06 (02 — aged & stressed)
  • plaster08 (02 — aged & stressed)
  • tile02light07 (05 — dirt & graffiti)
  • tile02medium10 (05 — dirt & graffiti)
  • tile04heavy01 (05 — dirt & graffiti)
  • wall05 (02 — aged & stressed)
  • wall18 (02 — aged & stressed)
  • window01t (07 — sci-fi textures)

И в заключение приведу визуализацию итоговой сцены. Я надеюсь, что этот урок был полезен и возможно помог вам лучше понять задачи текстурирования для next-gen игр.

Текстурирование

Перевод: Катерина

Поделиться в: Опубликовать в twitter Опубликовать в своем блоге livejournal.com