Создание материалов Blend4Web. Кожа и стекло

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

Работа с эффектом Френеля

Известно, что не все материалы равномерно отражают окружающее пространство и это зависит от угла зрения. К ним относятся: кожа, дерево, пластик, резина и другие.

Материал кожи с эффектом Френеля

Наиболее простым примером может служить материал кожи из нашей библиотеки. Рассмотрим его создание.

Упрощенное ядро материала кожи

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

Здесь есть карта нормалей (1) для имитации неровностей кожи, где альфа-канал текстуры содержит черно-белую базовую текстуру. В дальнейшем она окрашивается в нужный цвет с помощью ноды ColorMix (4). Таким образом, мы экономим трафик пользователей.

Главная особенность данного материала в том, что используется нода Fresnel (3), которая позволяет получить маску смешивания из кубической карты отражения (2) и базового цвета материала (4).

Для регулирования бликовой части используется карта Specular, которая создана на основе черно-белой маски. Посмотрите видео создания ядра материала кожи.

Прозрачность и отражение

Материал стекла из библиотеки Blend4Web

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

Упрощенное ядро материала стекла

В основе материала стекла находится кубическая карта отражения (1), которая слегка подкрашивается в зеленый цвет (4). Для воссоздания реалистичных бликов здесь используется простая текстура Matcap (2). Эффект Френеля подается на вход ноды Material и таким образом обеспечивается неоднородная прозрачность, которая зависит от угла зрения.

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

Прозрачность и преломление

Материал рифлёного стекла из библиотеки Blend4Web

Давайте рассмотрим способ создания рифлёного стекла, где используется прозрачность с преломлением. Для создания эффекта преломления требуется специальная нода, которая была разработана нашей командой.

B4W_Refraction - специальная нода Blend4Web

Все, что от вас требуется — это подключить ко входу ноды B4W_Refraction нормали геометрии или карту Normal Map. Степень преломления указывается числовым значением. К сожалению, действие этой ноды видно только во вьюпорте Blend4Web.

Материал с прозрачностью использующий ноду Refraction

На рисунке выше, вы видите работу ноды Refraction в чистом виде. Чтобы получить более значимый результат требуется подключить карту нормалей.

Материал с прозрачностью использующий карту нормалей

Теперь, благодаря карте нормалей, видно, как изменяются контуры объектов внутри шара. Для полного воссоздания эффекта стекла не хватает отражений с эффектом Френеля.

Материал с прозрачностью использующий карту нормалей и отражение с эффектом Френеля

Стекло выглядит уже лучше, так как присутствует отражение и это подчеркивает неровность поверхности. Но, если подмешать цвет к результату преломления, то мы получим уже цветное стекло.

На рисунке ниже показан окончательный вариант ядра материала. Цвет был создан при помощи ноды ColorMix и пары математических узлов для регулирования маски Френеля.

Материал с добавлением цвета к прозрачности

В следующий раз мы поговорим о создании многослойных материалов.