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

Данная часть статьи посвящена теории карт высот, а также теории карт смещения, включая запекание карт высот в 3D редакторе Blender.

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

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

В предыдущей части статьи было рассказано про Создание карты нормалей в Unity3D.

Теория карт высот

Вернемся к картам высот. Итак, нулевой уровень карты высот. Чтобы узнать цвет нулевого уровня карты высот, можно поГуглить либо узнать этот цвет практическим способом, например, в Blender’е. Для этого достаточно создать плоскость, создать для нее uv развертку и новое изображение в редакторе UV/Изображения, затем создать копию данной плоскости и, не перемещая их друг относительно друга, запечь одну плоскость на другую в режиме карты смещения. Чтобы запечь карту высот с одной 3D модели на другую, необходимо выбрать 3D модель-источник и затем выбрать целевую 3D модель, после чего открыть вкладку Render, в которой, в свою очередь, выбрать вкладку Bake, а в ней выставить флаг напротив запекания с одной 3D модели на другую и выбрать Displacement для режима запекания (Bake Mode). Осталось лишь нажать кнопку “Bake ”. Окно запекания карт с выставленными параметрами для описанного запекания карты высот показано на рисунке ниже.

На рисунке показано попурри из действий, настроек и окон для запекания карты высот с одной 3D модели на другую в Blender. Результат показан в окне редактора развертки/изображения, слева внизу. zero-level-gimp-blender
На рисунке показано попурри из действий, настроек и окон для запекания карты высот с одной 3D модели на другую в Blender. Результат показан в окне редактора развертки/изображения, слева внизу.

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

Вы можете переместить одну плоскость относительно другой по оси Z, чтобы выяснить, что на расстоянии 0.5 метра (или unit’а) цвет запекаемой карты высот становится абсолютно белым или черным, в зависимости от того, выше или ниже находится 3D модель донор относительно модели-цели.

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

На рисунке показан редактор GIMP с загруженной карты высот нулевого уровня, открытым окном Палитры цветов/Color Picker. Сам инструмент “Пипетка” обведен синим кружком. zero-level-heightmap-gimp
На рисунке показан редактор GIMP с загруженной карты высот нулевого уровня, открытым окном Палитры цветов/Color Picker. Сам инструмент “Пипетка” обведен синим кружком.

Как можно заметить из рисунка, нулевым цветом для карты высот является цвет (127, 127, 127) в RGB либо (0,0,50) в цветовой модели HSV/HSB, или #7f7f7f по таблице HTML кодов цветов, который также называется Grey50. Хотя в некоторых источниках в качестве 50-процентного серого цвета указывают #808080, т.е. Grey и Gray, или (128, 128, 128) в RGB, в HSV данные цвета не отличаются кодом.

Подобно описанному выше процессу запекания карты высот для идентичных плоскостей, лежащих в одинаковых координатах, можно запечь и “ненулевую” карту высот. Для демонстрации того, как выглядит запеченная карта высот/карта смещения, я создал в Blender несглаженную плоскость и разбил ее инструментом Loop Cut And Slide, нажав в режиме редактирования (‘Tab’) сочетание клавиш ‘Ctrl+R’ и подтвердив расположение каждого разреза так, как мне нужно. Вместо данного инструмента можно воспользоваться инструментом нож, нажав клавишу ‘K’, или инструментом Subdivide, нажав клавишу ‘W’, чтобы войти в меню Specials, в котором выбрать пункт “Subdivide”. Далее я создал “целевую” плоскость, на которую будут запекаться смещения полигонов поверхности ломаной плоскости.

На рисунке показана созданная в Blender ломаная плоскость, с которой будет запекаться карта высот (“Displacement” в настройках запекания Blender) на плоскость, показанную чуть ближе на данном изображении. bake-heightmap
На рисунке показана созданная в Blender ломаная плоскость, с которой будет запекаться карта высот (“Displacement” в настройках запекания Blender) на плоскость, показанную чуть ближе на данном изображении.

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

