Создание 3D модели sci-fi плитки пола в Blender. Превращаем 3D модель в sci-fi текстуру через запекание карт. Создание текстуры сетки для забора или пола для Unity3D.

Создание 3D модели sci-fi плитки пола в Blender. Превращаем 3D модель в sci-fi текстуру через запекание карт. Создание текстуры сетки для забора или пола для Unity3D.

Данная статья посвящена созданию 3D модели sci-fi пола и сетки в Blender с последующим запеканием карт нормалей, карт освещения/затенения и карты высот/карты смещения на плоскость с целью создания sci-fi текстуры для дальнейшего использования в игровых движках на примере Unity3D, хотя созданная текстура подойдет и для таких движков, как Unreal Engine, CRYENGINE, NeoAxis 3D Engine, Amazon Lumberyard — Free AAA Game Engine и других.

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

Получая пожертвования автор сайта уделяет меньше времени на сон и больше — на написание уроков и статей :). Спасибо! 

Загрузите Blender и удалите все существующие на нем объекты (камеру свет, дефолтный куб), нажав клавишу ‘A’, чтобы выбрать все существующие на сцене объекты, и нажмите клавишу ‘X’, чтобы удалить выбранные объекты и подтвердите удаление, выбрав пункт “Delete” в открывшемся меню удаления выбранного объекта.

Горячие клавиши в Blender работают только для того окна/меню, в котором находится курсор мыши, так что если вы хотите совершить какое-то действие, связанное с 3D объектом, курсор должен находиться в окне 3D вида (темно-серая область, поделенная светло-серой сеткой). Именно в месте нахождения курсора мыши и откроется меню подтверждения удаления объекта.

Не стоит путать курсор мыши и 3D курсор. 3D курсор в Blender стилизован под прицел и его позиция задается Левой Кнопкой Мыши (щелчком Левой Кнопкой мыши в одном из окон 3D вида). Одной из особенностью Blender является то, что все 3D объекты создаются именно в позиции 3D курсора.

На рисунке показана сцена в Blender, выбранные клавишей ‘A’ объекты и меню подтверждения удаления объектов. (delete selected object in blender)
На рисунке показана сцена в Blender, выбранные клавишей ‘A’ объекты и меню подтверждения удаления объектов.

После того как вы удалили все объекты на сцене, выставьте 3D курсор в центр сцены, для чего нажмите сочетание клавиш Shift+C. Данное сочетание клавиш не только устанавливает 3D курсор в Blender в центр сцены, но и центрирует вид в окне 3D вида, в котором в находился курсор мыши в момент нажатия данного сочетания клавиш.

Теперь создайте плоскость, нажав сочетание клавиш Shift+A и в открывшемся меню добавления объекта “Add” на сцену выберите пункт “Mesh”, в котором, в свою очередь, выберите подпункт “Plane”.

На рисунке показано подменю создания плоскости в меню создания объектов, и уже созданная плоскость. (create plane in blender)
На рисунке показано подменю создания плоскости в меню создания объектов, и уже созданная плоскость.

Выберите плоскость Правой Кнопкой Мыши и нажмите клавишу ‘Tab’, чтобы перейти в режим редактирования объекта/меша. Нажмите сочетание клавиш Ctrl+Tab, чтобы выбрать режим редактирования меша/объекта в соответствующем меню “Mesh Select Mode”. По умолчанию в качестве элементов манипулирования мешем выставлены вершины (Vertex). Давайте выберем режим редактирования полигонов/поверхностей меша (Face), для чего выберите соответствующий пункт в меню.

На рисунке показано меню выбора режима редактирования меша “Mesh Select Mode” с выбранным пунктом редактирования вершин/Vertex (слева) и с выбранным пунктом редактирования поверхностей/полигонов меша Face (справа). (select mesh mode in blender)
На рисунке показано меню выбора режима редактирования меша “Mesh Select Mode” с выбранным пунктом редактирования вершин/Vertex (слева) и с выбранным пунктом редактирования поверхностей/полигонов меша Face (справа).

