2D профіль верхньої поверхні води

Я намагаюся створити ефект товщини поверхні води шейдером вершини-фрагмента.

Я перебуваю в 3D-ігровому середовищі, але це перегляд прокрутки, тобто "2D". Ось хороший підручник по створенню такого ефекту в реальному 2D за допомогою фрагмента шейдера.
Але в моєму випадку це не можна використовувати. На даний момент у мене тільки площина, якщо я застосовую заломлення.

заломлення

І я хочу застосувати ефект товщини води. Але я не знаю, як це зробити.
Я не намагаюся створити деяку деформацію / зміщення води, використовуючи вершину на даний момент, це не сенс.

Я не знаю, чи можливо це за допомогою простого квадрата, можливо, я повинен використовувати такий предмет.

система

Ось кілька прикладів.

промінь

Я не маю уявлення про те, як створити цей ефект.

Дуже дякую !

[ EDIT ] Доданий ефект Rayman для кращого погляду на ефект.

— MaT
джерело

Як ви зараз робите свій водний ефект? Якщо перший скриншот у публікації ваш, це виглядає так, що ви малюєте двовимірний квадроцикл над сценою, із шейдером, який спотворює його. Якщо це правильно, чому ви не можете дотримуватися вказівок підручника, який також заснований на використанні спотвореної 2D текстури?

— Натан Рід

У мене є 3D-квадроцикл із шейдером вершин-фрагментів, який спотворює фон (фон знімається функціональністю Unity GrabPass). Я не думаю, що використання 2D текстури є гарною ідеєю, я думав про щось більш загальне з параметрами, що зберігаються, але, здається, іншого шляху немає ... і це буде повільніше, ні?

— MaT

Мають значення в шейдері, яке визначає вологість. Менше 0 означає повітря, більше 1 означає воду, а між ними означає меніск.

Ось псевдокод:

vec2 uv2 = bigWaves(uv); // modify the texture coords to create a wavy water effect
float wetness = (uv2.y - 0.1) * 100;

if( wetness<0.0 )
{
    gl_Fragment = texture2D(screen_texture,uv); // is air - no refraction or effect
}
else if( wetness>1.0 )
{
    vec2 uv3 = smallWaves(uv2); // modify the texture coords to create a ripply water effect
    gl_Fragment = texture2D(screen_texture,uv3); // is water - with refraction
}
else
{
    gl_Fragment = vec4(1,1,1,1); // solid white meniscus
}

Це найпростіше, що я можу зробити. Якби я був, я би зробив щось трохи складніше, щоб антиаліазувати меніск і застосував би там більше рефракції, але я не можу сказати тобі, бо це потребує естетичних ітерацій. Також я б тонізував і розмивав зразок води. Але все це я залишу вам.

— DaleyPaley
джерело

Так, це гарна ідея! Я повністю погоджуюся щодо розмитості та відтінку. Я також додаю градієнт глибини (Y) (можливо інший градієнт глибини (Z)). Я повинен додати інший ефект заломлення в зоні меніска, але на даний момент я намагаюся мати ефект пульсації, як у Реймана. Але я не знаю як. Можливо, я повинен використовувати різні текстури для меніска, щоб мати цей подвійний ефект. Я не знаю, чи знаєте ви, що я маю на увазі.

— MaT