Простое и быстрое раскрашивание рёбер 3D модели в стиле hand painted texturing и мультяшного текстурирования

В данной статье рассматривается способ быстрого текстурирования ребер модели по швам островов uv развертки в стиле текстур, раскрашенных вручную (hand painted textures, hand painting texturing), а также для стилизации текстур в стиле Borderlands. Окрашивание рёбер белыми линиями, символизирующими, например, отражение света в hand-painted текстурировании, либо по которым пройдут темные линии, использующиеся в мультипликации для выделения контуров частей тела персонажа, строений и т.д., могут придать 3D модели индивидуальности и законченности.

Хочу сразу оговориться, что данный способ не всегда является оптимальным, поскольку может добавить общее количество дополнительных вершин модели в игровых движках, ведь uv развертка будет содержать заведомо большее количество швов 3D модели и островов развертки, о чем более подробно рассмотрено в статье Продублированные вершины, лишние вершины, разрывы и разрезы в 3D моделях и артефакты на картах нормалей. Однако данный способ рисования контрастных линий на ребрах 3D моделей – их высвечивание или затенение – все равно остается одним из самых быстрых и отлично подходит, как для неорганических 3D моделей (мехов, роботов, зданий, различных конструкций), так и для органических, включая андроидов, гуманоидов, животных и прочую живность. Конечно, нет красивей 3D моделей, затекстуренных вручную,  например, в графических редакторах, таких как GIMP, Adobe Photoshop и т.д. или в приложениях, специально разработанных для текстурирования 3D моделей, например, Substance Painter от Allegorithmic, DDO Painter из набора Quixel SUITE 2 и других.

В данной статье я буду использовать 3D модель колонны, которую вместе с текстурами вы можете найти в конце статьи. В качестве 3D редактора был выбран Blender за его бесплатность и удобство работы через «горячие клавиши», однако данная техника текстурирования работает в любом другом редакторе трехмерных моделей, например, 3dsMax, Cinema4D или любой другой редактор, к которому вы привыкли. 3D редактор в данном конкретном случае нужен для того, чтобы создать uv развертку модели определенным способом, так что вместо 3D редактора вы можете использовать специализированные инструменты для создания развертки, такие как UVLayout, Unfold 3d и т.д., а можете использовать плагины для популярных 3D редакторов, к которым (плагинам) можно отнести UV Master для ZBrush от Pixologic, Ptex от Walt Disney Animation Studios и другие.

На рисунке показана 3D модель столба до раскрашивания рёбер.
На рисунке показана 3D модель столба до раскрашивания рёбер.

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

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

 

Редактор uv развёртки и изображения. Создание изображения для uv пространства/uv плоскости

UV развертка в Blender’ отображается в отдельном окне редактора развёртки и изображения. Чтобы открыть редактор uv/изображения вместо одного из окон 3D вида, выберите под одним из окон 3D вида самую левую иконку с кубиком в изометрии, и в открывшемся меню типа редактора Editor Type выберите вкладку UV/Image Editor.

На рисунке показано меню Editor Type с выбранным пунктом UV/Image Editor для отображения окна редактора развертки и изображения.
На рисунке показано меню Editor Type с выбранным пунктом UV/Image Editor для отображения окна редактора развертки и изображения.

Создайте новое изображение для текстуры и uv развертки, задав ей размер вашей будущей или имеющейся текстуры, например, 512×512 пикселей.

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

Размер текстуры (разрешение изображения) определяется сложностью и количеством деталей вашей 3D модели, количеством элементов развертки, размером самого маленького значимого острова uv развертки и, самое главное, желаемым качеством рендера. Без создания изображения размер uv пространства будет определен в 1024×1024 пикселей. Также без такого изображения вы не сможете запекать текстуры материалов, карты нормалей, ambient occlusion и другие карты для 3D модели, включая диффузную карту, созданную путем запекания текстур, созданных в Cycles. О запекании текстуры Cycles в диффузную карту будет рассказано в отдельной ///статье.

 

Создаем авторазвертку