Не снимая выделения с выбранной плоскости (если успели снять выделение, то нажмите клавишу ‘A’, чтобы выделить плоскость, либо воспользуйтесь инструментом прямоугольного выделения, который вызывается по нажатию клавиши ‘B’), нажмите клавишу ‘W’, чтобы открыть меню “Specials”, и выберите вкладку “Subdivide”, чтобы разделить выбранную плоскость на четыре части, в данном случае – четыре квадрата.

На рисунке показано меню “Specials” с выбранным пунктом подразделения выбранных элементов меша “Subdivide” со стандартными параметрами подразделения ,в данном случае, плоскости. (blender menu specials subdivide)
На рисунке показано меню “Specials” с выбранным пунктом подразделения выбранных элементов меша “Subdivide” со стандартными параметрами подразделения, в данном случае, плоскости.

Четырех квадратов для поставленной перед нами задачи по созданию sci-fi пола нам явно маловато, так что давайте увеличим их количество, например, до 20 по горизонтали и 20 по вертикали. Для этого в Панели инструментов (Сервисной панели) в подменю последней операции, а в данном случае –операции подразделения “Subdivide”, выставьте “19” для параметра “Number of Cuts”, отвечающего за количество секущих, делящих наш объект (по вертикали и горизонтали).  Панель инструментов вы можете открыть, если нажмете горячую клавишу ‘T’, либо если “потянете” за “плюсик” в верхней левой части одного из окон 3D вида.

На рисунке показана Панель инструментов и вариант ее отображения на экране, а также выделена вкладка последней операции “Subdivide” с установленным количеством секущих в “19” для параметра “Number of Cuts”. (blender subdivide properties)
На рисунке показана Панель инструментов и вариант ее отображения на экране, а также выделена вкладка последней операции “Subdivide” с установленным количеством секущих в “19” для параметра “Number of Cuts”.

Теперь, не снимая выделения с выбранных полигонов (нашей поделенной плоскости на 400 квадратиков) нажмите клавишу ‘I’ дважды и немного переместите мышь, чтобы внутри вашего “квадратика” образовался “квадратик” чуть меньшей площади (с немного меньшей стороной).

На рисунке показаны вставленные полигоны внутрь выбранных посредством инструмента “Inset faces”. Также в левой части рисунка показана Панель инструментом с выбранной опцией применения модификатора к индивидуальному элементу среди всех выбранных элементов меша. Зеленым также отмечено необходимое нам значение для Толщины/Thickness.( inset faces blender)
На рисунке показаны вставленные полигоны внутрь выбранных посредством инструмента “Inset faces”. Также в левой части рисунка показана Панель инструментом с выбранной опцией применения модификатора к индивидуальному элементу среди всех выбранных элементов меша. Зеленым также отмечено необходимое нам значение для Толщины/Thickness.

Клавиша ‘I’ активирует инструмент вставки поверхностей “Inset Faces”. Повторное нажатие клавиши ‘I’ позволяет применить данный инструмент к отдельно взятому элементу меша среди выбранных, например, полигону, как в нашем случае. В Панели инструментов слева, данный параметр может быть включен или отключен путем проставления флага (галочки) напротив опции “Individual”. Если у вас не получился “рисунок” как показано на изображении выше, просто выставьте значение толщины “окантовки” внутренних полигонов равным 0.01, как показано на том же рисунке выше. За толщину этой самой “каймы” вокруг вложенных полигонов отвечает параметр “ Thickness”.

Теперь не снимая выделения с внутренних квадратов/полигонов, нажмите клавишу ‘G’, чтобы активировать инструмент перемещения выбранных объектов (в данном случае, элементов меша — полигонов) и нажмите клавишу ‘Z’, которая ограничит перемещение выбранных полигонов по оси z. Переместите мышь немного вниз и нажмите Правую Кнопку Мыши, чтобы  подтвердить перемещение полигонов. Ограничение по оси z (Constraint Axis) вы также можете выставить после выполнения операции перемещения в Панели инструментов слева, а также там задать величину, на которую хотите переместить выбранные полигоны и их вершины вместе с ребрами.

На рисунке показаны перемещенные выбранные полигоны. (move translate polies blender)
На рисунке показаны перемещенные выбранные полигоны.

В Панели инструментов слева выставьте значение, равным -0.01, для оси Z параметра “Vector”, как показано на рисунке выше.

