Автор:Христофер Олбелун

Перевод: FACH

Оригинал: http://www.chrisalbeluhn.com/UT3_Water_Reflection_Tutorial.html

 

Этот водный материал будет отражать все вокруг, так же становится более прозрачным на мелкой глубине и изменять цвет. Это – материал (шейдер), нет никакой деформации в геометрии водной поверхности. Также я должен отметить, что, так как этот шейдер построения теней, все будет подключено к 'emmisive' каналу материала, что идеально для сцены.

 

Сначала нам нужна готовая сцена, чтобы работать с ней. В ней должно быть:

 

* Skybox

* Яма для воды (достаточно большая и глубокая, чтобы был заметен эффект изменения прозрачности)

* Некоторая геометрия (лучше ландшафт)

* Освещение

* Обработка ПостПроцессом (не обязательно, но придаст воде оттенок атмосферы),

 

Это моя сцена без воды.

 

 

 

Чтобы добавить воду, я создал плоскость из BSP. Я использовал эту геометрию, потому что у нее можно легко редактировать UV координаты (масштабировать, перемещать, поворачивать). Конечно в конце лучше сделать ее StaticMesh’ом.

 

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

 

 

 

На этом скриншоте, моя плоскость - черная, чтобы видеть, где она пересечется с ландшафтом (лучше включить режим Toggle Brush Polygons и в реальном времени перемешать строительный браш, чем каждый раз перекомпилировать BSP). Найдите высоту, которая устроит Вас. Это, конечно, можно изменить позже, но если это сделать сейчас, у нас отражение на поверхности будет не искажено.

 

 

 

 

Добавим «зеркальный» актор, для отражения. Этот актор сохранит отражение с поворотом в изображение.

 

 

 

Я разбил материал на 9 главных разделов с описанием того, что они делают.

 

Разделы следующие:

 

Waves (Волны): тут создается эффект волн.

 

Reflection (Отражение): тут normal текстура добавляется к reflection, искажая отражение.

 

Wave Sparkles (Блики от волн): тут создаются блики. Это дополнение.

 

Add Highlights to the Waves (Создаем Эффект высоты Волны): тут мы добавим normal текстуру, чтобы создать светлые и темные области волн.

 

Desaturate Color (Цвет Обесцвечивания): это снизит интенсивность цвета немного.

 

Adds Contrast (Добавим Контраст): здесь мы выразим светлые и темные области. Делая это после 'desaturation', удаляться эффект градиента, который Вы можете видеть.

 

Add Colour to the Water Close to the Shore (Добавим Цвет к Воде у Берега): основанный на глубине воды (чем ближе к берегу) водный цвет изменится, я добавлю зеленый цвет.

 

У нас будет 2 дополнительные текстуры в материале.

 

 

 

 

Главное изображение – normal текстура ряби воды. Есть черно-белая альфа, для того, чтобы вращать воду в определенных разделах.

 

Текстура 'Dots' - блики воды.

 

 

 

Волны составлены одной и той же текстуры, добавленной сама к себе 3 раза, но в различных масштабах, создавая большие и маленькие волны. Наибольшая волна (1) добавлена к остальным, но также используется для сдвига следующей normal текстуры вниз, но только на определенное расстояние.

 

1. Эта normal с координатами 0.1, 0.1 (значения TexCoord); движение (Paner) 0.01, 0.01; альфа канал умножен (multiply) на 0.07

Эта normal умножена на 1.25, 1.25, 0

 

2. Эта normal с координатами 0.3, 0.3; движение -0.015, 0.006; вращение 0.25, 0.5, 0.025; альфа, которая была умножена на 0.07 в текстуре 1, подключена к значению 'Time'.

Эта normal умножена на 1.25, 1.25, 0

 

3. Эта normal с координатами 0.8, 0.5;  движение 0.03, 0.02

Эта normal умножена на 1, 1, 0

 

4. Эта normal с координатами 2, 2; движение -0.04, 0.03

 

Каждые умноженные узлы добавлены (Add) друг к другу, но конечная нормальная карта (4) не требует этого, так как у одной из текстур должен быть свой синий канал.

 

 

 

 
2. Сигнал Waves умножен на 0.035. Это умножение уменьшает интенсивность волн. Далее добавляем маску (Mask (R G)) на Красный и Зеленый каналы.

1. Тут установлены координаты CaptureReflectActor. Нам нужен «ScreenPos» (позиция экрана) с галочкой на Screen Align, узел и с маской на  Красном и Зеленом каналах, так как нам нужны только две оси. Это добавлено к умножению волн, над которыми мы работали ранее. Мы маскировали Красный и Зеленый цвет, для добавления высоты к позиции экрана. Если Вы хотите, чтобы высота была больше - увеличьте константу, которая включена в умножение. Аналогично, чем меньше - тем более спокойные волны.

 

Так как мы добавляем информацию от одного узла до другого, это должно быть зафиксировано (ConstantClamp) и затем включено в текстуру. Теперь это включено в texture sample с отражением, но мы еще должны создать отражение от плоскости в сцене.

В Generic браузере, щелкните ПКМ и выберите ' New RenderToTexture '.

 

 

 

 

 

 

В этом окне настроим размер текстуры. Чем выше значения, тем больше мощности нужно для обработки. Если Вы хотите сделать отражение как в зеркале, то Вам нужна большая текстура, чтобы отражение было гладким, но с волнами изображение искажается, а мы, вообще, берем только цвета, по этому, нам хватит маленькой текстуры (256х256).

 

 

 