Для того чтобы создать авторазвертку 3D модели, перейдите в режим редактирования меша, для чего выберите 3D модель Правой Кнопкой Мыши и нажмите клавишу ‘TAB‘. Горячие клавиши в Blender работают для того окна, в котором находится курсор мыши. Теперь выберите все вершины меша вашей 3D модели (или всех составных мешей), нажав клавишу ‘A‘. Чтобы создать uv развертку в зависимости от выбранных параметров (авторазвертку), нажмите клавишу ‘U‘ и в открывшемся меню uv преобразования «UV Mapping» выберите вкладку «Smart UV Project«. Выставьте параметры, которые позволят вам создать uv развертку так, чтобы швы развёртки проходили по максимальному количеству ребер, которые вы хотите окрасить. В случае с используемой колонной такими параметрами являются:

— лимит угла Angle Limit в этот раз не трогаем и оставляем по умолчанию 66.00;

Area Weight – тоже не трогаем;

— а вот параметру Island Margin, отвечающему за отступы между создаваемыми островами uv развертки выставим значения в 0.05, чего для изображения в 512х512 пикселей вполне достаточно. Для изображений с другими размерами значение для данного параметра может отличаться.

На рисунке показано меню создания авторазвертки с подменю параметров.
На рисунке показано меню создания авторазвертки с подменю параметров.

Если вы создали развертку, и вас не устроили какие-либо из ее параметров, вы можете нажать клавишу ‘F6’, чтобы открыть меню настроек последней выполненной операции. В это меню, в данном случае “Smart UV project”, вы можете изменять параметры создания авторазвертки, изменения в которой будут немедленно отражаться на уже созданной uv развертке.

В отличие от процесса ручного создания uv развертки, после автоматического создания развертки ребра на 3D модели не маркируются в качестве швов (красным цветом). Чтобы посмотреть, по каким ребрам прошли швы развертки (а заодно и промаркировать ребра развертки в качестве швов), вы можете выбрать создание швов на 3D модели на основании островов uv развертки, если откроете меню развертки, выбрав “UVs под окном редактора развертки, в котором выберете вкладку “Seams from Islands”.

На рисунке показано меню развертки с выбранной вкладкой “Seams from Islands”, позволяющей маркировать ребра на 3D модели в качестве швов Uv развертки.
На рисунке показано меню развертки с выбранной вкладкой “Seams from Islands”, позволяющей маркировать ребра на 3D модели в качестве швов Uv развертки.

 

Создание uv развёртки вручную

Если вы, как и я, предпочитаете создание uv развёртки вручную, а не автоматически, то этот раздел — для вас. Те же, кто создал uv развертку автоматически, данный раздел могут пропустить. В некоторых случаях, особенно в случаях с органическими моделями, авторазвертка может и не обеспечить желаемого результата в создании островов развертки.
Итак, выделите ребра 3D модели, которые в дальнейшем будут окрашены в задуманный вами цвет. Чтобы в Blender’е выделить необходимые ребра, для начала, выберите модель Правой Кнопкой Мыши и перейдите в режим редактирования меша (клавиша ‘TAB‘). Для удобства выделения ребра меша, перейдите в режим выделения рёбер меша, для чего нажмите сочетание клавиш Alt+TAB и выберите в открывшемся меню режима выбора меша “Mesh Select Mode” вкладку «Edge«. Чтобы выделить ребро меша, щелкните на нем Правой Кнопкой Мыши. Чтобы добавить другое ребро к уже выбранному ребру, нажмите и удерживайте клавишу ‘Shift‘ и щелкните Правой Кнопкой Мыши на ребре, которое хотите добавить. Клавиша ‘Shift‘ работает как для элементов меша (вершин, ребер, полигонов) так и для объектов (в режиме объекта, соответственно). Если вы хотите добавить сразу несколько рёбер/вершин/полигонов, принадлежащих одной петле/контуру, зажмите клавишу ‘Alt’ и щелкните на одном из ребер Правой Кнопкой Мыши. Клавиша ‘Shift‘ работает и здесь, т.е. комбинация клавиш для добавления «петельных» рёбер будет выглядеть как Shift+Alt+ПКМ (Правая Кнопка Мыши).

Как было сказано выше, клавиша ‘Alt’ в сочетании с Правой Кнопкой Мыши позволяет выделять не одно ребро, а сразу несколько рёбер, являющихся продолжением друг друга, т.е. выделяются ребра, принадлежащие одной петле (loop), не важно, замкнута эта петля или нет. Данный способ выделения подходит и для четырехугольных полигонов, но не для треугольных, пятиугольных и т.д. полигонов, поскольку алгоритм выделения ориентируется на противолежащие ребра полигонов.

