Редактирование: Создание предмета с нуля

А давайте попробуем создать какой-нибудь простой предмет совсем-совсем с нуля. Например, банку сгущёнки, её все видели и все понимают, как она выглядит и что с ней делают. Замоделим высоко- и низкополигональные модели, создадим развёртку, запечём карту нормалей (normalmap), нарисуем фототекстуру, обработаем всё это в сталкерском СДК и добавим в игру. 

В этом руководстве используются:
* Maya 2019 и плагин [[X-Ray Maya tools]]
* Photoshop CC
* текстовый редактор с подсветкой синтаксиса, например, [[SciTE]]
* [[:Категория:X-Ray SDK |  и собственно сам сталкерский SDK]]

Майю предварительно нужно настроить так, как описано в [[Maya:_предварительная_настройка | этой статье]].

== Моделирование ==
Нам нужны две модели: одна высокополигональная, очень детализированная; и вторая, без детализации. С первой мы снимем карту нормалей, и запечём её на вторую, низкополигональную модель, которая будет использоваться в игре.

=== Размеры ===
Стандартная банка сгущёнки имеет диаметр 73мм (75мм по буртику) и высоту 80мм. 

Заходим в настройки сцены '''Windows -> Settings/Preferences -> Preferences''', по вкладке '''Settings''' переключаем '''Working Units''' в миллиметры, сохраняем.

=== Высокополигональная (high-poly) модель ===
Создаём примитив типа "цилиндр", задаём ему радиус 36,5мм и высоту 80мм, число разбиений увеличим до 40:

[[Файл:first-item-01.png|640px]]

Это базовая заготовка. Подобный метод создания модели так и называется - моделинг от примитива.

Далее создаём два буртика, расположенных на равных расстояниях друг от друга. Для этого открываем свойства инструмента '''Mesh Tools -> Insert Edge Loop''', включаем режим '''Multiple edge loops''', и задаём количество лупов: '''2'''. 

[[Файл:first-item-02.PNG|480px]]

Кликаем по любому вертикальному ребру цилиндра, получаем две петли. Переключившись на инструмент маштабирования клавишей '''R''', смещаем лупы вертикально.

[[Файл:first-item-03.PNG|480px]]

Далее нужно выделить полигоны будущих буртиков и выдавить их наружу. Для этого нажатием клавиши '''Пробел''' переключаемся на вид сбоку, выделяем нужные полигоны, и применяем к ним операцию '''Edit Mesh -> Extrude''', и доводим буртики манипуляторами инструмента масштабирования до нужного вида:

[[Файл:first-item-04.PNG|640px]]

Тем же методом формируем бурты сверху и снизу:

[[Файл:first-item-05.PNG|640px]]

Некоторые лупы после выдавливания получились мягкими, хотя углы между полигонами в районе 90 градусов. Нужно сразу исправить их, выделив двойным щелчком '''LMB''' и применив операцию '''Shift+RMB -> Soften/Harden Edges -> Harden Edge'''.

[[Файл:first-item-06.PNG|480px]]

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

[[Файл:first-item-07.jpg|640px]]

Сохраняем картинку рядом со сценой, смотрим на её разрешение: 512х512 пикселей. Создаём плоскость размером 512х512мм, назначаем ей новый материал типа lambert ('''RMB - > Assign New Material'''). Материал назначен, но к его файл-ноде не привязана текстура. Чтобы исправить это, жмём '''RMB -> Material Attributes''', и в свитке '''Common Material Attributes''' клацаем по кнопке-шахматке напротив параметра '''Color''':

[[Файл:first-item-08.PNG|480px]]

В открывшемся окошке из списка справа выбираем кнопку '''File'''. Теперь в редакторе атрибутов в свитке '''File Attributes''' в поле '''Image Name''' указываем нашу текстуру. Получается что-то такое:

[[Файл:first-item-09.PNG|640px]]

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

[[Файл:first-item-10.png|640px]]

Смещаем плоскость вниз, чтобы она не перекрывала банку, затем, не снимая выделения, открываем панель '''Channel Box/Layer Editor''' и добавляем её в новый слой, который можно назвать '''''REF'''''. Слою ставим  тип отрисовки '''Reference''' – так он будет отображаться во вьюпорте, но плоскость невозможно будет случайно выделить.

[[Файл:first-item-11.png|480px]]

