Profil permukaan atas air 2D

Saya mencoba untuk membuat efek dari ketebalan permukaan air dengan shader vertex-fragment.

Saya berada dalam lingkungan permainan 3D tetapi ini adalah tampilan gulir sehingga tampilan "2D". Berikut ini adalah tutorial yang bagus untuk membuat efek seperti itu dalam 2D nyata menggunakan fragmen shader.
Tapi saya rasa ini tidak bisa digunakan dalam kasus saya. Untuk saat ini, saya hanya memiliki pesawat, saya menggunakan pembiasan.

pembiasan

Dan saya ingin menerapkan efek ketebalan air. Tetapi saya tidak tahu bagaimana melakukannya.
Saya tidak mencoba membuat deformasi air / perpindahan menggunakan titik untuk saat ini, ini bukan intinya.

Saya tidak tahu apakah itu mungkin dengan quad sederhana mungkin saya harus menggunakan objek seperti ini.

sistem

Berikut ini beberapa contohnya.

rayman

Saya tidak tahu bagaimana cara membuat efek ini.

Terima kasih banyak !

[ EDIT ] Menambahkan efek air Rayman untuk memiliki referensi efek yang lebih baik.

— Tikar
sumber

Bagaimana Anda melakukan efek air Anda saat ini? Jika tangkapan layar pertama di pos adalah milik Anda, sepertinya Anda menggambar quad 2D di atas layar, dengan shader yang mendistorsi itu. Jika itu benar, mengapa Anda tidak dapat mengikuti instruksi dalam tutorial, yang juga didasarkan pada penggunaan tekstur 2D yang terdistorsi?

— Nathan Reed

Saya memiliki quad 3D dengan shader vertex-fragment yang mendistorsi latar belakang (latar belakang ditangkap oleh fungsi Unity GrabPass). Saya tidak berpikir bahwa menggunakan tekstur 2D adalah ide yang baik, saya memikirkan sesuatu yang lebih umum dengan parameter yang dapat disesuaikan tetapi tampaknya tidak ada cara lain ... dan itu akan lebih lambat, bukan?

— MaT

Memiliki nilai dalam shader yang menentukan kebasahan. Lebih kecil dari 0 berarti udara, lebih besar dari 1 berarti air, dan di antaranya berarti meniskus.

Berikut ini beberapa kode semu:

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
}

Ini adalah yang paling sederhana yang bisa saya lakukan. Jika itu saya, saya akan melakukan sesuatu yang sedikit lebih rumit untuk antialias meniskus dan menerapkan lebih banyak pembiasan di sana atau sesuatu, tetapi saya tidak bisa memberi tahu Anda apa karena itu akan membutuhkan iterasi estetika. Juga, saya akan mewarnai dan mengaburkan sampel air. Tapi aku akan menyerahkan semuanya padamu.

— DaleyPaley
sumber

Ya, itu ide yang bagus! Saya sangat setuju tentang blur dan warna. Saya juga menambahkan gradien kedalaman (Y) (mungkin gradien kedalaman lain (Z)). Saya harus menambahkan efek pembiasan yang berbeda di zona meniskus juga, tetapi untuk saat ini saya mencoba untuk memiliki efek riak seperti di Rayman. Tapi saya tidak tahu caranya. Mungkin saya harus menggunakan Tekstur berbeda untuk meniskus agar memiliki efek duplikat ini. Saya tidak tahu apakah Anda tahu apa yang saya maksud.

— MaT