Profil de surface de plan d'eau 2D

J'essaie de créer l'effet de l'épaisseur de la surface de l'eau avec un shader de vertex-fragment.

Je suis dans un environnement de jeu 3D mais c'est une vue de défilement donc une vue "2D". Voici un bon tutoriel pour créer un tel effet en 2D réel en utilisant un fragment shader.
Mais cela ne peut pas être utilisé dans mon cas, je pense. Pour l'instant je n'ai qu'un avion où j'applique la réfraction.

$réfraction$

Et je veux appliquer l'effet d'épaisseur de l'eau. Mais je ne sais pas comment faire.
Je n'essaye pas de créer une déformation / déplacement de l'eau en utilisant le sommet pour le moment, ce n'est pas le point.

Je ne sais pas si c'est possible avec un simple quad, peut-être devrais-je utiliser un objet comme celui-ci.

système

Voici quelques exemples.

rayman

Je n'ai aucune idée de comment créer cet effet.

Merci beaucoup !

[ EDIT ] Ajout de l'effet d'eau Rayman pour avoir une meilleure référence de l'effet.

— Tapis
source

Comment faites-vous actuellement votre effet sur l'eau? Si la première capture d'écran de la publication est la vôtre, il semble que vous dessinez un quadrillage 2D sur la scène, avec un shader qui la déforme. Si c'est correct, pourquoi ne pouvez-vous pas suivre les instructions du didacticiel, qui est également basé sur l'utilisation d'une texture 2D déformée?

— Nathan Reed

J'ai un quad 3D avec un shader de vertex-fragment qui déforme l'arrière-plan (l'arrière-plan est capturé par la fonctionnalité Unity GrabPass). Je ne pense pas que l'utilisation d'une texture 2D soit une bonne idée, je pensais à quelque chose de plus générique avec des paramètres personnalisables mais il semble qu'il n'y ait pas d'autre moyen ... et ce serait plus lent non?

— MaT

Ayez une valeur dans le shader qui spécifie l'humidité. Plus petit que 0 signifie air, plus grand que 1 signifie eau et entre les deux signifie ménisque.

Voici un pseudo code:

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
}

C'est le plus simple que je puisse faire. Si c'était moi, je ferais quelque chose d'un peu plus compliqué pour antialiaser le ménisque et y appliquer plus de réfraction ou quelque chose, mais je ne peux pas vous dire quoi car cela prendrait des itérations esthétiques. De plus, je teinterais et brouillerais l'échantillon d'eau. Mais je vous laisse tout ça.

— DaleyPaley
source

Oui, c'est une bonne idée! Je suis totalement d'accord sur le flou et la teinte. J'ajoute également un gradient de profondeur (Y) (peut-être un autre gradient de profondeur (Z)). Je devrais également ajouter un effet de réfraction différent dans la zone du ménisque, mais pour l'instant j'essaie d'avoir un effet d'entraînement comme dans Rayman. Mais je ne sais pas comment. Je devrais peut-être utiliser différentes textures pour que le ménisque ait cet effet en double. Je ne sais pas si tu vois ce que je veux dire.

— MaT