Теперь выберите все элементы вашего sci-fi пола, нажав клавишу ‘A’ дважды (первое нажатие снимает выделение с выбранных полигонов, а второе позволяет выделать все полигоны объекта в режиме редактирования меша), нажмите клавишу ‘G’, затем клавишу ‘Z’ и наберите на клавиатуре “0.01” и нажмите клавишу ‘Enter’, чтобы переместить все выбранные элементы будущего sci-fi пола по оси ‘Z’.

На рисунке показан процесс перемещения элементов меша путем ввода значения для смещения с клавиатуры. (move objects in blender with keyboard)
На рисунке показан процесс перемещения элементов меша путем ввода значения для смещения с клавиатуры.

Последние введенные цифры (с основной, а не с дополнительной цифровой клавиатуры) под одним из окон 3D вида в процессе их ввода. Такой ввод параметров практикуется для многих инструментах Blender, а не только для этого. Если же у вас не получилось задать параметры для инструмента через клавиатуру, вы всегда можете задать или изменить их в Панели инструментов слева. В данном случае за перемещение элементов меша, как и выше, отвечает параметр “Vector (Z)” во вкладке “Translate”.

Данное перемещение всех элементов меша нам потребовалось для последующего верного запекания карты нормалей (normal map), карты смещения/карты высот (displacement map/height map) и карты затенения/освещения (ambient occlusion map). Чтобы данные карты правильно запеклись, необходимо, чтобы нижние вершины внутренних квадратов нашего пола совпадали с центром сцены.

Итак бесшовный sci-fi пол готов и насчитывает 2000 треугольников. Слишком расточительно для одной плитки пола, размером 2 на 2 метра, не правда ли? Представьте, что ваш уровень насчитывает 100 таких плиток… 200 тысяч полигонов только на пол. А ведь есть еще и стены и 3D модели окружения (дома, различные конструкции), а персонажи? В играх персонажи, как игровые персонажи, так и неигровые персонажи (NPC от агл. Non-Player Character) стараются делать как можно более качественными. Здесь не обойдешься одной сотней или тысячей полигонов.

Что же делать? Сделать из 3D модели набор карт, имитирующих эту самую 3D модель. Различные карты уже не раз упоминались на страницах данного сайта, например, в серии статей Создание карты нормалей (normal map), карты смещения (displacement map), карты затенения/освещения (ambient occlusion map), самоовещенной карты нормалей и карты отражений/блеска (specular map) из текстуры или карты высот (heightmap) для игровых движков на примере Unity3D.

Для конкретного случая нам потребуются карта нормалей, карты высот и карта освещения/затенения. Для того чтобы создать все эти карты необходимо создать плоскость, на которую мы будем запекать данные карты. Выйдете из режима редактирования меша, нажав клавишу ‘Tab’. Установите 3D курсор  в центр сцены, для чего нажмите сочетание клавиш Shift+S, чтобы открыть меню Привязки “Snap”, в котором выберите вкладку “Cursor to Center”.

На рисунке показано меню привязки “Snap” с выбранной вкладкой установки 3D курсора в центр сцены Blender (Cursor to Center). (cursor to cender in blender 3d)
На рисунке показано меню привязки “Snap” с выбранной вкладкой установки 3D курсора в центр сцены Blender (Cursor to Center).

Теперь создайте плоскость, как вы это сделали в самом начале статьи (Shift+A -> Mesh -> Plane). В Под одним из окон 3D вида слева внизу выберите иконку куба (сбоку от которого нарисованы стрелочки вверх и вниз) чтобы открыть меню выбора типа редактора “Editor Type”, в котором выберите вкладку “UV/Image Editor”, чтобы показать в одном из окон редактор uv-развертки/изображения.

На рисунке показано меню выбора отображения окна редактора изображения/uv-развертки “UV/Image Editor” (слева) и само окно редактора (справа). (uv image editor in blender 3D)
На рисунке показано меню выбора отображения окна редактора изображения/uv-развертки “UV/Image Editor” (слева) и само окно редактора (справа).

Теперь выберите Правой Кнопкой Мыши созданную плоскость и перейдите в режим редактирования объекта/меша при помощи клавиши ‘Tab’. Выберите плоскость в данном режиме (клавиша ‘A’)и нажмите клавишу ‘U’, чтобы открыть меню создания uv развертки “UV Mapping”, в котором выберите вкладку “Unwrap”, чтобы создать uv развертку выбранной плоскости.

