Hand-painted текстуры: что это такое и как их рисовать

Рассказываем о том, что такое текстуры, и в каких случаях их рисуют вручную.

3D и Unreal Engine

Hand-painted текстуры: что это такое и как их рисовать

Текстуры далеко не всегда генерируются программами. Иногда их нужно рисовать вручную, как во времена Warcraft 3. Мы расскажем, как можно выстроить процесс рисования текстур на примере бесплатного 3D-редактора Blender. Он будет состоять из шести этапов — от создания развертки и подбора референсов до работы кистью и сохранения результата.

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

Что такое текстуры и почему они важны

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

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

Модели из игры 7 Days to Die в исходном виде представляют собой серые болванки, которые показывают формы. При наложении текстуры мы видим состояние поверхности и понимаем, как она реагирует на освещение. Формы тоже становятся более четкими.

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

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

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

Текстуры в играх League of Legends и Atomic Heart — Слева — League of Legends, где текстуры нарисованы вручную. Справа — Atomic Heart, где используется технология PBR (Физически корректный рендеринг).

Зачем рисовать текстуры вручную

Ограниченность вычислительных мощностей

На заре развития игровой индустрии мощные по тем временам компьютеры стоили очень дорого, да и выбор 3D-редакторов тоже был невелик. Из-за этого не могло быть и речи о том, чтобы использовать в играх динамическое освещение и создавать сложные модели. Поэтому текстуры рисовались вручную — с их помощью старались изобразить дополнительные детали, показывали свет и тени.

Текстуры в игре Harry Potter and the Philosopher’s Stone — Игра Harry Potter and the Philosopher’s Stone вышла в 1997 году. С помощью текстур создается иллюзия объема и сложных форм. Складки на мантиях, волосы на голове, отверстия в сливной решетке и закругленные грани напольной плитки показаны с помощью текстур. 3D составляющая при этом упрощенная.

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

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

Hand-painted текстуры в Northgard — Разработчики игры Northgard — небольшая студия Shiro Games — осознанно выбрали стилизацию и hand-painted текстуры, чтобы осилить ее выпуск.

Упор на стилизацию

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

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

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

Программы для рисования текстур

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

Adobe Photoshop версии CS и выше позволяет загружать 3D-объекты и сам делает их развертку. Художник видит шкурки в одном окне, а модель — в другом. Это базовая программа, с которой начинают работать почти все CG-художники, поэтому некоторые переносят сюда развертки из других редакторов, ведь здесь есть любимые кисти и знакомый интерфейс. Недостаток кроется в том, что Photoshop нацелен на работу с 2D-графикой, а значит у вас не получится оперативно внести изменения в модель

Blender — бесплатный 3D-редактор с огромным набором возможностей по моделированию и анимации. Для работы с текстурами есть набор встроенных кистей.

Adobe Substance Painter — специализированная программа для работы с текстурами. Редактировать 3D-модели здесь не получится — нужно загружать уже готовые. Substance Painter обладает настраиваемым интерфейсом, неплохим выбором встроенных кистей и возможностью загрузить кисти из Adobe Photoshop.

Работать с текстурами можно в большинстве 3D-редакторов, главное, чтобы вам был удобен интерфейс и функционал. Перейдем теперь к описанию этапов работы над текстурами.

Как создают hand-paint текстуры

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

Как сделать развертку модели

Развертка показывает все грани 3D-модели в формате 2D. Это своего рода «шкура», снятая с объекта и растянутая на плоскости. Развертка — это не единый слепок, а отдельные элементы, которые называют островами.

Пример развертки и готовой модели — Пример того, как выглядит развертка и готовая модель. Автор: Брайан Джонс

Чтобы сделать развертку для текстур, нужно открыть в 3D-редакторе модель и включить режим редактирования («Edit Mode» или кнопка «Tab»). Так вы сможете увидеть топологию предмета. Затем переходим во вкладку «UV редактирование» («UV Editing») и нажимаем клавишу «A», чтобы целиком выделить предмет, с которым будем работать.