Наконец-то переходим к созданию рёбер жёсткости. Будем делать их по-старинке, выдавливанием. Для этого в том же виде сверху удаляем полигоны крышки, выбираем рёбра по краям, и, выполняя операцию '''Extrude''', последовательно выдавливаем их по ширине выпуклостей, но не пользуемся манипуляторами Extrude, а каждый раз переключаемся на инструмент масштабирования клавишей '''R'''. Это нужно для того, чтобы рёбра выдавливались в одной плоскости, а не по какой-нибудь дуге.

[[Файл:first-item-12.PNG|640px]]

Оставшееся отверстие закроем операцией '''Shift+RMB -> Fill Hole'''. Затем выберем лупы, расположенные по центру выпуклостей, переключимся в перспективу и сместим выделенные рёбра вверх:

[[Файл:first-item-13.PNG|640px]]

Форма задана, теперь нужно её детализировать, заодно добавив поддерживающие рёбра буртикам. Делается это тем же инструментом '''Insert Edge Loop''' с включенным параметром '''Insert with edge flow'''. Числовое значение этого параметра подбирается экспериментально.

[[Файл:first-item-14.PNG|640px]]

Проконтролировать результат можно нажатием кнопки '''3''', она включит режим сглаженного отображения:

[[Файл:first-item-15.png|640px]]

В этом режиме тоже можно редактировать геометрию.

