Profilo della superficie superiore dell'acqua 2D

Sto cercando di creare l'effetto dello spessore della superficie dell'acqua con uno shader di frammenti di vertici.

Sono in un ambiente di gioco 3D ma è una vista a scorrimento, quindi una vista "2D". Ecco un buon tutorial per creare tale effetto in 2D reale usando il framment shader.
Ma questo non può essere usato nel mio caso, penso. Per il momento ho solo un piano dove applico la rifrazione.

rifrazione

E voglio applicare l'effetto dello spessore dell'acqua. Ma non so come farlo.
Non sto cercando di creare una deformazione / spostamento dell'acqua usando il vertice per il momento, non è questo il punto.

Non so se sia possibile con un semplice quad forse dovrei usare un oggetto come questo.

sistema

Ecco alcuni esempi.

Rayman

Non ho idea di come creare questo effetto.

Molte grazie !

[ EDIT ] Aggiunto effetto acqua Rayman per avere un migliore riferimento dell'effetto.

— Stuoia
fonte

Come stai attualmente facendo l'effetto dell'acqua? Se il primo screenshot nel post è tuo, sembra che stai disegnando un quad 2D sulla scena, con uno shader che lo distorce. Se è corretto, perché non puoi seguire le istruzioni del tutorial, che si basa anche sull'utilizzo di una trama 2D distorta?

— Nathan Reed,

Ho un quad 3D con uno shader di frammenti di vertici che distingue lo sfondo (lo sfondo viene catturato dalla funzionalità Unity GrabPass). Non penso che usare una trama 2D sia una buona idea, stavo pensando a qualcosa di più generico con parametri personalizzabili, ma sembra che non ci sia altro modo ... e sarebbe più lento no?

— MaT

Avere un valore nello shader che specifica l'umidità. Più piccolo di 0 significa aria, maggiore di 1 significa acqua e tra un mezzo e l'altro menisco.

Ecco qualche pseudo codice:

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
}

Questo è il più semplice che posso farlo. Se fossi in me, farei qualcosa di un po 'più complicato per antialiare il menisco e applicare più rifrazione lì o qualcosa del genere, ma non posso dirti cosa perché ci vorrebbe iterazioni estetiche. Inoltre, colorerei e sfuocerei il campione d'acqua. Ma ti lascerò tutto questo.

— DaleyPaley
fonte

Sì, è una buona idea! Sono totalmente d'accordo su sfocatura e tinta. Sto anche aggiungendo un gradiente di profondità (Y) (forse un altro gradiente di profondità (Z)). Dovrei aggiungere un diverso effetto di rifrazione anche nella zona del menisco, ma per il momento sto cercando di avere un effetto a catena come in Rayman. Ma non so come. Forse dovrei usare diverse trame per il menisco per avere questo effetto duplicato. Non so se sai cosa intendo.

— MaT