На рисунке показано взаимное расположение плоскостей и настройки для запекания карты высот. bake-heightmap-blender
На рисунке показано взаимное расположение плоскостей и настройки для запекания карты высот.

Если у вас в верхней части окна Blender промелькнула надпись “No objects or images found to bake to”, как показано на рисунке ниже, значит либо вы не создали Изображение, в которое будет запекаться карта смещения/высот, либо вы не выбрали сначала объект-источник (Правой Кнопкой Мыши), а затем не выбрали модель-цель (Правой Кнопкой Мыши с зажатой клавишей ‘Shift’), как описано в упомянутой выше статье про запекание карты нормалей в текстуру либо в статье Быстрый старт из MakeHuman в Unity3D. Создание low poly и high poly моделей персонажа. Запекание карты нормалей в Blender. Разница заключается лишь в размещении моделей источника и цели и режима рендеринга, о котором я уже написал выше в рамках данной статьи.

На рисунке показано предупреждение об ошибке, в котором сказано, что “Не найден объект или изображение, в который необходимо произвести запекание ”. no-objects-or-images-found-to-bake-to

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

На рисунке ниже отображена запеченная карта высот в окне Редактора UV/Изображения (UV/Image Editor), где синим обведена кнопка New создания нового изображения, в которое будет производиться запекание. Если вы посмотрите на запеченную карту высот, то вы увидите, что часть запеченного изображения (обведено розово-фиолетовым цветом Фуксия) выступает за пределы целевой плоскости (четыре вершины, соединенные ребрами в окне uv-редактора, окрашенные в оранжевый цвет). Размер данных полей задается параметром Margin во вкладке запекания Bake меню Render (иконка с камерой вверху).  Результат запекания расширяется на значение Margin каждого острова uv развертки для сглаживания швов на запеченной текстуре. Особенно это заметно, когда на одной текстуре запекается несколько частей 3D модели с соответствующими uv-островами. Также данные поля позволяют избежать артефактов на краях 3D моделей (особенно плоскостей) при выставлении высоких значений влияния карты нормалей, с которым вы познакомитесь чуть позже, если еще не знакомы :).

На рисунке показан процесс запекания карты высот с одного 3D объекта на другой в Blender. baking-height-map-blender
На рисунке показан процесс запекания карты высот с одного 3D объекта на другой в Blender.

Кстати, если снять флаг с параметра “Clear”, то перед созданием следующей карты не будет стерта предварительно созданная карта, что позволяет запекать на предыдущей карте (например карте нормалей или карте высот) новые карты, например, для мелких деталей, таких как гайки, шайбы, или неровности текстуры.

Итак, как было сказано выше, 50 % от серого цвета является точкой отсчета для карты высот/нулевой точкой карты смещения. Нулевой уровень означает, что в данной области поверхность 3D модели не будет ни поднята, ни опущена. На рисунке ниже этот уровень отмечен желтой линией.

На рисунке показан процесс преобразования поверхности в карту высот (height map, bump map, displacement map). heightmap
На рисунке показан процесс преобразования поверхности в карту высот (height map, bump map, displacement map).

На рисунке ниже показана зависимость запекаемой карты нормалей от положения 3D модели, с которой производится запекание карты высот и положения 3D модели (в данном случае — плоскости), на которую производится запекание карты высот.

На рисунке показана карта высот, которая получается в зависимости от расположения целевой 3D модели относительно 3D модели-донора. heightmap-levels-blender-middle
На рисунке показана карта высот, которая получается в зависимости от расположения целевой 3D модели относительно 3D модели-донора.

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

Онлайн приложение Normalmap Online позволяет создать карту нормалей, и не только ее, как было сказано выше. Стоит отметить, что очень гибкие настройки для Силы, Уровня и Размытия/Резкости карты нормалей,  возможность инвертирования Высоты, (R)ed и (G)reen каналов, а также выбор метода создания карты высот, позволяют создать любую карту нормалей, которая только может потребоваться в вашем проекте.

