Как сделать текстуру бампа

Создание текстур рельефа bump

Материал из S.T.A.L.K.E.R. Inside Wiki

Содержание

Создание карт рельефа bump & bump#

Внимание! Уроки рассчитаны на пользователей, уже достаточно хорошо освоивших фотошоп. Различные вопросы типа «а где находится эта кнопачка. » здесь не рассматриваются. Названия функций приведены на русском языке, у кого фотошоп англоязычный, ориентируйтесь по смыслу.

На данном уроке попробую подробно описать порядок создания карт рельефа в игре с помощью фильтра карт нормалей от nVidia. Действия, которые описаны ниже, я не буду называть ни самыми рациональными, ни самыми простыми. Просто так делаю я сам, и не обязую следовать им в точности.

Так вот, большинство текстур в игре имеют по два одноименных собрата с индексами _BUMP и _BUMP#. так вот эти две дополнительных текстуры и являются рельефом, или «бампом».

К примеру, имеем мы текстуру STON.dds:

А сейчас будем делать для нее бампы. Как было сказано ранее, рельеф начинается с карты высоты, фильтр от nVidia здесь пока не нужен.

Карта высот

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

карта высоты готова. сделаем с нее дубликат, переведем в РГБ и найдем фильтр карт нормалей, он находится в самом низу списка фильтров.

Карты нормалей

Для полного счастья сталась только карта интенсивности блика.

Карта интенсивности блика

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

Первой проще делать текстуру bump#. Для этого берем карту высоты, копируем изображение на свежесозданную альфу, а каналы РГБ заливаем однородным серым цветом (за серый принимается цвет в середине всего диапазона яркости, т.е. лучше всего брать 127 или 128). Далее остается только сохранить ее:

С текстурой bump все сложнее. По непонятной причине разработчиками игры был выставлен обратный порядок каналов. Т.е. то что фильтр nVidia располагает в порядке RGB(A), в текстуре bump порядок обратный, т.е ABGR. Это составляет определенную сложность и затрату времени при конвертировании «синенькой» текстуры, создаваемой фильтром, в «зелененькую» текстуру bump. Я обычно делаю это так:

с текстуры bump# делается дубликат и сохраняется как bump, далее на нее с помощью копипаста вставляются каналы из «синенькой» текстуры, которая была недавно сгенерирована фильтром. Порядок такой:

а чтобы довести текстуру bump до конца и сделать ее истинно «зелененькой», в канал R нужно вставить карту интенсивности блика. Все, можно сохранять. должно получиться вот так:

Вот и все, карты рельефа для сталкера готовы. Остается только посмотреть, как будет выглядеть в игре:

Дополнение

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

Источник

Особенности моделирования света: Рельефное текстурирование (Bump mapping)

Рельефное текстурирование основывается на технике выполнения затенения по Фонгу, поэтому, если вы не прочитали предыдущие разделы, предлагаю сделать это прямо сейчас.

Рельефное текстурирование очень напоминает обычный процесс наложения («натягивания») текстуры на полигон. Только при обычном наложении текстуры мы работаем со цветом и изменяем его цветовое восприятие, а вот при рельефном текстурировании мы добавляем ощущение рельефа, объемности плоскому полигону. Эта техника может добавить детализацию сцене без создания дополнительных полигонов. Заметьте, что полигон по-прежнему остается плоским, но создается ощущение его выпуклости (рельефности).

А как оно действует?

Посмотрите на рисунок. С расстояния единственный способ определить, что изображение отображает рельефную поверхность, — это проанализировать изменения яркости отдельных участков изображения. Наш мозг делает это автоматически, незаметно для нас. В результате мы четко определяем, что будет выпуклостью, что впадиной.

Очень похоже на выдавливание (чеканку). Но, по сути, единственное, что было сделано для придания объемности плоскому изображению, — это правильное наложение ярких и темных участков. Остальное делает наш мозг.

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

Нужны еще доказательства? Посмотрите на тот же рисунок, только развернутый на 180 градусов. Он стал похож на полную противоположность предыдущему. То, что раньше казалось выпуклым, стало вогнутым, и наоборот. А ведь это то же самое изображение.

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

Что такое рельефная карта (текстура)?

Рельефная карта (текстура) — это обычная текстура, только в отличие от первой, несущей информацию о цвете определенных участков, рельефная карта несет информацию о неровностях. Самый распространенный способ представить неровности — это применить карту высот. Карта высот — это текстура в оттенках серого, где яркость каждого пикселя представляет, насколько он выдается из базовой поверхности. (См. рисунок справа). Очень простой и удобный метод. Его легко реализовать.

Даже в псевдотрехмерных играх и приложениях, ввиду своей простоты, этот метод используется очень широко. Например, игра SimSity3000. Рельеф местности там задается bitmap текстурой с градацией яркости от 0 до 255. Где 50 соответствует нулевому уровню земли.0 — самым глубоким частям рек и озер, а 255 — будут означать вершины самых высоких гор. Bump maps очень широко используются разработчиками во многих пакетах работы с графикой и трех-мерными объектами.