На рисунке показаны выбранные полигоны 3D модели в режиме редактирования поверхностей меша с использованием выделения loop.
На рисунке показаны выбранные полигоны 3D модели в режиме редактирования поверхностей меша с использованием выделения loop.

 

Более подробно про выделение полигонов, вершин и ребер (и не только про это) вы можете прочитать в руководстве пользователя Blender.
Хочу обратить ваше внимание, что не обязательно выбирать сразу все ребра, которые хотите отметить в качестве швов. Можно отмечать и маркировать их в качестве швов по частям.
Ребра модели также можно выделить, если выбрать все принадлежащие им вершины Правой Кнопкой Мыши в режиме выделения вершин меша.

Чтобы отметить выделенные ребра в качестве швов, нажмите сочетание клавиш Ctrl+E и в открывшемся меню рёбер «Edges» выберите вкладку «Mark Seam«. Отмеченные в качестве швов ребра будут выделены красным.

Теперь выберите весь меш своей модели (или все меши, если модель состоит из нескольких мешей), находясь в режиме редактирования, нажав клавишу ‘A‘ один или несколько раз, пока все ребра и вершины модели не будут выделены желтым. Более подробно про монолитные и составные модели вы можете почитать в статье Артефакты при импорте 3D моделей в игровые движки из 3D редакторов на примере Unity и Blender’а. После того, как вы выделите все составные элементы меша/мешей своей модели, нажмите клавишу ‘U‘ и в открывшемся меню uv преобразования UV mapping выберите пункт “Unwrap” или нажмите клавишу ‘U‘ еще раз, чтобы создать для выбранных плоскостей uv развертку, которая отобразится в окне редактирования развёртки/изображения.

На рисунке показано меню маркирования ребер в качестве швов и 3D модель с уже отмеченными рёбрами в качестве швов. На рисунке также показано меню uv преобразования, а также uv развертка, созданная в соответствии с промаркированными ребрами в качестве швов.
На рисунке показано меню маркирования ребер в качестве швов и 3D модель с уже отмеченными рёбрами в качестве швов. На рисунке также показано меню uv преобразования, а также uv развертка, созданная в соответствии с промаркированными ребрами в качестве швов.

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

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

Обратите внимание, что переключение между отображением углового напряжения и напряжения по областям осуществляется в информационной панели инструментов (горячая клавиша — ‘N’) во вкладке “Display” кнопками “Angle” и “Area”, соответственно.

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

Наличие разряжений, как и напряжений, грозит артефактами отображения текстуры на 3D модели: где есть разряжения – текстура будет растянута, где есть напряжения — сжата.

На рисунке показан цилиндр со всеми отмеченными необходимыми ребрами в качестве швов: все области развертки окрашены синим, в обоих режимах.
На рисунке показан цилиндр со всеми отмеченными необходимыми ребрами в качестве швов: все области развертки окрашены синим, в обоих режимах.

Итак, как только вы создадите развертку своей 3D модели, необходимо будет экспортировать ее (развертку).

Выберите расположенный под окном редактирования развертки пункт меню UVs и в открывшемся меню выберите “Export UV Layout“, после чего в диалоге сохранения файла введите название файла для uv развертки, например, “pillaruv.png”, и выберите папку, в которую хотите ее сохранить.

В зависимости от режима редактирования развёртки (включен ли синхронный режим редактирования uv или нет) для экспорта uv развёртки вам может потребоваться выбрать все ее вершины в редакторе развертки перед тем, как выполнить экспорт.

На рисунке показано меню экспорта UV развертки.
На рисунке показано меню экспорта UV развертки.

Не забудьте экспортировать и саму 3D модель.

 

Раскрасили ребра модели черным и белым, научили ругаться

Теперь давайте приступим непосредственно к разукрашиваанию рёбер. Откройте в графическом редакторе (GIMP, Photoshop или любом другом) файл с вашей uv-разверткой. Я буду описывать процесс в русифицированном GIMP’е. Скопируйте 6-7 раз слой с разверткой и объедините слои-копии и оригинальный слой с Uv разверткой в один, чтобы развертка приняла более насыщенный вид, и вы могли выделить острова развертки, а не только черные линии. Измените имя объединенного слоя на “UVLayer”.
Импортируйте новым слоем текстуру 3D модели, например, текстуру камня из магазина ассетов, назовите слой с текстурой “MainTexture” и поместите ее под слоем «UVLayer«.

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

Как самому создать такую текстуру и карту нормалей к ней, будет рассказано в отдельной ///статье.

Теперь создайте еще один новый слой (Ctrl+Shift+N), на котором мы будем рисовать линии, назовите его, например “Lines”, и разместите поверх всех слоев. Сделайте слой  «Lines» активным, щелкнув на его названии Левой Кнопкой Мыши. Теперь выделите элементы развертки по контуру, в нажмите и удерживайте клавишу ‘Alt‘ и щелкните Левой Кнопкой Мыши на миниатюре слоя «UVLayer«.

На рисунке показано окно редактора GIMP с тремя слоями: текстуры, развертки и слоя на котором будет создана обводка, выделенного контура.
На рисунке показано окно редактора GIMP с тремя слоями: текстуры, развертки и слоя на котором будет создана обводка, выделенного контура.

Выберите кисть и шаблон кисти: щелкните Левой Кнопкой Мыши на иконке кисти и установите размер кисти при помощи клавиш ‘{‘ и ‘}’. Выберите желаемый цвет кисти, в который хотите покрасить ребра модели, например черный. Теперь на активном слое «Lines«необходимо обвести линией с заданной толщиной, цветом и рисунком кисти выбранный ранее контур. Чтобы нарисовать линию поверх выделенного контура (по сути, обвести выделенный контур) выберите в главном меню вкладку «Правка«, которое открывает выпадающее меню, в котором выберите пункт “Обвести выделенное”, чтобы открыть окно “Стиль обведения области”. В открывшемся меню выберите “Обвести рисующим инструментом”, затем выберите рисунок/шаблон кисти (на самом деле, это можно сделать в любой момент) и подтвердите обводку, нажав кнопку “Обвести ”.

На рисунке показана получившаяся текстура.
На рисунке показана получившаяся текстура.

Можно оставить обводку как есть, а можно добавить размытие и смещение/рябь к получившейся обводке. Можно также поработать ластиком с рваным шаблоном/рисунком кисти и различной прозрачностью. Данные операции отнимут меньше времени и сил, если для редактирования и создания текстур использовать графический планшет, например, Wacom. Графический планшет станет вам незаменимым помощником не только в графических приложениях, но и в 3D редакторах (например для скульптинга), а потом и вовсе заменит мышь.

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

Показанная на рисунке текстура, получается при использовании двух текстур обводки (белая обводка – в одном слое, черная – в другом), где на одном слое обводки удаляем ненужные линии, например, удаляем черные линии в тех областях развертки, где мы не хотим их видеть. Другими словами, оставляем белые линии только для ребер, которые должны отражать свет, черные линии оставим для затемненных и загрязненных участков модели.

На рисунке в Blender выделены ребра, которые окрашены на текстуре темным цветом.
На рисунке в Blender выделены ребра, которые окрашены на текстуре темным цветом.

Теперь текстура готова и осталось лишь отключить видимость всех слоев кроме слоя “UVLayer” и “MainTexture” и экспортировать ее в файл в формате, скажем, png или tiff.

 

Используем 3D модель и текстуру в Unity3D

Импортируйте текстуру в Unity3D, перетащив ее из папки Windows в одну из подпапок папки Assets, и добавьте в слот Albedo меню настроек материала. Карту нормалей из архива добавьте в слот Normal Map.

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

Для раскрашенных описанным способом 3D моделей, ребра которых выделены черными и/или белыми линиями, отлично подойдет toon-шейдером (cartoon shader,мультяшные шейдеры). Один из таких бесплатных шейдеров, который позволяет выделять контуры игрового объекта целиком и его составных частей, представлен в магазине ассетов Unity3D под названием “Toon Shader Free”.

На рисунке показана затекстуренная описанным в статье методом 3D модель с примененным toon-шейдером.
На рисунке показана затекстуренная описанным в статье методом 3D модель с примененным toon-шейдером.
Dreadnought Warhammer 40000
Dreadnought Warhammer 40000
Dreadnought Warhammer 40k
Dreadnought Warhammer 40k
Dreadnought Warhammer 40,000
Dreadnought Warhammer 40,000

 

Скачать архив с 3D моделью ангара в формате blend, fbx и текстуры pillarwithtextures.zip (1854 downloads)

 

Автор: Максим Голдобин
goldmaxval@gmail.com

Добавить комментарий