Как сделать bump текстуру в фотошопе
Однажды я приобрёл игру DOOM III и открыл для себя новый тогда эффект - normal bump. Его применение - это резкий скачок вперёд. Вы пробовали отключить БАМП в DOOM III? Без него игра превращается в DOOM I. Главный плюс - иллюзия трёхмерности (объёма) плоской поверхности без сложной сетки, вернее, буквально вообще без неё. В этом уроке я расскажу, как полностью вручную создавать собственные карты 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].
Проследите за тем, чтобы спад и тени были выключены. Мы воспользовались именно этим типом источника, так как нам нужна равномерно освещённая поверхность, а всенаправленный источник даёт неравномерное освещение.
Теперь нам нужно, чтобы свет освещал нашу плоскость под определёнными углами. Удаление от плоскости неважно, главное - угол и положение относительно Plane01. Для этого сделайте следующее:
- Разместим target всех источников света в координатах [0,0,0].
- Самим источникам задайте следующие глобальные координаты: красный [500,-500,0], зелёный [0,-500,-500], синий [0,-500,0].
Рис.1
Сейчас мы создали полностью и равномерно освещённую поверхность. Красный (справа) и зелёный (снизу) свет расположен под углом в 45 градусов к поверхности, что нам и нужно. А синий направлен прямо на Plane01. Теперь о материала: он должен быть матово-белый.
- Создайте в любой свободной ячейке редактора материалов такой образец: ambient,duffuse, specular - белого вцета. Specular Level, Glossiness - 0, Soften - 1. Присвойте этот материал нашей плоскости Plane01.
Рис. 02
Если свет и материал Вы установили правильно, то плоскость будет фиолетовато-сине-голубой -). На этом создание базы для создания текстур закончено.
Зачем вообще нужен Normal Bump и где его использовать? - Лично я сейчас ни в одной сцене не обхожусь без него. Это и тротуарная плитка, и протектор шин, и неровности штукатурки, и провода, и решётка, и сетка, и камни, и кирпичная кладка - всё, всё, всё. Это достойная замена сложной сетке или Displace'у. Например, зачем делать клавиатуру с кнопками с несколькими тысячами фэйсов, если можно обойтись 12 фэйсами? Normal Bump - это огромная оптимизация, которая подойдёт в любой ситуации (разумеется, где есть свет). Но перед применением этого рельефа, его сначала надо создать, например, нарисовать ту самую клавиатуру с кнопками, "откатать" с неё карту Normal Bump и затем "натянуть" на примитив "BOX".
На рисунках ниже показан небольшой пример, как оживляется пустое помещение и кабели при использовании Normal Bump.
2. Создание нашей первой Normal Bump карты.
Сейчас мы сделаем карту рельефа для кованного забора. Согласитесь, зачем делать трёхмерный забор с множеством сторон, если его можно сделать плоским без ущерба для вида? На его создании внимание заострять не буду, так как он делается очень просто: из цилиндров и шариков. Вы можете сделать свой.
- Создаём забор так, чтобы он вписался по размеру в нашу плоскость и выдвигаем его на передний план, чтобы он не находился в одной плоскости с Plane01, но и чтобы попадал под наш свет.
Вот, что получилось у меня. Я сделал его так, чтобы его можно было повторить, скопировав по оси Х столько, сколько нужно.
Рис. 03
- Теперь объединяем наш забор в один объект, либо просто выделяем все его части, выбираем тип рендера - "Box selected" на
панели инструментов вверху и рендерим. Сохраняем в файл 01.jpg.
Этот тип рендера позволяет отсечь всё лишнее, а нам нужно, чтобы наш забор повторялся. То есть нам нужна тайловая
текстура. Ещё нам нужна карта непрозрачности и карта зеркального отражения.
- Спрячьте Plane01 и снова отрендерите. Результат сохраните в 01.jpg 24b с альфа-каналом.
- Откройте Photoshop и сделайте из картинки 01.jpg чёрно-белую версию. То есть выделите всё непрозрачное и закрасьте белым.
Инвертируйте выделение и закрасьте чёрным. Склейте слои и сохраните в 02.jpg
Мы создали готовую к работе карту Normal Bump и карты Opacity и Specular Level. Вторая карта нам нужна для прозрачности
между прутьями и чтобы зеркальный блик не возникал там, где ничего нет - между прутьями.
3. Создание плоского забора.
- Создайте новую сцену: File>Reset.
- Создайте в виде TOP замкнутый сплайн любой формы (это будет наш забор).
- примените модификатор Extrude с любым значением отличным от 0.
- Конвертируйте в Editable mesh либо примените модификатор Edit Mesh, выделите верхнюю и нижнюю "крышку" и удалите.
- В редакторе материалов выберите любой образец и назначьте в качестве Opacity и Specular Level карту 02.jpg (сделайте
копию, но не образец).
- В настройках Specular Level, в свитке Output значение Output Amount убавтье до 0,5 (это уменьшит силу блеска).
- В качестве Bump - Normal Bump. В качестве Normal - 01.jpg.
Рис.04
- Назначьте забору этот материал. Включите отображение материала в окнах проекций.
- Примените к забору модификатор UVW Mapping и настройте его так, чтобы карта "сидела" на заборе, как надо.
- В настройках рендера, на закладке Common в группе Option отметьте Force 2-Sides (чтобы рендерить заднюю сторону забора,
поскольку мы сделали его из сплайна - для экономии полигонов).
Теперь наш забор готов полностью. Для проверки его псевдообъёмности поставьте несколько OMNI разных цветов в разных концах
сцены и отрендерите элемент забора покрупнее.
Рис. 05
Кстати, теперь можно назначить любую текстуру в канал Diffuse.
Можете скачать сцены урока и посмотреть маленький видеоролик: я анимировал три OMNI R,G,B, которые крутятся вокруг забора.
Очень впечатляет.
А вот несколько очень важных особенностей и советов:
- При очень большой степени выдавливания, да ещё в сочетании с отдалённостью камеры от этого объекта, порой возникают жуткие артефакты (включая интерференцию). Этот эффект часто возникает на заборах, спицах и подобных предметах. Но его легко устранить. Например, если швы бампа видны несильно, то можно переключить параметр сглаживания с Pyramidal на Summed Area, который можно найти здесь: material editor>свойство normal bump'а (bump>normal bump>normal)>Группа Bitmap Parameters>Filtering. Если же дело серьёзней - с этой задачей справится только SuperSampling; В редакторе материалов в одноимённом свитке отключите галочку Use Global Settings и включите Enable Local SuperSampler. А там дело ваше.
- При создании текстуры бампа стены из гладких камней трудностей не возникнет. А вот при создании карты кирпичной
кладки. так как кирпич - параллелепипед, то во фронте будет видна только его фронтальная часть, а боковые стороны невидны. В результате карта бампа получится плоской. Для устранения этой ситуации нужно всего лишь ту самую фронтальную часть немного масштабировать со знаком "-", и получится, что Back-поверхность будет чуть больше, чем
Front-поверхность>появляются боковые стороны в виде Front (если вы рисовали именно для этого вида). В итоге у вас кирпич будет похож на пуд золота ).
- Часто при создании normal bump ровных больших поверхностей, например, плитки, блоков и прочего (особенно в архитектуре), искажается конечный цвет, вернее яркость поверхности. То есть, если Вы, например, сделали дом из панелей серого цвета и применили объёмный бамп, то при рендере он может изменить яркость в ту или другую сторону. Почему? Потому что любой бамп построен на контрасте: обычно швы становятся темнее, а поверхность - светлее. Если Вам всё-таки важна точная цветопередача - то просто меняйте силу бампа, параметры карты в диффузном отражении или её процент влияния. Возвращаясь к домику из панелей, если у Вас он стал ярче - сделайте цвет диффузного отражения темнее или текстуру, если есть.
Рельефное текстурирование основывается на технике выполнения затенения по Фонгу, поэтому, если вы не прочитали предыдущие разделы, предлагаю сделать это прямо сейчас.
Рельефное текстурирование очень напоминает обычный процесс наложения ("натягивания") текстуры на полигон. Только при обычном наложении текстуры мы работаем со цветом и изменяем его цветовое восприятие, а вот при рельефном текстурировании мы добавляем ощущение рельефа, объемности плоскому полигону. Эта техника может добавить детализацию сцене без создания дополнительных полигонов. Заметьте, что полигон по-прежнему остается плоским, но создается ощущение его выпуклости (рельефности).
Рассмотрите куб на рисунке, создается впечатление, что он состоит из множества мелких полигонов, обрисовывающих чеканку и клепки. Но в действительности этот куб состоит из 6 плоских четырехугольных полигонов. Вы можете задать вопрос, а чем же это отличается от обычного текстурирования. Ответ - рельефное текстурирование отражает реальное положение источника света в сцене и даже изменение его местоположения. (Интересующимся можно посоветовать прочитать статью, посвященную реализации рельефного текстурирования в DirectX6)
А как оно действует?
Посмотрите на рисунок. С расстояния единственный способ определить, что изображение отображает рельефную поверхность, — это проанализировать изменения яркости отдельных участков изображения. Наш мозг делает это автоматически, незаметно для нас. В результате мы четко определяем, что будет выпуклостью, что впадиной.
Очень похоже на выдавливание (чеканку). Но, по сути, единственное, что было сделано для придания объемности плоскому изображению, — это правильное наложение ярких и темных участков. Остальное делает наш мозг.
Но как определить, какие биты изображения делать яркими, и наоборот. Очень просто. Большинство людей в течение своей жизни продолжительно находятся в условиях, когда свет исходит сверху. Таким образом, человек привык, что большинство поверхностей сверху ярко освещены, а снизу, наоборот, находятся в тени и будут темнее. Таким образом, если глаз воспринимает светлые и темные области на объекте, то человек воспринимает их как рельеф.
Нужны еще доказательства? Посмотрите на тот же рисунок, только развернутый на 180 градусов. Он стал похож на полную противоположность предыдущему. То, что раньше казалось выпуклым, стало вогнутым, и наоборот. А ведь это то же самое изображение.
Тем не менее, наш мозг все же не настолько глуп :). Если вы сможете заставить себя подумать, что свет исходит снизу, мозг воспроизведет информацию так же, как на первом изображении. Попробуйте!
Что такое рельефная карта (текстура)?
Рельефная карта (текстура) — это обычная текстура, только в отличие от первой, несущей информацию о цвете определенных участков, рельефная карта несет информацию о неровностях. Самый распространенный способ представить неровности — это применить карту высот. Карта высот — это текстура в оттенках серого, где яркость каждого пикселя представляет, насколько он выдается из базовой поверхности. (См. рисунок справа). Очень простой и удобный метод. Его легко реализовать.
Даже в псевдотрехмерных играх и приложениях, ввиду своей простоты, этот метод используется очень широко. Например, игра SimSity3000. Рельеф местности там задается bitmap текстурой с градацией яркости от 0 до 255. Где 50 соответствует нулевому уровню земли.0 — самым глубоким частям рек и озер, а 255 — будут означать вершины самых высоких гор. Bump maps очень широко используются разработчиками во многих пакетах работы с графикой и трех-мерными объектами.
Но это просто отступление, показывающее диапазон применения bump maps.
Используя карту высот, вы сможете имитировать неровности практически любой поверхности: дерево, камень, шелушащуюся краску и т.д. Конечно, у всего есть свои пределы. Используя bump mapping, вы не сможете имитировать крупные впадины и возвышенности, но вот для имитации неровностей и шероховатостей на поверхности этот метод подходит идеально.
Как реализовать?
По сути, это логическое продолжение техники просчета Phong shading. При использовании Phong shading мы интерполировали нормаль к поверхности по всему полигону, и этот вектор использовался для дальнейшего определения яркости соответствующего пикселя (См. главу, посвященную затенению по Фонгу). Реализуя bump mapping, мы немного меняем направление вектора нормали, основываясь на информации, содержащейся в карте высот. Изменяя положение вектора нормали в конкретной точке полигона, мы, соответственно, меняем яркость текущего пикселя (помните, закон косинуса из теории света :)) Все очень просто!
Для того, чтобы этого достичь, существует несколько путей. Давайте рассмотрим один из возможных способов.
Для начала нам нужен способ для преобразования информации о высоте неровностей на карте высот в информацию о величине подстройки вектора нормали. Это, собственно говоря, несложно, но немного тяжело для объяснения. Все же постарайтесь понять.
-
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, которая представляет собой набор яркостей для всех возможных нормалей на полигоне. Таким образом, не надо быть гением, чтобы предположить, что быстро выполняемым вариантом рельефного текстурирования будет просчет смещений к карте затенения по Фонгу. Результирующей яркостью пикселя будет сумма значений, полученных с карты затенения и рельефной карты. Используя этот подход, мы одновременно будем производить затенение по Фонгу с учетом рельефности рисунка.
Здравствуйте, меня зовут Булатов Евгений, иногда подписываюсь как Vendigo. Ниже я расскажу об одном интересном методе создания normal map из фотографий.
Часто для создания текстур используются фотографии. Однако в наш технологичный век мало создать diffuse текстуру, нужны еще текстуры бампа, спекуляра, и бог еще знает чего. К сожалению, фотоаппарат может сфотографировать только цвет. Я слышал, в этом направлении ведутся работы, но это еще только работы. Так что все труды ложатся на руки художников. А все, что есть в нашем арсенале это только Photoshop, ну может быть еще и Wacom. Не спорю, это конечно круто, но все равно не достаточно. К нашему счастью умные парни из Nvidia сделали плагин для Photoshop`а - NVIDIA Normal Map Filter, который позволяет создавать из карты высот карту нормалей. Этим плагином мы и воспользуемся.
После установки он появится в меню Filter – NVIDIA tools – NormalMapFilter.
Основные настройки сосредоточены в поле Height Generation.
Поле Scale - задает масштаб по высоте для карты нормалей. Выше него находится ряд переключателей детализированности карты. Подбирая эти два параметра, мы получим или детализированную или глубокую карту, но все вместе.
На рисунке показаны разные варианты сгенерированных карт нормалей:
Но есть интересный метод, позволяющий создавать объемную и вместе с тем детальную карту нормалей.
Алгоритм по шагам:
- Переведите изображение в режим 16 Bits/Chanel (в меню Image – Mode). Это улучшит качество последующих преобразований.
- Скопируйте слой с изображением (Ctrl+J).
- Нам нужна черно/белая карта высот, поэтому обесцветьте его (Ctrl+Shift+U).
- Примените к этому слою фильтр Normal Map с настройками, обеспечивающими максимальную детализацию, и небольшую высоту. Например, 4 sample, Scale – 3. Если на этом шаге вы получаете странный результат, то вернитесь к настройкам фильтра и установите все переключатели, в положение как на скриншоте выше.
- Скопируйте этот слой (Ctrl+J), назначьте ему режим Overlay. Таким образом, вы сделаете вашу карту нормалей в два раза более выпуклой.
Рендер в 3DSMax
Отступление первое:
Плагин NVIDIA Normal Map Filter, преобразует карту высот в карту нормалей. Поэтому для него подходят изображения, где темные участки соответствуют углублениям, а светлые выпуклостям. Часто приходится вручную дорабатывать карту высот из исходной текстуры, рисуя поверх фотографии карту высот.
Отступление второе:
Операция нормирования (применение фильтра Normal Map в режиме Normalize only) нужна потому, что после наложения нормалей в режиме Ovelay, информация в синем канале теряется. Операция Normalize восстанавливает ее.
Есть мнение, что при наложении нормалей нужно Красный и Зеленый каналы смешивать через Overlay, а Синий накладывать в режиме Multiply. Те, кто хорошо знают Photoshop, могут написать экшн для подобной операции и попробовать метод с таким, более «правильным» смешиванием.
Отступление третье:
Сходимость текстуры. Если ваша текстура тайлилась, то после этих операций нормали сходится, не будут (появится острая кромка по краям). В этом случае можно делать так:
Перед созданием normal map, увеличьте размер холста в 3 раза. Canvas Size 300% (Ctrl+Alt+C). Затем скопируйте вашу сходящуюся текстуру на всю площадь.
После чего объедините эти слои и создайте normal map, как было описано выше. Затем, вызовите еще раз команду Canvas и впишите исходный размер в пикселях (например, 512 х 512) . У вас получится исходная текстура нормали, которой будут идеально сходиться.
Внимание! Уроки рассчитаны на пользователей, уже достаточно хорошо освоивших фотошоп. Различные вопросы типа "а где находится эта кнопачка. " здесь не рассматриваются. Названия функций приведены на русском языке, у кого фотошоп англоязычный, ориентируйтесь по смыслу.
На данном уроке попробую подробно описать порядок создания карт рельефа в игре с помощью фильтра карт нормалей от nVidia. Действия, которые описаны ниже, я не буду называть ни самыми рациональными, ни самыми простыми. Просто так делаю я сам, и не обязую следовать им в точности.
К примеру, имеем мы текстуру STON.dds:
А сейчас будем делать для нее бампы. Как было сказано ранее, рельеф начинается с карты высоты, фильтр от nVidia здесь пока не нужен.
Карта высот
Большинство текстур имеют такое случайное свойство, как зависимость яркости от рельефа. например на большинстве фотографий кирпича прослойки либо темнее, либо светлее кирпича, чаще темнее. Так же это относится к доскам, текстурам ландшафта. Выпуклости имеют одну яркость, а впадины - другую. Этим можно сильно упростить создание карты высот. Например для основы карты высот можно взять один из каналов текстуры STON.dds. там как раз впадины темнее, выпуклости светлее - то что нам надо:
если возиться с текстурами лень, и результат не важен, то следующий шаг можно пропустить, в противном случае, берем в руки весь инструментарий фотошопа, включаем фантазию и приводим карту высот к более правильному виду. Например черная тень от камней сверху не должна влиять на рельеф, камни должны быть не такими плоскими, да и прослойки не должны быть плоскими, у меня получилось что то вроде этого:
карта высоты готова. сделаем с нее дубликат, переведем в РГБ и найдем фильтр карт нормалей, он находится в самом низу списка фильтров.
Карты нормалей
Вот так выглядит окно фильтра. практически ничего менять здесь не надо, важна только группа "height generation". Здесь можно выбрать тип фильтра, потыкав в разные режимы, можно увидеть в окне просмотра, что чем ниже режим, тем более размытой получается карта. В данный момент нам нужен самый первый режим "4 samples", он дает наибольшую четкость, а при низких разрешениях текстуры это очень важно. Далее стоит обратить внимание на параметр "Scale" - это, как бы назвать, "сила рельефности" что ли, чем выше число, тем более рельефной будет текстура. Я обычно выставляю значение от 5 до 10. в редких случаях выше. Все зависит от того, насколько резки перепады на карте высоты. Для данной текстуры можно выставить значение 10. Жмем ОК. Получаем изображение такого вида:
Для полного счастья сталась только карта интенсивности блика.
Карта интенсивности блика
Она показывает, насколько сильно отражает свет данный участок текстуры. Чем ярче пиксель, тем сильнее он отражает свет. Так как на данной текстуре у нас камни, карта интенсивности блика будет стремиться к черному, ведь камни - это не стекло и не металл, ни зайчиков, ни свое отражение на них не увидеть. Можно эту карту залить черным, а можно дать некоторым камушкам шанс немного побликовать:
Ну вот. Теперь все для текстур бампа готово. осталось только разложить все по нужным каналам и сохранить.
С текстурой bump все сложнее. По непонятной причине разработчиками игры был выставлен обратный порядок каналов. Т.е. то что фильтр nVidia располагает в порядке RGB(A), в текстуре bump порядок обратный, т.е ABGR. Это составляет определенную сложность и затрату времени при конвертировании "синенькой" текстуры, создаваемой фильтром, в "зелененькую" текстуру bump. Я обычно делаю это так:
а чтобы довести текстуру bump до конца и сделать ее истинно "зелененькой", в канал R нужно вставить карту интенсивности блика. Все, можно сохранять. должно получиться вот так:
Вот и все, карты рельефа для сталкера готовы. Остается только посмотреть, как будет выглядеть в игре:
Дополнение
Кстати, забыл упомянуть, если исходная текстура бесшовная, то необходимо сохранять бесшовность всех карт, из которых состоит рельеф!
Читайте также: