Фокусы рефракции

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

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

Радужная голова (кликните для просмотра сцены)

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

Итак, начну с наиболее наглядного примера. С помощью ноды рефракции создадим эффект дисперсии света. Для этого я сделал три нодовые группы рефракции, каждая из которых отвечает за свой цветовой канал. При этом в вектор подаются разные координаты для смещения изображения в каждом канале. Далее каналы объединяются с помощью ноды Combine RGB.

Нодовый материал для эффекта дисперсии света

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

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

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

Дождь (кликните для просмотра сцены)

Следующий эффект с использованием рефракции - создание дождя.

Первоначальная идея заключалась в создании стекла, на которое попадают капли дождя. Но со временем я решил создать подобие самого дождя. Этот эффект создается при помощи рефракции. Здесь нет ни отражений, ни прозрачности.

Нодовый материал дождя (кликабельно)

С помощью ноды времени (B4W_TIME) задаются направления движения (с разными скоростями) для двух текстур нормалей, которые дополнительно смешиваются по маске. Последняя также перемещается со своей скоростью, что в совокупности создает ощущение неравномерности потоков воды. Очень эффектно получилась рефракция дождя поверх вспышек молнии; они создаются с помощью движущейся текстуры, которая периодичности становится видимой.

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

Сюзанна (кликните для просмотра сцены)

И последняя демка - незамысловатая, но самая красивая из всей статьи: домашний натюрморт с банкой. Банка сделана по тому же принципу, но чуть сложнее из-за ее внутренней структуры. Я не буду повторно описывать создание стекла, а затрону другую важную тему — создание тени от прозрачного предмета.

Натюрморт с банкой (кликните для просмотра сцены)

Как бы ни хотели реалтаймовые веб-движки игнорировать тень от прозрачных объектов или пытаться сделать ее однородной, мы-то знаем, как она должна выглядеть на самом деле.

Итак, чтобы сделать тень от прозрачного объекта со свойствами Alpha Blend, Alpha Sort, Add, нужно использовать дубликат геометрии, но с другим типом прозрачности, а именно Alpha Clip, т.к. только у него есть хоть какая-то тень. Этим мы и воспользуемся.

Материал для тени от стекла.

Сначала возьмем наш прозрачный объект и сделаем его копию (можно с упрощенной топологией). Создадим новый материал Alpha Clip. Затем добавим подходящую тайловую текстуру шума. С помощью любых манипуляций (вертексные цвета, готовая текстура, векторные значения или математические преобразования) выполним неравномерное заполнение геометрии объекта этой текстурой. Причем, снизу должно быть плотнее, а сверху разреженней. Это даст мягкие, каскадные тени.

В разделе Shadow активируем Cast Only, а в настройках рендера сцены устанавливаем Blur Radius (Shadows -> Soft Shadows) на 3 или выше.

Вот и всё! Cупер-красивые тени от стекла готовы. И ни у одного другого веб-движка таких нет.

Тень от стекла

Продолжаю экспериментировать с рефракцией, скоро сделаю статью про создание жидкости в банке (рефракция в рефракции).

Жидкость в банке

Если у вас возникли какие-либо вопросы, задавайте их на форуме. Там же вы найдёте blend-файлы сцен, использованных в статье.