На рисунке показано меню создания uv развертки в Blender для плоскости. (unwrap plane blender)
На рисунке показано меню создания uv развертки в Blender для плоскости.

В меню Панели инструментов слева выставьте “0” (Ноль) для параметра “Margin”, который отвечает за величину отступа между соседними островами uv развертки, а также за отступы от краев uv пространства (на рисунке – область, занятая разверткой плоскости справа внизу). Если выставить значение, отличное от нуля, то запекаемые текстуры потеряют бесшовность и не смогут быть правильно затайлены.

О некоторых типах разверток было рассказано в предыдущих статьях, в частности, в статье Запекаем карты нормалей в текстуру и ленивое текстурирование 3D модели через авторазвертку и запекание текстуры в Blender для игрового движка Unity3D.

Итак, uv развертка для плоскости, на которую мы будем запекать нашу 3D модель, готова. Теперь выйдите из режима редактирования меша (‘Tab’). Выберите Правой Кнопкой Мыши созданный sci-fi пол, теперь нажмите и удерживайте клавишу ‘Shift’ и выберите Правой Кнопкой Мыши плоскость (постарайтесь попасть в край плоскости) так, чтобы 3D модель sci-fi пола окрасилась в оранжевый цвет. Если у вас не получается выделить последовательно сначала 3D модель sci-fi пола, а затем – 3D модель плоскости, то подобное выделение осуществимо и в окне/панели навигации (окне структуры проекта) “Outliner”, расположенное справа вверху. Щелкните (кликните) Левой Кнопкой Мыши сначала по названию (в данном случае — “Plane”) 3D модели sci-fi пола, а затем зажав клавишу ‘Shift ’ – по названию 3D модели плоскости (в данном случае – “Plane.001”).

Переместите курсор мыши поверх одного из окон 3D вида и нажмите клавишу ‘Tab’, чтобы перейти в режим редактирования последнего выбранного (активного) 3D объекта/меша (в данном случае — плоскости). Если вы увидели в окне uv развертки развертку плоскости, значит, вы все сделали верно, и выбрали последовательно сначала sci-fi пол, а затем уже модель плоскости, а не наоборот (или вообще выбрали лишь одну 3D модель).

На рисунке показаны выбранные последовательно высокополигональная 3D модель sci-fi панели пола и плоскость, на которую будет производиться запекание карт. (3d models selected for baking)
На рисунке показаны выбранные последовательно высокополигональная 3D модель sci-fi панели пола и плоскость, на которую будет производиться запекание карт.

Теперь в Окне Свойств/Кнопок (Properties Window) выберите иконку с камерой, символизирующей  Render. Найдите вкладку “Bake” и разверните ее. В открывшейся вкладке запекания измените ржим запекания с “Full Render” на “Normals” и установите флаг (галочку) напротив “Selected to Active”. Режим запекания “Normals” отвечает за запекание карт нормалей, в частности, за запекание тангенциальной карты нормалей (“Tangent” в “Normal Space”). Параметр “Selected to Active” отвечает за запекание карт нормалей с выбранной 3D модели на активную, т.е. в данном случае – позволяет запечь нормали с 3D модели пола на 3D модель плоскости.

На рисунке показано меню запекания в Blender. (bake menu blender)
На рисунке показано меню запекания в Blender.

Если вы сейчас нажмите кнопку запечь, то получите сообщение об ошибке в верхней части окна Blender “No objects or images found to bake to”, в котором Blender сообщает, что им не найдены объекты или изображения, в/на которые можно было бы запечь нормали.

На рисунке показано сообщение об ошибке “No objects or images found to bake to”, в котором Blender сообщает, что им не найдены объекты или изображения, в/на которые можно было бы запечь карты. (no objects or images found to bake to in Blender)
На рисунке показано сообщение об ошибке “No objects or images found to bake to”, в котором Blender сообщает, что им не найдены объекты или изображения, в/на которые можно было бы запечь карты. (no objects or images found to bake to in Blender)