Сетка с гранями модели и развертка в Blender — После описанных манипуляций мы видим сетку, которая показывает расположение граней на модели. Слева появляется окно, где будет находиться развертка. Автор: Грант Аббит

Нажмем правой кнопкой мыши на модель и выберем «Smart UV Project». В появившемся окне зададим допуск между островами в 0.050. Это нужно для удобства, чтобы части текстуры не слипались друг с другом и находились на на некотором расстоянии. Установив настройки, нажимаем «ОК», и в левом окне появляется развертка.

Внесение изменений в модель и развертку — Кистью можно рисовать в любом окне. Изменения синхронно будут отражаться на модели и на развертке. Автор: Грант Аббит

Как подготовиться к рисованию текстур и на что обращать внимание

Подберите референсы

В работе с hand-painted текстурами, как и при обычном рисовании, полезно иметь перед глазами наглядный пример. Мы советуем разделить подборку референсов на две части.

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

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

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

Подбор референсов для работы с текстурами — Пример того, как можно организовать подбор референсов. Слева — модель с готовыми текстурами. Автор: Жасмин Хабезаи-Фекри

Нанесите базовые цвета

Начать работу стоит с подбора цветовой палитры. Делать это лучше на «‎голой» модели, пока на ней нет бликов и теней, сколов, трещин и грязи. Перечисленные детали будут размывать цвет и отвлекать ваше внимание.

Чтобы залить модель плоскими цветами, нужно перейти во вкладку рисования текстур («Texture Painting»). Объект окрасится в розовый — это стандартный цвет для элементов, на которых еще нет текстуры. На изображении ниже мы привели пошаговую инструкцию для заливки всей модели цветом.

Добавление цветов для текстуры — За основу автор выбрал серый цвет, потому что он будет преобладающим на модели. Автор: Грант Аббит

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

Текстуры на этапе добавления цвета — Пример того, как должны выглядеть текстуры на данном этапе. Автор: Грант Аббит

Добавьте свет и тень

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

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

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

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

Распределение света и теней на текстурах оружия — Пример того, как выглядит свет и тень на топорах, нарисованных в стиле Blizzard. Тон плавно смещается от светлого к темному. Блики интенсивнее в верхней части модели, а тени — в нижней. Автор: Тайсон Мерфи

Рендер материалов

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

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

Рендер различных материалов — Автор: Габс Хега

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

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

Пример визуализации стилизованных материалов. Чтобы запомнить их свойства нужно набивать руку и рисовать стадики. Авторы: Кевин Ли, ZUGZUG Studio, Ани Сейко

Как ограничить рабочую зону

В процессе работы бывает, что нужно сосредоточиться на определенной зоне и не задевать другие. Чтобы сделать маску, которая ограничит рабочую область, нужно удостоверится, что вы находитесь в режиме редактирования («Edit Mode»). Нажмите клавишу «Z», чтобы увидеть каркас модели («Wireframe»). Потом нужно зажать левую кнопку мыши и выделить рамкой область, с которой предстоит поработать.

После этого перейдем в режим рисования текстур («Texture Painting») и снова нажмем «Z». Так мы снова увидим модель с нашими текстурами («Material Preview»). После этого нужно нажать кнопку маски («Paint Mask») рядом с меню выбора режимов. Рабочая область останется неизменной, а вот все остальные станут гораздо светлее.

Поэтапный процесс наложения маски — На скриншотах приведен поэтапный процесс наложения маски. Также можно посмотреть и видео с этим процессом. Автор: Грант Аббит

Сохранение текстур

После того, как вы закончили работу над текстурами, нужно сохранить их в отдельном файле. Для этого нажимаем на кнопку «Изображение» (Image) в левой половине экрана — там в Blender по-умолчанию расположена развертка текстуры. Затем выбираем «Сохранить как» (Save As). В открывшемся окне задаем название файлу и жмем кнопку «Сохранить как изображение» (Save As Image).