Вступление
В этом уроке я расскажу о создании фотореалистичных материалов и окружения на примере солнцезащитных очков.
В процессе прочтения статьи я настоятельно рекомендую открыть blend файл этой сцены, и рассматривать описанные моменты непосредственно в Blender. Файл сцены вы можете найти в бесплатном дистрибутиве Blend4Web SDK по следующему пути: blend4web/blender/tutorials/sunglasses/sunglasses.blend.
Ниже один под другим располагаются референсное изображение и интерактивная вкладка с получившейся моделью.
Подготовка модели
Начнем рассказ с готовой высокополигональной модели очков. Представив конечную сцену, я решил, что необходимо сделать среднеполигональную модель (через ретопологию высокополигональной модели) и последующее редактирование нормалей.
Изображение 1. Высокополигональная модель.
Редактирование нормалей в некоторых случаях может избавить вас от необходимости использовать карту нормалей. Недостаток этого метода в том, что для редактирования нормалей требуется больший полигонаж. Поэтому каждая отдельная сцена всегда требует решения вопроса, какой из вариантов выбрать. В данной сцене, для «глобального» влияния на нормали, я использовал редактирование нормалей, для «локального» влияния — карты нормалей.
Изображение 2. Карты нормалей.
В тех случаях, когда я редактирую нормали на большом количестве поверхностей, я использую приём, который может сэкономить много времени, особенно если после редактирования нормалей приходится редактировать меш. Я создаю копию объекта и удаляю полигоны, которые оказывают ненужное мне влияние на нормали поверхности:
Изображение 3. Редактирование нормалей
1. Основная модель с нередактированными нормалями.
2. Вспомогательная модель, у которой удалены полигоны, искажающие направление нормалей остальной поверхности (полигоны фасок).
3. Основная модель, на которую были скопированы направления нормалей вспомогательной модели с помощью инструмента Copy From Mesh.
Модель готова, можно приступить к развёртке.
Развёртка
Прежде чем разворачивать модель, желательно учесть некоторые особенности фреймворка Blend4Web. На одном меше может быть не более двух UV развёрток и, что еще более важно, карты нормалей используют первый слой развертки в списке. Двух развёрток вполне хватает для сцен любой сложности. Обычно одну из разверток я использую для запекания различных карт, а другую для повторяющихся («тайловых») текстур.
Изображение 4. Развёртка для запекания.
Изображение 5. Развёртка для «тайловых» текстур.
Текстуры
В этой сцене по первой развёртке я запёк и наложил только текстуру взаимного затенения (ambient occlusion).
Изображение 6. Текстура взаимного затенения (ambient occlusion).
Лейбл «LV» на очках присутствует в двух видах - в виде тиснения на крайнем ребре оправы и в виде прозрачной надписи в углу одной из линз. Поэтому я объединил карту нормалей, которая используется для имитации тиснения, и чёрно-белую маску, которая будет делать прозрачную надпись в углу линзы.
Изображение 7. Карта нормалей с маской в альфа-канале.
Изображение 8. Так это выглядит в движке.
Карта нормалей участков, покрытых кожей, предельно простая, поэтому перейдем к более сложной matcap-текстуре золота.
Изображение 9. Matcap текстура.
Данное изображение можно использовать в качестве matcap-текстуры.
Подобное изображение легко получить в Blender. Я сделал это средствами Cycles.
Изображение 10. Сцена для создания matcap текстуры.
1. Вид из камеры на 3D модель сферы. 2. Нодовый материал сферы. 3. Изображение сферической панорамы. 4. Нодовый материал окружения (обработка сферической панорамы) 5. Окно нодового композитинга.
Процесс:
1. Икосфера с большим значением subdivision.
2. Материал икосферы:
Glossy BSDF позволяет материалу отражать окружение
Розовый цвет задаст оттенок отражаемому окружению
Шероховатость скроет ненужные детали сферической панорамы
Layer Weight - с помощью этой ноды и ноды Emission сфера подсвечивается по краям
3. Изображение сферической панорамы, взятое с замечательного сайта hdrlabs.com
4. Материал окружения :
Здесь стоит отметить только участок выделенный жёлтой рамкой. Эта последовательность нод в данном случае позволяет получить тёмные пятна, не выбивающиеся из цветовой схемы.
5. В композитинге с помощью ноды Inpaint прозрачный фон заливается цветом объекта. НодаInpaint дает примерно такой же эффект, как параметр margin в меню Bake.
Цвет вершин
Ещё один важный момент: цвет вершин (vertex color, VC). Обычно (и в этой сцене тоже) я использую его для создания различных масок. Вариации масок, которые можно сделать, используя разные каналы цвета вершин, возможно описать только в отдельном уроке, поэтому сейчас я просто покажу, как VC используется в этой сцене. При описании материалов я наглядно покажу, на что влияют эти цвета.
Изображение 11. Цвет вершин определяет маски.
Материалы: золото
Изображение 12. Нодовая структура материала золота.
Для начала стоит сказать, что выход Normal ноды Geometry без преобразования нодой VECTOR_VIEW работает как нейтральный цвет на карте нормалей, то есть никак не воздействует на нормали. Чтобы карта нормалей с логотипом «LV» накладывалась только на внешнее ребро оправы, я использую как маску красный канал VC. Соответственно в ноде Mix (1) маска подключается во вход Fac. Таким образом, получается, что во вход Color1 надо подать выход Normal ноды Geometry, а во вход Color2 - карту нормалей. Результат можно увидеть на изображении 8.
Изображение 13. Воздействие на нормали.
Обратите внимание на левую часть изображения: условно мы видим объект плоско развёрнутым, поэтому направление нормалей в каждой точке будет одинаковым. То есть по осям XYZ (соответственно каналам RGB в цвете) нет никаких смещений, и цвет поэтому нейтральный, светло-синий, как в кадре 1. На кадре 2 серым цветом выделена область модели, на которую назначен интересующий нас материал золота. На кадре 3 видно, что текстура, подключенная во вход Color2ноды Mix, задаёт смещение нормалям по VC маске. На кадре 4 показана попытка задать направление нормалям, подставив необходимый цвет во вход Color1 ноды Mix. Видно, что такой вариант не подойдёт, и правильно будет подключить в Color1 выход Normal ноды Geometry. Результат виден на кадре 5: вся поверхность с материалом золота будет гладкой, кроме тонкой полоски, на которой нормали будут создавать эффект тиснения логотипа «LV».
Материалы: кожа
Изображение 14. Разделение по маске разных параметров наложения текстуры.
Изображение 15. Маскирование швов.
Здесь стоит отметить только маски. В этом материале используется два канала VC (изображение 11). Красный, для того чтобы использовать разные параметры ноды Mapping на дужках и на мостике (изображение 14). Зелёный канал используется для того, чтобы замаскировать швы размноженной карты нормалей кожи (изображение 15).
Кроме масок VC я использовал также обычные текстурные маски. На изображении 16 в левой части показана итоговая текстура, в правой части - красный (R) и зелёный (G) каналы по отдельности. Как использовался красный канал вы можете видеть на изображении 17.
Изображение 16. Две разные текстуры в разных каналах одного изображения.
Также в этом материале используется довольно необычная маска, построенная в основном при помощи математических нод. Как можно видеть на изображении 17, эта маска «подрезает» размноженную текстуру в нужных местах. Нодовая структура этой маски находится в красном нодовом блоке материала кожи (изображение 18).
Изображение 17. Воздействие процедурной маски.
Изображение 18. Процедурная маска.
Материалы: стекло
Изображение 19. Основные элементы материала линз.
На изображении 19 показаны основные элементы материала: 1 – маска прозрачности, 2 – цвет. По маске 1 цвет в прозрачных местах убирается. За нодой Extended Material (3) добавляются искусственные блики с помощью matcap-текстуры.
Прочие материалы
Материал носоупоров достаточно простой и описывать его подробно не имеет смысла. Стоит только отметить, что тип прозрачности для материалов линз и носоупоров выбран Alpha Sort, так как он позволяет корректно отображать перекрывания одних прозрачных поверхностей с другими (за счет производительности).
Окружение
Окружение в этой сцене я сделал следующим образом:
Изображение 20. Создание окружения.
Создал куб, добавил грань посередине и закрыл эту грань полигоном: получился куб с полигоном внутри. Далее я сориентировал нормали так, чтобы можно было видеть объект, лежащий на внутреннем полигоне, через ближние стенки куба. При этом задние стенки служат фоном.
Изображение 21. Материал куба окружения.
Материал окружения используется, в основном, только для того, чтобы отобразить запечённую тень. Изображение тени берётся из зелёного канала текстуры, представленной на изображении 16.
Эффект виньетирования (не показан)
Эффект виньетирования использовался в демо с вертолетом для фокусирования внимания на объекте. В последний момент было решено отказаться от него, т.к. он плохо сочетался с белым фоном сайта.
Для достижения этого эффекта я создал плоскость и сделал ей развёртку инструментом Unwrap. После чего привязал эту плоскость к камере (Ctrl+P > Object) и выровнял её положение по локальным координатам камеры (Alt+P > Clear Parent Inverse). Далее в режиме редактирования я отодвинул плоскость на такое расстояние, на котором она не будет вырезаться параметром камеры Clipping.
Материал при этом предельно простой и нужен лишь для того, чтобы создать круглую область прозрачности в центре плоскости. Нодовое дерево этого материала можно увидеть на изображении 22.
Изображение 22. Виньетка.
Вот и все, спасибо за внимание.
Изменения
[2014-11-21] Изначальная публикация.
[2015-04-20] Обновлена ссылка на Github.
[2015-09-17] Иллюстрации изменены в связи с обновлением интерфейса.
[2016-06-03] Исправлена ссылка на документацию.
[2017-01-12] Небольшие правки текста.
