Pixel Art

SteelJoe

В качестве основы взял своё собственное фото и оживил его.

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

Для создания 3д моделей я пользуюсь 2 программами: Aseprite + Blender3d

Первая - Удобный инструмент для пиксель арта

Вторая - популярный 3д-редактор в открытом доступе, который я использую в сочетании с плагином Texel Density.

Сегодня я буду показывать пример текстурирования на неокрашенной модели будущего телепортера:

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

Для созданного материала вы можете внутри блендера настраивать много разных настроек, например:

Base Color - Цвет

Metallic - Металличность

Specular - яркость бликов

Roughness - Шероховатость\матовость

Emission - цвет свечения

Emission Strength - сила свечения

Но честно говоря, это не имеет смысла, если вы собираетесь экспортировать модельки в анрил или юнити. В этом случае имеет смысл только один параметр - Цвет

Вы можете либо выбрать какой-то конкретный цвет, либо переключить тип цвета на image texture, выбрав файл со своего компьютера

Конкретно у меня уже создан материал с подключенной вот такой картинкой.

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

Когда мы подключим материал к нашей модельке, мы получим примерно такой результат:

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

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

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

Но, не всегда геометрия нашей модели соответствуют ее UV-координатам на текстуре.

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

Самый банальный способ изменения UV - это перетаскивание отдельных полигонов на UV-карте. Но, это процесс болезненный, медленный и неэффективный.

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

Я распишу принципы некоторых алгоритмов.

Самый контролируемый и точный в работе является простой алгоритм Unwrap. Он по факту является функцией для ручного развертывания. Возьмем для примера вот эту деталь:

Как можно видеть, развертка этой дуги скомкана впринципе в одну точку, в один пиксель. Именно поэтому она выглядит, словно ее залили темным цветом полностью. Если мы выделим всю нашу модель и попробуем нажать Unwrap, у нас ничего не получится. Blender выдаст ошибку:

Unwrap failed to solve 1 of 1 island(s), edge seams may need to be added.

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

Если все швы указать правильно, то наша текстура развернется на плоскость, как разрезанная в некоторых местах картонная коробка

Для того, что бы добавить шов, необходимо выделить определенные ребра, и тыкнуть Mark Seam. Clear Seam - логично, удаляет швы с выделенных граней.

Для примера я указал швы в следующих местах, попробуем теперь развернуть при помощи Unwrap

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

Здесь развертка исказилась, что выражается в деформированной текстуре на модели. Это произошло, потому что не хватает еще пары швов, вот тут:

Без них, ровно развернуть нашу модель Bledner не смог, и он решил эту проблему искажением UV развертки. Добавленные 2 шва исправили эту проблему, и теперь развертка выглядит так:

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

Cube Projection. Принцип работы следующий - Алгоритм создает "куб" из выбранного материала, размер которого определяется размером выделенной области. После чего проецирует текстуру с этого куба на те грани, которые смотрят наружу.

Как видим, текстура на нашей детали стала куда красивее - больше никаких искажений Давайте посмотрим на ее UV развертку.

Алгоритмы Cylinder Projection и Sphere Projection работают по такому же принципу, но проекцируют текстуру на модель не кубом, а цилиндром и сферой соответственно. Это бывает полезно, когда вы делаете округлые модели, но моя максимально угловатая, и мне эти алгоритмы не подходят.

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

Сейчас же перед нами стоит следующая задача - превратить нашу красиво развернутую модель в красиво развернутую модель, но с pixel-perfect-ом. Тут стандартные фукнкции Блендера разводят руками, не предоставляя необходимомо инструментария, и нам нужно воспользоваться тем самым аддоном Texel Density.

Что бы воспользоваться аддоном, нужно в его настройках ввести размеры нашей текстуры (у меня это 160 на 160 пикселей), каким-то шаманским методом рассчитать TD (каюсь, я искал нужное значение методом тыка), и после этого нажатие на кнопку Set My TD масштабирует развертку выделенных граней до необходимого значения.

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

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

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

Несколько советов:

1)Вы можете в окне UV-развертки включить функцию прилипания точек к пикселям - это упростит работу.

2)Вы можете настроить сетку своего 3д-вида так, что бы она соответствовала 1 пикселю. И так же при моделировании работать с большей точностью

3)Если вы ошиблись, и ваша точка слетела с сетки - вы можете выделить ее и горячими клавишами Shift-S открыть круговое меню, где выбрать "Snap to Pixel/Grid"

Теперь мы можем залить всю нашу модель сплошным цветом через режим раскраски в блендере.

И потом открываем наше изображение в любом 2д-редакторе. Фотошоп, Gimp, я например использую Aseprite. И ориентируясь на залитые контуры на нашей текстуре, включаем все свои графические способности, что бы получить конфетку.

Основной движ и больше инфы о моем проекте можно найти здесь:
https://vk.com/crystallpunk