В своих статьях я уже не раз говорил, что для успешного запекания  карт необходимо существование изображения, в которое Blender запекает карты (в данном случае, карту нормалей). Чтобы создать такое изображение, нажмите кнопку “New” с “плюсиком” под окном Редактора UV развертки и в меню создания нового изображения “New Image” введите имя и размер изображения, соответствующего размерам будущих карт. В данном случае нам будет достаточно размера/разрешения в 1024 на 1024 пикселя. А вот при запекании карты высот для террейна (ландшафта) Unity3D потребуется выставить разрешение размером на 1 пиксель больше стандартного по ширине и высоте, т.е. вместо 1024×1024 необходимо будет выставить размер в 1025×1025 пикселей для карты высот из-за особенностей построения террейна в Unity3D, но об этом в одной из следующих статей. Итак, введите в меню “New Image” в поле “Name” название для будущего изображения карты нормалей, например, “sci-fi-floor-maps” (вы всегда сможете изменить название для вашей карты нормалей при ее сохранении). Теперь в полях “Width” и “Height” проставьте значение 1024, если проставлено иное. Нажмите “OK”, чтобы завершить создание изображения.

На рисунке показано меню “New Image” для создания нового изображения для запекания карты нормалей, карты высот/смещения и карты затенения/освещения. (new image for normal map шт blender 3d)
На рисунке показано меню “New Image” для создания нового изображения для запекания карты нормалей, карты высот/смещения и карты затенения/освещения.