Но это просто отступление, показывающее диапазон применения bump maps.

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

Как реализовать?

По сути, это логическое продолжение техники просчета Phong shading. При использовании Phong shading мы интерполировали нормаль к поверхности по всему полигону, и этот вектор использовался для дальнейшего определения яркости соответствующего пикселя (См. главу, посвященную затенению по Фонгу). Реализуя bump mapping, мы немного меняем направление вектора нормали, основываясь на информации, содержащейся в карте высот. Изменяя положение вектора нормали в конкретной точке полигона, мы, соответственно, меняем яркость текущего пикселя (помните, закон косинуса из теории света :)) Все очень просто!

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

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

Сначала нам нужно преобразовать высоты с карты (bump map) в маленькие векторы, по одному на каждый пиксель. Посмотрите на увеличенный рисунок слева. Более светлые квадраты соответствуют более выпуклым участкам. Понятно. Теперь, для каждого пикселя (на нашем рисунке квадрат соответствует пикселю) мы должны рассчитать вектор, указывающий нам направление уклона поверхности. Рисунок справа демонстрирует нам это. Маленькие красные векторы указывают на уменьшение высоты. Для определения этих векторов, мы определим величину градиента для каждого пикселя:

x_gradient = pixel(x-1, y) — pixel(x+1, y) y_gradient = pixel(x, y-1) — pixel(x, y+1),

где х и y — координаты соответствующего пикселя

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

Слева — полигон с изначальным вектором нормали, обозначенным n. Также показаны два вектора, которые будут использованы для изменения положения (направления) нормали к пикселю под ним. Оба вектора должны располагаться параллельно осям
координат применяемой карты высот.

Справа показаны карта высот и полигон. На обоих рисунках показаны направления U и V осей координат карты (текстуры) высот.

Пересчитать новый вектор нормали легко:

New_Normal = Normal + (U * x_gradient) + (V * y_gradient)

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

Выполнение быстрого рельефного текстурирования
(Fast Bump mapping)

Выше вы узнали, что при рельефном текстурировании производится изменение вектора нормали к поверхности на площади всего полигона в соответствии с картой высот. Вы так же помните, что для ускорения просчета затенения по Фонгу мы применили способ с заранее просчитанной Phong map, которая представляет собой набор яркостей для всех возможных нормалей на полигоне. Таким образом, не надо быть гением, чтобы предположить, что быстро выполняемым вариантом рельефного текстурирования будет просчет смещений к карте затенения по Фонгу. Результирующей яркостью пикселя будет сумма значений, полученных с карты затенения и рельефной карты. Используя этот подход, мы одновременно будем производить затенение по Фонгу с учетом рельефности рисунка.

Источник

Создание Normal Bump и его применение

Для создания трёхмерного бампа 3D MAX, как и игры, использует три цвета для определения точки в пространстве. То есть X,Y,Z соответствует R,G,B (возможен другой порядок). Для создание любых текстур нужно использовать только плоские виды, то есть рендер из окна перспективы исключается.

1. Делаем базу для создания карт Normal Bump.

— Создайте новую сцену: File>Reset.
— Создайте в виде Front Plane 1000х1000 с центром в [0,0,0].
— Создайте три источника света Target Directional Light трёх цветов: красный [255,0,0], зелёный [0,255,0] и синий
[0,0,255].

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

— Разместим target всех источников света в координатах [0,0,0].

— Самим источникам задайте следующие глобальные координаты: красный [500,-500,0], зелёный [0,-500,-500], синий [0,-500,0].

Рис.1

Сейчас мы создали полностью и равномерно освещённую поверхность. Красный (справа) и зелёный (снизу) свет расположен под углом в 45 градусов к поверхности, что нам и нужно. А синий направлен прямо на Plane01. Теперь о материала: он должен быть матово-белый.

Рис. 02

На рисунках ниже показан небольшой пример, как оживляется пустое помещение и кабели при использовании Normal Bump.

2. Создание нашей первой Normal Bump карты.

Сейчас мы сделаем карту рельефа для кованного забора. Согласитесь, зачем делать трёхмерный забор с множеством сторон, если его можно сделать плоским без ущерба для вида? На его создании внимание заострять не буду, так как он делается очень просто: из цилиндров и шариков. Вы можете сделать свой.

— Создаём забор так, чтобы он вписался по размеру в нашу плоскость и выдвигаем его на передний план, чтобы он не находился в одной плоскости с Plane01, но и чтобы попадал под наш свет.

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

Рис. 03

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

— Спрячьте Plane01 и снова отрендерите. Результат сохраните в 01.png 24b с альфа-каналом.
— Откройте Photoshop и сделайте из картинки 01.png чёрно-белую версию. То есть выделите всё непрозрачное и закрасьте белым.
Инвертируйте выделение и закрасьте чёрным. Склейте слои и сохраните в 02.jpg

3. Создание плоского забора.