Если ваша текстура одновременно может считаться и картой высот для вашей текстуры, то вы смело можете воспользоваться он-лайн приложением Normalmap Online. Если же нет, то вам придется сделать из вашей текстуры карту высот или нарисовать ее вручную :). Не стоит расстраиваться, это не так сложно, как может показаться на первый взгляд, и вы в этом убедитесь ближе к концу статьи, где показано, как превратить диффузную карту (текстуру) в карту высот/bump map/displacement map.

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

  1. (Опциональный шаг) Преобразовать текстуру в изображение в градациях серого при помощи любого графического редактора изображений, например, Photoshop или GIMP, либо при помощи какой-нибудь другой программы/утилиты, например, ACDsee, XnView и т.д.
  2. загрузить текстуру в Unity3D;
  3. создать, например, плоскость или куб;
  4. добавить на созданный 3D объект материал;
  5. поместить в слоты Albedo и Displacement настройки свойств материала свою текстуру

Теперь перемещайте ползунок, расположенный справа от ”Height map”, регулирующий степень воздействия карты высот на ее выпуклость/вдавленность.

На рисунке показан процесс изменения воздействия смещения текстуры: “проседание” текстуры вниз, поскольку швы между плитками окрашены в светлые тона, а сами плитки – в темные, что видно на изображении текстуры ниже. heightmap-down

На рисунке показан процесс изменения воздействия смещения текстуры: “проседание” текстуры вниз, поскольку швы между плитками окрашены в светлые тона, а сами плитки – в темные, что видно на изображении текстуры ниже.

Ниже представлена текстура, которая была использована в качестве карты высот для “гифки”, показанной выше.

На рисунке показана текстура с темным фоном, межплиточное пространство которой – светлее фона. black-texture-inverted-512
На рисунке показана текстура с темным фоном, межплиточное пространство которой – светлее фона.

А теперь посмотрим, как поведет себя текстура на 3D модели, которая прямо противоположна используемой выше (т.е. инвертированное изображение, в данном случае — инвертированная карта высот/инвертированная карта смещения).

На рисунке показан процесс изменения воздействия смещения текстуры: “проседание” текстуры вниз, поскольку швы между плитками окрашены в светлые тона, а сами плитки – в темные, что видно на изображении текстуры ниже. heightmap-up

На рисунке показан процесс изменения воздействия смещения текстуры: “проседание” текстуры вниз, поскольку швы между плитками окрашены в светлые тона, а сами плитки – в темные, что видно на изображении текстуры ниже.

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

На рисунке показана уже мелькавшая выше текстура плитки, используемая в данном случае в качестве карты высот. tileable-texture-512
На рисунке показана уже мелькавшая выше текстура плитки, используемая в данном случае в качестве карты высот.

Как вы можете видеть, в данном случае текстура поднимается, а не опускается, как это происходит при использовании текстуры с темным фоном, а значит, может быть использована в онлайн генераторе текстур для создания различных карт или в Unity3D для создания карты нормалей, карты высот, построения меша/ландшафта и т.д. Конечно, инвертированная текстура (а темная текстура, используемая в качестве карты высот, есть ни что иное, как инвертированное изображение светлой текстуры плитки) также может быть использована для создания карт в он-лайн генераторе, но, как правило, лишь в тех случаях, если подкреплена задумкой дизайнера.

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

В следующей части статьи будет представлен Обзор Normalmap Online

 

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

goldmaxval@gmail.com

3 Comment

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

    Hi guys, interesting website here. I have been reading here for a while and just wanted to say hi.

    Kind regards,

    Jimmy

  2. Как хорошо, что наткнулся на ваш сайт, очень много информации почерпнул

  3. JefBe says: Ответить

    Привет всем участникам! Класный у вас сайт!
    Нашел интересные новости на этом сайте http://www.3dbuffer.com/novosti/

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