Теперь, выделите RenderToTexture, которую Вы только что создали в Generic браузере, выделите SceneCaptureReflectionActor, ранее помещенный в сцену, откройте его опции, найдите поле в SceneCaptureActor/SceneCapture/TextureTarget и нажмите на зеленую стрелку. Все что отразит ' SceneCaptureReflectionActor ' будет в ' RenderToTexture '. Мы создали текстуру размером X и Y. Но, обратите внимание на 'FrameRate'. По умолчанию частота кадров 1000, нужно понизить до 60 если, не ниже.

 

 

 

Раздел блеска на волнах

 

1. Мы должны умножить волну на 2 и затем пропустить только Красный канал и подключить его к каналу «B» Lerp.

2. Это с раздела отражения, который мы до этого создали. Обесцветим (desaturated) и умножим на 10. Это увеличивает более светлые области отраженного неба и так как оно обесцвечено, подключаем к каналу «Аlpha» Lerp.

 

Канал «А» Lerp должен быть черный (0). Это делает волны более заметными, где светлые области воды, а более темные области остаются черными.

 

3. Это - текстура 'Бликов' (Dots), с координатами 3.4, 3.4 и движением 0.01, 0.02

4. Это - то же самая, текстура, с координатами 2.2, 2.2 и движением -0.03,-0.01

 

Эти две текстуры умножены между собой. Получается, что когда две точки сойдутся, там будет белая вспышка. Это умножено на 255, чтобы увеличить интенсивность сияния. Фиксируем Lerp от (1) и (2), т.к. мы умножали различные текстуры и должны удостовериться, что они в пределе от 0 до 100 - черно-белые. Вставляем это в 'Альфу' Lerp, Блеск в канал B, и постоянную переменную (Constant) 0 в A.

 

 

' Wave Sparkles ' и раздел ' Reflection ' добавляем друг другу. Не изменяя, присоединяем к «А» Lerp, а к «В» умноженный на 0.8. 'Waves' должны быть умножены на 2, чтобы увеличить их интенсивность, замаскированную в Зеленом канале, и включить в альфу Lerp. Тут блики и волны соединяются вместе, и настраивается интенсивность волн, основанных на 'зеленом' канале normal. Если Вы хотите, чтобы волны были светлее или более темными, измените значение 0.8.

 

 

 

 

Lerp от, ' Add Highlights to the Waves ' раздела, должен быть Зафиксирован и Обесцвечен на 0.3. Далее подключаем в узел «Power» (Мощность) со значением 1.5, чтобы увеличить все значения минимумов и максимумов.

 

Прежде, чем мы продолжим, мы должны создать узлы 'Opacity' потому, что остальная часть emmisive программы требует этого.

 

 

 

Вы должны создать узел «Pixel Depth» (Глубина Пикселя) и умножить его на 0.01. Оно анализирует расстояние от плоскости до любой геометрии и меняет уровень прозрачности. Это подключаем к «Constant Clamp» (Постоянный Фиксатор) с установкой 0.8, 1. Постоянный фиксатор - в 'Альфу' «Depth Biased Alpha» (Альфа Смещение Глубины), а в  узел смещения (bias) - 0. У «Depth Biased Alpha» должно быть 'Bias Scale'  (Масштаб Смещения) 1000. Этот раздел определяет, глубину до чего-то, чтобы задать прозрачность. Все это идет в «альфу» Lerp с «А» 0.6 и «B» 1. Наконец, Вы можете включить это к 'Opacity' основного блока.

 

 

 

 

Чтобы завершить emmisive, мы должны добавить некоторый цвет для воды.

 

Если Вы подключите ' Constant Clamp' от раздела 'Opacity' в ' Depth Biased Alpha' узел со Смещением 0 и измените 'Bias Scale' на 5000, то это поместит цвет еще дальше от береговой линии. Вы должны будете замаскировать Красный канал (Mask (R)) и подключить в «Альфу» Lerp. Если Вы включаете узел 'Power' от, «Adds Contrast» в раздел  канала «B» lerp - это будет цветом для открытой воды. Затем Вы должны создать 'Constant 3 Vector' со значением, каким хотите. Более темное - лучше. Я использовал значения RGB 0, 0.005, 0.001. Готово, можно подключить к emmisive материала.

 

Чтобы создать искажение под водой, мы будем использовать normal текстуры, созданные в разделе 'Waves'.

 

 

 

Так как вода становится более поверхностной, мы нуждаемся в другой  'Depth Biased Alpha', чтобы задать расстояние от берега, где волны будут интенсивнее. Если Вы подключите 'Constant Clamp' от раздела 'Opacity' в альфу «Depth Biased Alpha», задайте  'Bias' 0 и 'Bias Scale' 250, это должно дать Вам хороший спад береговой линии. Это подключить к 'Альфе' lerp узла.

 

Затем нам нужно два умножения волн. Первые будут умножены на 0.5, 0.5, 1, а вторые на 2, 2, 1. Первые в A, (это - береговая линия, именно поэтому умножаем меньше, чтобы дать меньшее искажение), второе в B. Этот Lerp должен быть подключен в раздел «Distortion» (Искажения) нашего шейдера.

 

И наконец, specular highlights. Вы можете его создать, как Вам нравится, но я просто использовал постоянную 5 для specular и постоянную 15 для specular power. Для спецификаций, чтобы обнаружиться правильно, Вы должны включить Normal текстуры в 'Normal ' раздел, иначе вода будет казаться плоской не смотря на то, что мы сделали. У меня волны слишком большие, чтобы их уменьшить, я умножил их на 0.5, 0.5, 1. 

 

Самая последнее, нужно задать правильные параметры. Выберите свой шейдер и измените 'Blend Mode' на “BLEND_Translucent”. Также установите 'Translucent' ниже. В редакторе не будет виден материал, или он будет не верно работать, пока Вы не скомпилируете освещение.

 

Вот так делается довольно хорошее отражение.

 

Я надеюсь, что этот туториал помог!

А я (FACH) надеюсь, что не зря переводил!!!