Рис.04

Теперь наш забор готов полностью. Для проверки его псевдообъёмности поставьте несколько OMNI разных цветов в разных концах
сцены и отрендерите элемент забора покрупнее.

Рис. 05

Кстати, теперь можно назначить любую текстуру в канал Diffuse.

Можете скачать сцены урока и посмотреть маленький видеоролик: я анимировал три OMNI R,G,B, которые крутятся вокруг забора.
Очень впечатляет.

А вот несколько очень важных особенностей и советов:

Источник

Кратко о запекании нормалей (бампа).

Конечный результат в Blender3d:

В большинстве случаев, проще использовать некую текстуру, вместо миллионов полигонов (допустим, складочки на футболке ГГ).

У нас имеется лоу-поли меш колесика, с авто-сглаживанием (Группами сглаживания), с UV-разверткой (512×512):

ВАЖНО! На объекте должен быть материал, но без текстуры

Вы могли заметить, что одна из частей колеса на UV-Острове сдвинута вправо (ровно на 512px). Это сделано для того, что-бы при запекании нормаль не создавала артефактов накладывалась друг на друга. В последствии, после успешного пека – этот остров вернется на место.

*Накладывание UV-Острова друг на друга нормальная практика, называется оверлап.

Также есть хай-поли меш, (без развертки, но со смуф-группами) с которого мы будем печь нормали:

Далее, если вы используете блендер:

1. Выделяете хай-поли меш.

2. Выделяете лоу-поли меш с зажатым шифтом.

3. Идем во вкладку Render (Фотоаппарат в опциях) и листаем вниз до меню “Bake”.

Bake Mode – Normals

Галка Selected to Active object говорит о том, что ранее выделенный объект будет запекаться на ТЕКУЩИЙ объект.

Bias – Минимальная дистанция граней. –Можно оставить как есть.

Bake to Vertex – Печь в цвета вершины.

Clear – Сбросить текстуру (если ранее была запечена).

Margin – Паддинг (отступ, дополнительные пиксели вокруг UV-Острова).

Печется-же нормаль в промежутке Distance-Bias. В разных ситуациях по-разному, потому можно попробовать с ними “поиграться”.

После выставления необходимых значений – нажимаем кнопку Bake.

Если вы сделали все верно, то должен получится примерно такой результат:

*Не самый лучший (много свободного места), лишь для демонстрации.

Дабы посмотреть его в редакторе:

Выделите ваш лоу-поли меш > выберите вкладку текстура > выберите текстуру от материала > создайте новую > в вкладке Image выберите свою нормаль

Ниже есть выпадающие меню Image Sampling и Influence. Выставляем следующие параметры:

Готово, материал настроен. Теперь осталось добавить в сцену источник света и переключить режим с Solid на Material.

Старался очень кратко, многое мог упустить.
Внимаю любую критику.

Найдены возможные дубликаты

Еще бы такой же тутор по текстурированию и я бы был счастлив.

Большое спасибо! А можете пожалуйста сделать ещё гайд по UV развёрткам? А то я сколько не пробовал, криво текстурится.

Спасибо за мотивацию начать пилить уроки! Местные комментарии показывают, что далеко не все «очевидные» вещи очевидны для большинства. Пожалуй, более подробно и углубленно буду вести похожую рубрику в сообществе CGI Media, чтобы не дублировать тему =) Ну, и с 3DS Max’ом в качестве рабочей среды.
Не против, если буду ссылаться в некоторых моментах?)

ты не хочешь добавить в пост такую мелочь, что это бейк в blender render, а не сайклс?

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

Разница там только вроде в настройке материалов, что не является основной темой урока.

Я не разработчик, и очень далёк от этого. Но от множества новых слов и выражений я сейчас такой =)

А вот скакать из пакета в пакет со своими обжами

А вы точно графикой занимаетесь или просто мимо проходили посмотрев пару тутуров?

Спасибо, интересный пост, я чуть-чуть самоучка в блендере ))

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

Отличный пост, пиши еще!

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

Типа делаем хайполи, запекаем с него бамп, делаем лоуполи накидываем бамп?

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

Это в каком моменте она может дать неверное представление? Взять красный канал у предварительно BW изображения дифьюза, и с помощью нормалфильтра нвидии создать карту нормалей, добавить размытия по гауссу и нормализировать сверху? И что значит у вас нет диффуза? Модельку сделялъ, а текстурку не сделяль? Это что-то новое модное? И чем, уникальная футболочка отличается? Работы по созданию НМ, в Нвидии и фотошопе, ну минут на 10-15, поплевывая в потолок. К чему вот это непонятное усложнение с блендером и пр. Вам так неценно свое время и затраченные усилия?

Опять же, такой принцип создания нормалей характерен для очень высокого качества моделей, для каких-нибудь ААА проектов. А для вещей вроде колес, спорно.

И что значит у вас нет диффуза? Модельку сделялъ, а текстурку не сделяль? Это что-то новое модное?

Источник