Как только вы создадите изображение для запекания карт, то фон uv пространства окрасится в тот цвет, который был выбран в меню “New Image”, по умолчанию – в черный цвет. Зачастую, при создании карты нормалей фот следует устанавливать в нейтральный для карты нормалей цвет (RGB (128,128,128,255), он же (240, 100,50) в HSV и #8080ff в HTML), но не в данном случае, поскольку uv развертка плоскости, на которую будет проводиться запекание карт, занимает все uv-пространство. Более подробно про карты нормалей вы можете ознакомиться в статье Часть 4. Теория карт нормалей серии статей Создание карты нормалей (normal map), карты смещения (displacement map), карты затенения/освещения (ambient occlusion map), самоовещенной карты нормалей и карты отражений/блеска (specular map) из текстуры или карты высот (heightmap) для игровых движков на примере Unity3D.

Теперь вы смело можете нажать кнопку “Bake”, чтобы запечь карту нормалей с одной 3D модели на другую.

На рисунке показана запеченная карта нормалей для будущей sci-fi панели и меню “Image” с выбранной вкладкой “Save as Image” для сохранения карты нормалей в Blender. (baked normap map in Blender 3d)
На рисунке показана запеченная карта нормалей для будущей sci-fi панели и меню “Image” с выбранной вкладкой “Save as Image” для сохранения карты нормалей в Blender.

Сохраните получившуюся карту нормалей, нажав кнопку “Image” меню, расположенном под окном редактора uv развертки, и выбрав в нем вкладку сохранения в качестве изображения “Save as Image” как показано на рисунке выше (левая нижняя часть изображения). Помните, что если вы не сохраните запеченную карту, то Blender сам не сохранит ее, так что после повторного открытия сохраненной сцены (файла .blend), вы не обнаружите своих запеченных карт. В открывшемся меню сохранения изображения сохраните карту нормалей, как “sci-fi-floor-maps-normal-map”, предварительно выбрав папку/директорию, в которую желаете сохранить свой файл с картой нормалей. Я обычно храню файлы карт вместе с файлом сцены .blend. Не забывайте сохранять файл сцены, поскольку, хотя в Blender и есть функция автосохранения, Blender не сохранит и не восстановит ВСЕ ваши последние изменения, сделанные на сцене. Ну, как и многие программы, включая, MS Word. 🙂

На рисунке показано меню сохранения изображения Редактора UV/изображения. В данном случае – карты нормалей. (save menu blender 3D)
На рисунке показано меню сохранения изображения Редактора UV/изображения. В данном случае – карты нормалей.

Теперь давайте запечем карту смещения. В Blender Данная карта называется картой смещения, в то время как в Unity3D она называется картой высот. Вы можете создать еще одно изображение для карты смещения/высот через меню создания нового изображения (плюсик справа от названия текущего изображения и правее иконки с буквой “F”) либо запечь карту смещений поверх существующего изображения, переписав его. Я выберу второй вариант и буду использовать уже созданное изображение, только потом сохраню запеченную карту высот в файл под другим именем.

Измените режим запекания “Render Mode”, выбрав запекание карты высот/смещения “Displacement” вместо запекания нормалей “Normals”, как вы делали это раньше для карт нормалей.

На рисунке показан процесс выбора режима запекания карты смещения/высот в Blender. (displacement map)
На рисунке показан процесс выбора режима запекания карты смещения/высот в Blender.

Поставьте флаг напротив “Normalized” в меню запекания карты смещения, чтобы получившаяся карта высот/смещения получилась нормализованной. Нажмите кнопку “Bake”, чтобы запечь карту высот/карту смещения.

На рисунке показаны выбранный флаг “Normalized” и запеченная карта высот/смещения в Blender 3D. (displacement map baked normalized blender)
На рисунке показаны выбранный флаг “Normalized” и запеченная карта высот/смещения в Blender 3D.

Сохраните данное изображение, например, под именем “sci-fi-floor-maps-displacement-map.png”.

Теперь давайте запечем карту затенений/освещения, для чего выберем  “Ambient Occlusion” в режиме запекания.

На рисунке показан процесс выбора вкладки меню запекания карты освещения/затенения Ambient Occlusion. (ambient occlusion menu blender)
На рисунке показан процесс выбора вкладки меню запекания карты освещения/затенения Ambient Occlusion.

Не забудьте поставить флаг/галку напротив опции “Normalized” и нажмите кнопку “Bake”, чтобы запечь ambient occlusion map.

На рисунке показана запеченная карта освещения/затенения с параметрами по умолчанию. (baked ambient occlusion default in Blender)
На рисунке показана запеченная карта освещения/затенений с параметрами по умолчанию.

Сохраните данную карту затенений, например, в файле с именем “sci-fi-floor-maps-normilized-ao5”. Эта карта получилась довольно шумная карта осветления/затенений. Давайте это исправим и запечем ambient occlusion map в отличном качестве. Для этого нам придется открыть меню “World” (иконка глобуса или, если вам так будет угодно, Земного Шара) в Окне Свойств/Кнопок (Properties Window), которая расположена на две иконки правее от уже известной вам иконки с камерой (Render). В меню “World” поставьте флаг напротив вкладки “Ambient Occlusion”, чтобы активировать вкладку “Gather”, расположенную чуть ниже. В данной вкладке выставьте значение равным “20” вместо “дефолтных” пяти под параметром “Constant QMC”. Данное значение отвечает за количество лучей, используемых для вычисления освещенности/затененности поверхности.

На рисунке показано “мировое” меню/меню окружения “World” с процессом установки параметром для Ambient Occlusion, а также показана запеченная карта затенений с количеством семплов, равным 20. (ambient occlusion baked 20 samples)
На рисунке показано “мировое” меню/меню окружения “World” с процессом установки параметром для Ambient Occlusion, а также показана запеченная карта затенений с количеством семплов, равным 20.

Вернитесь в меню “Render” и запеките карту Ambient Occlusion, как было показано выше. У вас должна получиться карта затенений (см. рисунок выше), которая будет выглядеть намного чище карты затенений с предустановленными параметрами по умолчанию.

Сохраните данную карту, например, в файл с именем “sci-fi-floor-maps-normilized-ao5.png”.

Теперь запустите Unity 3D и импортируйте в папку Assets все четыре получившиеся у вас карты. Импортировать данные файлы можно путем простого перетаскивания файлов, например, как вы это делаете в инспекторе Windows при перетаскивании файлов из одной папки в другую.

После этого создайте квад в Unity3D. Чтобы это сделать выберите подменю “Quad” вкладки “GameObject” главного меню, как показано на рисунке ниже. Создайте материал и назначьте его созданному кваду либо перетащите текстуру “sci-fi-floor-maps-normilized-ao5 ” на созданный квад, расположенный в окне сцены, либо на его название в панели иерархии “Hierarchy”, чтобы создать материал автоматически. Теперь выберите квад Левой Кнопкой Мыши и разверните меню материала, щелкнув Левой Кнопкой Мыши на стрелочке вправо рядом с изображением материала (сферы) в окне инспектора “Inspector. Переместите карты нормали, высот/смещения в соответствующие слоты, как показано на рисунке ниже. Карту высот/смещения поместите в слот Albedo, она временно заменит нам диффузную карту (еще называемой текстурой или Альбедо).

На рисунке показан процесс создания квада (квадрата) и процесс назначения карт в Unity3D. (create quad, assign maps in unity 3d)
На рисунке показан процесс создания квада (квадрата) и процесс назначения карт в Unity3D.

На рисунке вы можете заметить вторую карту нормалей. Откуда она взялась? Выберите карту “sci-fi-floor-maps-normilized-ao5” Левой Кнопкой Мыши в окне Assets (куда вы импортировали ваши карты) и нажмите сочетание клавиш Ctrl+D, чтобы создать копию данного изображения. В нашем случае копия получит имя “sci-fi-floor-maps-normilized-ao6”, т.е. к имени файла будет прибавлена единичка. Выберите Левой Кнопкой Мыши только что созданную копию текстуры “sci-fi-floor-maps-normilized-ao6” и в окне/панели Инспектора/Inspector в меню настроек импорта текстуры (Import Settings) измените тип изображения с текстуры (Texture) на карту нормалей (Normal Map), затем поставьте флаг напротив параметра “Create from Grayscale” и выставьте уровень шероховатости/выпуклости карты нормалей, равным 0.012. По желанию, можете сменить тип фильтрации (Filtering) с “Sharp” на “Smooth”, но это – на ваше усмотрение. Теперь нажмите кнопку “Apply”, чтобы превратить карту “Ambient Occlusion” в карту нормалей.

На рисунке показан процесс превращения изображения в карту нормалей в Unity3D. (normalmap from texture in unity3d)
На рисунке показан процесс превращения изображения в карту нормалей в Unity3D.

Более подробно о работе с картами нормалей, вы можете прочитать в уже упомянутой серии статей про Создание карт (normal map, displacement map, ambient occlusion mapб specular map) из текстуры или карты высот для Unity3D.

Теперь назначьте получившуюся карту нормалей в слот “Normal Map” вторичных карт “Secondary Maps”, как показано не на последнем, а на предшествующем ему рисунке выше.

Ну вот, в принципе и все… Вы можете выставить значение для Normal Map в меню материала окна Инспектора равным “-1”, чтобы у вас получились выпуклые плитки. Конечно, можно оптимизировать игровой уровень и снизить количество используемых плиток, используя несколько всего несколько плиток бОльшего размера вместо четырех, шести, восьми и так далее плиток, но если перед вами стоит задача сделать разрушаемый пол или обеспечить «проваливаемость» каждой плитки как в пещерах с секретами (взять те же Приключения Индианы Джонса), то в любом случае вам придется делать несколько таких плиток. А если взять 3D платформер, где такие плитки могут использоваться в качестве поднимающихся и опускающихся платформ? В той же игре «Пятнашки» (в 3D или в 2D исполнении) подобные плитки также могут быть использованы, только вместо шаблона сетки нужно будет запечь цифры или фигуры, например, цветов. Можно подобным образом создать костяшки с запеченными текстурами для игры в «Домино«. Применение и использование таких текстур, как вы можете догадаться, ограничивает лишь фантазия.

На рисунке показана затайленная результирующая напольная плитка в фантастическом стиле, у которой параметр для Normal Map изменен на -1, вместо единички, задаваемой картам нормалей по умолчанию. (tiled seamless sci-fi texture unity 3d)
На рисунке показана затайленная результирующая напольная плитка в фантастическом стиле, у которой параметр для Normal Map изменен на -1, вместо единички, задаваемой картам нормалей по умолчанию.

Хотя… Давайте сделаем из текстуры пола сетку. Для этого откроем графический редактор, например, Photoshop или GIMP, и загрузим в него два наших изображения: “sci-fi-floor-maps-normal-map.png” и “sci-fi-floor-maps-normilized-ao5.png”. Выберите слой с картой нормалей и выберите вкладку “Color Range” пункта “Filter” главного меню Фотошопа. Данный инструмент позволяет выделять области по цвету, указанному, например, Пипеткой. После того как вы выберете “Color Range”, щелкните пипеткой в центре одного из квадратиков (показано на рисунке ниже зеленой точкой) и кликните на кнопке “OK” в окне “Color Range”, чтобы выделить все квадратики с заданным цветом. Теперь кликните Левой Кнопкой Мыши на “глазе” напротив слоя с картой нормалей, чтобы отключить видимость данного слоя. Кликните Левой Кнопкой Мыши на слое “sci-fi-floor-maps-normilized-ao5”, чтобы сделать его активным и нажмите клавишу “Del” на клавиатуре, чтобы удалить выбранные области (“квадратики”). Сохраните получившееся изображение в формате png или tiff. Я выбрал формат png и имя sci-fi-floor для данной текстуры сетки.

На рисунке показан процесс создания прозрачной текстуры для имитации сетки в Unity3D. (transparent texture color range photoshop)
На рисунке показан процесс создания прозрачной текстуры для имитации сетки в Unity3D.

Получим вот такую текстуру с прозрачностью.

На рисунке показана текстура сетки с прозрачным фоном. (tiled seamless sci-fi texture 512)
На рисунке показана текстура сетки с прозрачным фоном.

Теперь импортируйте текстуру в Unity3D, выберите ее Левой Кнопкой Мыши и в окне инспектора в меню настроек импорта текстуры (Import Settings) поставьте флаг напротив параметра “Alpha is Transparent”, чтобы сделать ваш фон импортированного в Unity3D изображения прозрачным.

На рисунке показано превращения текстуры в прозрачную текстуру через параметр “Alpha is Transparent” меню настроек импорта текстуры (Import Settings) в окне инспектора в Unity 3D. (alpha is transparent floor in unity3d)
На рисунке показано превращения текстуры в прозрачную текстуру через параметр “Alpha is Transparent” меню настроек импорта текстуры (Import Settings) в окне инспектора в Unity 3D.

Теперь щелкните Левой Кнопкой Мыши по кваду (sci-fi полу) на сцене и в меню материала в Инспекторе назначьте ей получившуюся текстуру сетки. Теперь в этом же меню материала смените режим рендера материала с “Opaque” на ”Cutout”, “Transparent” или “Fade”.

На рисунке показан процесс выбора режима рендера материала (Cutout) в Unity 3D. (cutout render mode unity 3d)
На рисунке показан процесс выбора режима рендера материала (Cutout) в Unity 3D.

Более подробно про настройки прозрачности вы можете посмотреть в статье Эффекты в Unity3D. Часть I. Визуализация заклинания лечения.

Я выбрал режим “Cutout”, выставил Alpha Cutoff в 0.5, Metallic – в 1, а Smoothness – в 0.5. Получилась металлическая сетка в Unity 3D, причем для отображения такой плитки нам потребовалось всего два треугольника.

На рисунке показана металлическая сетка в Unity3D. (sci-fi grid texture from 3d model for unity3d)
На рисунке показана металлическая сетка в Unity3D.

На этом – всё на сегодня!

Автор: Максим Голдобин

goldmaxval@gmail.com

5 Comment

  1. LastManStanding says: Ответить

    Есть ли какой-то особый смысл использования 400 квадратов, вместо одного и последующего изменения Tiling в материале в Unity?
    За статью спасибо.

    1. Maxim Goldobin says: Ответить

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

      p.s. 400 квадратов и даже кубы участвуют в батчинге, что дает не такую уж нагрузку, как могло бы показаться. ИМХО, в зависимости от платформы.
      p.p.s. но, таки — да, можно воспользоваться одним квадом-примитивом Unity 3D, масштаб/scale которого увеличить до 400 и выставить соответствующии значения для «тайлинга». Кстати, тема тайлинга уже поднималась в предыдущих статьях, например, в От тайлинга и смещения до атласа текстур на примерах смены обложки для книги и текстуры одежды и кожи персонажа, как и тема смещения/offset’ов

      Спасибо за комментарий!
      Рад был помочь ответом, если смог удовлетворить ваше любопытство 🙂

      1. Elouise says: Ответить

        Way to go on this esays, helped a ton.

    2. Gert says: Ответить

      Thanks for sharing. Your post is a useful couniibntrot.

  2. Kailan says: Ответить

    Just what the doctor oreedrd, thankity you!

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