Итак, верхняя крышка высокополигональной модели полностью готова. Но как быть с нижней крышкой, не моделить же её заново? Удобнее всего продублировать полигоны крышки, воспользовавшись операцией '''Shift+RMB -> Duplicate Faces'''. В результате выделенные полигоны крышки будут продублированы отдельным мешем. Остаётся только отзеркалить его по оси '''Y''' на панельке '''Channel Box''''а; удалить полигоны нижней крышки; операцией '''Shift+RMB -> Combine''' объединить дублированную крышку в один объект с остальной банкой; проверить, совпадают ли вертексы на границе разрезов; подвинуть их, если они не совпадают; и сшить соприкасающиеся вершины операцией '''Shift+RMB -> Merge Vertices'''.
{| style="background-color: #fffdee;" width="100%"
|<span style="color:#172172;">'''Важно!'''</span>
На этом этапе стоит перейти в режим редактирования вершин и проверить, не осталось ли где-то неудалившихся, мусорных вертексов.
|}

[[Файл:first-item-16.png|640px]]

Результат:

[[Файл:first-item-17.PNG|640px]]

Высокополигональная модель закончена, именуем её в '''Outliner'''е как '''''HI_TIN''''' и переходим к низкополигональной модельке.

Сцену на текущей стадии (формат Maya 2019) можно скачать с нашего сервера.

=== Низкополигональная (low-poly) модель ===
Есть два способа получить низкополигональную модель:
* вернуться в прошлое и продублировать заготовку цилиндра на отдельный слой
* продублировать существующую высокополигональную банку и убрать с неё детализацию
В нашем случае удобнее будет убрать детализацию. Для этого:
* нажатием '''Ctrl+D''' дублируем существующую банку и добавляем её на новый слой, который назовём '''''HI_GEO'''''. Этот слой пока скроем, нажав на кнопочку '''V''' в '''Layer Editor''''е, и не будем трогать до тех пор, пока не перейдём к запеканию нормалмап.
* на оставшейся банке при зажатой клавише Shift кликом ЛКМ выделим каждое второе ребро по диаметру и нажмём Ctrl+Del – этим сочетанием клавиш удалятся и рёбра, и вертексы на пересечениях удаляемого ребра со всеми прочими. Так же поступим с поддерживающими рёбрами на буртиках, а крышки вовсе удалим и закроем образовавшиеся дыры операцией Fill Hole.

[[Файл:first-item-18.PNG|640px|слева высокополигональная банка с выделенными под удаление рёбрами, справа - результат удаления ненужных компонентов]]

* Добавим получившуюся низкополигональную банку на новый слой, который назовём LO_GEO.

[[Файл:first-item-19.PNG|320px]]

Низкополигональная модель готова, именуем её в Outliner'е как LO_TIN и переходим к процессу создания её развёртки.

Сцену на текущей стадии (формат Maya 2019) можно скачать с нашего сервера.

=== Создание UV-развёртки для низкополигональной модели ===
Выделяем банку и в основном вьюпорте нажатием Shift+RMB -> Mapping -> Automatic Map накидываем на неё автоматическую развёртку, а в UV Editor'е для большего удобства включаем режим Shaded UV:

[[Файл:first-item-20.PNG|640px]]

Автоматика сделал половину работы за нас, и осталось лишь подправить полученные куски по своему вкусу. Для этого понадобятся лишь два инструмента: Cut и Move and Sew Edges. К ним можно получить доступ в режиме редактирования рёбер, удерживая Shift+RMB.

Сначала сошьём боковину банки в один лоскут:

[[Файл:first-item-21.png|640px]]

Затем разделим буртики на отдельные полигоны, выделив их граничные рёбра:

[[Файл:first-item-22.png|640px]]

После чего двойным кликом выделим по окружности рёбра крышки и выполним Move and Sew:

[[Файл:first-item-23.png|640px]]

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

[[Файл:first-item-24.png|640px]]

Аналогичные манипуляции проделываем и с остальными кусками развёртки:

[[Файл:first-item-25.png|640px]]

{| style="background-color: #fffdee;" width="100%"
|<span style="color:#172172;">'''Подсказка'''</span>
Вовсе необязательно выделять каждое ребро крышки вручную. Можно кликом LMB выбрать все рёбра нужного куска развёртки, а затем при зажатой Ctrl прокликать лупы - с них снимется выделение, и выделенными останутся только нужные рёбра.
|}

К полученным кускам применяем операцию Unfold, чтобы дополнительно разгладить их:

[[Файл:first-item-26.png|640px]]

А затем выполняем операцию Layout UV, чтобы куски получили одинаковый масштаб и равномерно расположились в UV-пространстве от 0 до 1:

[[Файл:first-item-27.png|640px]]

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

На этом создание развёртки можно считать оконченным.

Сцену на текущей стадии (формат Maya 2019) можно скачать с нашего сервера.


== Запекание карты нормалей ==
Суть процедуры: запекалка берёт информацию о положении [[Нормаль|нормалей]] с высокополигональной модели, и сохраняет её в специальную текстурку по UV-координатам низкополигональной модели. В итоге низкополигональная моделька с картой нормалей в игре будет выглядеть почти так же, как высокополигональная, хотя её геометрия нисколько не поменялась.

Вот основные принципы, которые нужно помнить при создании карт нормалей:
* для высокополигональной модели развёртка не нужна вовсе;
* куски развёртки низкополигональной модели не должны накладываться друг на друга;
* развёртку крайне желательно помещать внутри UV-пространства [0,1]

Запекать карту нормалей будем с помощью подключаемой к Майе запекалки под названием '''Turtle'''. Она поставляется в виде расширения (плагина), и её нужно включить вручную в '''Windows -> Settings/Preferences -> Plug-in Manager''':

[[Файл:first-item-28.png|320px]]

Далее открываем редактор слоёв запекалки: '''Windows -> Rendering Editors -> TURTLE -> Bake Layer Editor''':

[[Файл:first-item-29.png|640px]]

В окне редактора есть несколько полей:
* '''Bake Layers''' — список слоёв, которым можно задавать разные настройки. Мы будем работать в слое по умолчанию;
* '''Target Surfaces''' — целевая, т.е. низкополигональная модель;
* '''Source Surfaces''' — высокополигональная модель, с которой будет взята информация о нормалях;
* '''Envelope Surfaces''' — специальная модель, используемая в тех случаях, когда различия между высоко- и низкополигональной моделями слишком велики и карта нормалей запекается с дефектами. В нашем случае не пригодится.

Выделяем низкополигональную модель, и добавляем её в поле '''Target Surfaces''' нажатием кнопки '''Add Selected'''. Высокополигональную модель добавляем в поле '''Source Surfaces'''.
{| style="background-color: #fffdee;" width="100%"
|<span style="color:#172172;">'''Важно!'''</span>
Обеим моделям нужно включить видимость слоёв в '''Layer Editor''' (не том, что в запекалке). Если одна из моделей не будет отображаться во вьюпорте, то карта нормалей не запечётся корректно.
|}

[[Файл:first-item-30.png|768px]]

Закрываем редактор слоёв, открываем окно настроек рендера '''Windows -> Rendering Editors -> Render Settings''', и в ниспадающем списке '''Render Using''' переключаем рендерер на '''Turtle''':

[[Файл:first-item-31.png|320px]]

Ниже переключаемся на вкладку '''TURTLE''' и меняет тип рендера с '''Rendering''' на '''Baking''':

[[Файл:first-item-32.png|320px]]

И переключаемся на вкладку '''Baking''', расположенную ещё ниже. Здесь нужно включить опцию запекания карт нормалей, отметив флажком пункт '''Normal Map''' в свитке '''Outputs -> Shader Outputs''':

[[Файл:first-item-33.png|320px]]

Минимальный набор установок задан, можно нажать на кнопочку '''Render the current frame''' и посмотреть, что получилось:

[[Файл:first-item-34.png|768px]]

Выглядит вполне корректно! Но размерчик маловат. Нужно увеличить размер итоговой текстуры до 2048х2048 пикселей и задать папку (например, ''X:\import''), в которую будет сохранена карта нормалей:

[[Файл:first-item-35.png|320px]]

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

[[Файл:first-item-36.png|640px]]

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

Сцену на текущей стадии (формат Maya 2019) можно скачать с нашего сервера.

== Текстурирование ==
На время отойдем от модели, чтобы создать для неё текстуру.

Рисовать с полного нуля не будем, воспользуемся сканами крышек банки. Но прежде чем лезть в Фотошоп, придётся снова открыть Майю и сохранить снимок развёртки банки в отдельный файл, поверх которого и будем мастрячить диффуз. Для этого открываем '''UV Editor - Edit -> UV Snapshot''' и сохраняем снимок развёртки в отдельный .tga:

[[Файл:first-item-37.png|640px]]

Затем открываем его в Фотошопе, и сразу создаём новый слой нажатием неприметной кнопочки в правом нижнем углу:

[[Файл:first-item-38.png|640px]]

Теперь открываем скан крышки. Нужно каким-то макаром выделить её, чтобы скопировать на предыдущее изображение. К счастью, в новом Фотошопе есть чумовая опция '''Выделение -> Предмет''', которая хитрым нейросетевым образом сама выделит нужный участок изображения:

[[Файл:first-item-39.png|640px]]

Жмём '''Ctrl+C''', чтобы скопировать выделенное. Переключаемся на вкладку со снимком развёртки, жмём '''Ctrl+V''', чтобы вставить скопированное. Далее нажатием '''Ctrl+T''' переходим в режим трансформирования выделенного участка, и с зажатой клавишей '''Shift''' (для пропорционального масштабирования) подгоняем его под контуры развёртки.

Для большего удобства можно поменять масштабирование, удерживая '''Alt''' и вращая колёсико мыши, а на панельке справа настроить прозрачность трансформируемого слоя. Также можно перемещать выделение стрелочками на клавиатуре.

[[Файл:first-item-40.png|640px]]

Боковину, конечно, мы не будем сканировать, а просто возьмём участок жести без засветок (ссылка) и сохраним его как новый узор. Для этого нужно выделить кусок картинки инструментом "Прямоугольное выделение", затем перейти в '''Редактирование -> Определить узор''', и сохранить его.

Полученным узором заполним боковину. Для этого нужно создать новый слой, инструментом прямоугольного выделения выделить нужный участок, выполнить '''ПКМ -> Выполнить заливку''', в настройках инструмента включить '''Содержание: Регулярный''' и в '''Заказной узор...''' выбрать ранее определённый узор:

[[Файл:first-item-41.png]]

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

[[Файл:first-item-42.png|640px]]

Результат:

[[Файл:first-item-43.png|640px]]

На боковине явно заметен тайлинг, но это не беда — мы перекроем её этикеткой, которую сейчас и нарисуем.

=== Этикетка ===
Дизайн этикетки сгущённого молока практически не менялся с советского времени, так что при желании можно создать полностью аутентичную банку. Берём банку сгущёнки (настоящую, не виртуальную), сдираем с неё этикетку, сканируем, и перерисовываем в фотошопе. Можно и не перерисовывать, но зачем нам проблемы с копирайтом? 

Поехали:
* открываем скан, выделяем этикетку прямоугольным выделением, жмём Ctrl+T и выравниваем её
[[Файл:first-item-44.png|640px]]
* выделяем одну секцию и жмём Изображение -> Кадрировать
[[Файл:first-item-45.png|640px]]
* включаем отображение линеек через Изображение -> Линейки
* помещаем линейки по центру и по краям элементов изображения
Поскольку дизайн этикетки горизонтально симметричный, то и обрисовывать будем лишь половину - скажем, левую. Для начала возьмём ромбическую фигуру с основной надписью "Сгущённое молоко". Нажатием клавиши U включаем инструмент '''Линия''', увеличиваем её толщину до 4 пикселей, и последовательно обводим контуры ромба, начиная и заканчивая линии в пересечениях линеек.
[[Файл:first-item-46.png|640px]]
То же самое делаем со всеми остальными элементами этикетки. Процедура не очень быстрая.
@@ Строка 262: / Строка 262: @@
 Поехали:
-* открываем скан, выделяем этикетку прямоугольным выделением, жмём '''Ctrl+T''' и выравниваем её
+* открываем скан, выделяем этикетку прямоугольным выделением, жмём Ctrl+T и выравниваем её
-[[Файл:first-item-44.jpg|640px]]
+[[Файл:first-item-44.png|640px]]
-* выделяем одну секцию и жмём '''Изображение -> Кадрировать'''
+* выделяем одну секцию и жмём Изображение -> Кадрировать
-[[Файл:first-item-45.jpg|320px]]
+[[Файл:first-item-45.png|640px]]
-* включаем отображение направляющих через '''Изображение -> Линейки'''
+* включаем отображение линеек через Изображение -> Линейки
-* помещаем направляющую вертикально по центру изображения, это будет линия симметрии
+* помещаем линейки по центру и по краям элементов изображения
+Поскольку дизайн этикетки горизонтально симметричный, то и обрисовывать будем лишь половину - скажем, левую. Для начала возьмём ромбическую фигуру с основной надписью "Сгущённое молоко". Нажатием клавиши U включаем инструмент '''Линия''', увеличиваем её толщину до 4 пикселей, и последовательно обводим контуры ромба, начиная и заканчивая линии в пересечениях линеек.
-Поверх фонового слоя создаём слой-заливку, который заливаем преобладающим голубым цветом.
-Поскольку дизайн этикетки горизонтально симметричный, то и обрисовывать будем лишь половину - скажем, левую. Для этого переключаемся на инструмет '''Кисть''', берём образец цвета с фонового слоя при зажатой клавише '''Alt''' (режим пипетки), и последовательно обводим контуры на новом слое. Чтобы получить строго вертикальную или горизонтальную линию, нужно удерживать клавишу '''Shift''' и вести кисть в нужном направлении. Чтобы получить косую линию, нужно отметить кистью точку её начала, затем зажать '''Shift''', и клацнуть по точке, где линия должна окончиться - после этого она создастся автоматически. Таким же образом можно создавать непрерывный контур.
-Обрисовку проводим последовательно: сначала белые области, затем фиолетовые и т.д.
 [[Файл:first-item-46.png|640px]]
+То же самое делаем со всеми остальными элементами этикетки. Процедура не очень быстрая.
-После того, как обвели контуры, заливаем их содержимое нужным цветом. Инструменту '''Заливка''' лучше выставить допуск 0, чтобы не создавалась лишняя растушёвка.
-[[Файл:first-item-47.png|640px]]
-Половина этикетки отрисована. Теперь нужно отразить её по горизонтали. Для этого копируем готовую половинку по '''Ctrl+C''', вставляем по '''Ctrl+V''', и отражаем по '''Ctrl+T''' и '''ПКМ -> Отразить по горизонтали'''. Направляющие можно скрыть нажатием '''Ctrl+H'''.
-[[Файл:first-item-48.png|640px]]
-Остаётся создать текст. Образец оформления советской банки можно подсмотреть [https://pikabu.ru/story/sgushchenka_76_goda_4242816 тут.] Из тонких моментов можно отметить разве что подбор похожего шрифта (например, семейства Liberation) и межбуквенного интервала.
-[[Файл:first-item-49.png|640px]]
-Основная работа сделана. Далее нужно расширить холст по горизонтали на 300 процентов ('''Изображение -> Размер холста''') и заполнить его копиями созданного шаблона, и пропечатать тексты поверх них.
-[[Файл:first-item-50.png|640px]]
-Осталось создать эффект бумаги, необязательно старой. Чтобы не усложнять и без того длинный урок, просто возьмем отсканированную бумагу (ссылка) и наложим её поверх этикетки в режиме умножения. Дополнительно можно применить фильтр "Облака". Размывать шрифты, думаю, не стоит - это сделает DXT-сжатие. Результат:
-[[Файл:first-item-51.jpg|640px]]
-Далее возвращаемся к основной текстуре, копипастим на неё этикетку, масштабируем и получаем что-то такое:
-[[Файл:first-item-52.jpg|640px]]
-Открываем модель сгущёнки в Майе, назначаем ей нашу текстуру, и видим вот что:
-[[Файл:first-item-53.jpg|640px]]
-Работа с текстурой окончена, теперь можно продолжить работу с моделью.
-== Скелет и скиннинг ==
-[[Категория:Текстуры]][[Категория:Недописанное]]