J'implémente actuellement un jeu avec une vue de haut en bas de l'océan. J'utilise ce qui suit, une petite texture abstraite:

La texture réelle est transparente, j'ai ajouté la couleur verte pour plus de clarté.

Le problème que j'ai maintenant, c'est que je ne sais pas comment animer cette texture pour que l'eau soit belle. J'ai essayé de déplacer la texture avec une vague de péché texture.y += sin(angle). Bien sûr, maintenant toute la texture bouge, ce qui semble irréaliste. La prochaine chose que j'ai essayée est d'ajouter un autre calque et d'implémenter un effet de parallaxe. De sorte que les réflexions sous la surface de l'eau se déplaceraient également, mais beaucoup plus lentement. Ça a l'air un peu mieux mais toujours pas ... assez sympa.

Je pense que la meilleure animation serait, si les cellules individuelles se dilataient et se contractaient, un peu comme une toile ou un morceau de tissu. Imaginez que quelqu'un tire légèrement sur un sommet de ces cellules et que la cellule voisine se dilate et que la cellule vers laquelle je tire (ou pousse) se contracte. Un peu comme un réseau de ressorts (?). Mais je ne sais pas comment implémenter quelque chose comme ça:

• Quel est le modèle mathématique pour cela? Quelque chose avec des ressorts, où les forces poussent / tirent?
• Et si oui, comment mapper ce modèle à la texture donnée? Garder toutes les courbes et quoi non ...

(Je suis également ouvert à différentes idées / réponses sur la façon d'animer la texture donnée. Le réalisme n'est pas le point ici, juste une belle eau comme des mouvements ...)

Solution de DMGregory

J'ai posté un exemple de libgdx dans ce post: l'animation de l'eau 2D est irrégulière et non fluide (voir la réponse sur le filtrage des textures)

Une méthode courante consiste à utiliser une recherche de texture indirecte dans le shader pour déformer la texture d'affichage:

Ici, j'utilise une texture avec un peu de bruit de couleur à basse fréquence (mosaïque de taches lisses de couleurs aléatoires) et je la fais défiler sur la géométrie de l'affichage au fil du temps.

Au lieu de dessiner les couleurs de cette texture, je prends plutôt les canaux rouge et vert et je les soustrais 0.5fpour les transformer en un vecteur 2D pseudo-aléatoire qui change en douceur dans le temps et l'espace.

Je peux ensuite ajouter un petit multiple de ce vecteur à mes coordonnées UV, avant d'échantillonner à partir de la texture principale de l'eau. Cela déplace la partie de la texture que nous lisons et affichons, la déformant.

En faisant la moyenne de deux échantillons de ce bruit, en faisant défiler dans des directions opposées, nous pouvons masquer la direction du mouvement pour qu'elle ressemble à un ballottement sans but.

Dans Unity, le shader ressemblerait à ceci - il devrait être assez simple pour traduire dans la langue du shader de votre choix:

fixed4 frag (v2f i) : SV_Target
{               
    float2 waveUV = i.uv * _NoiseScale;
    float2 travel = _NoiseScrollVelocity * _Time.x;

    float2 uv = i.uv;
    uv += _Distortion * (tex2D(_Noise, waveUV + travel).rg - 0.5f);
    waveUV += 0.2f; // Force an offset between the two samples.
    uv += _Distortion * (tex2D(_Noise, waveUV - travel).rg - 0.5f);

    // Sample the main texture from the distorted UV coordinates.
    fixed4 col = tex2D(_MainTex, uv);

    return col;
}

C'est ce qu'on appelle un effet caustique, et la génération de ces effets au moment de l'exécution prend assez de temps, donc cela se fait traditionnellement avec une animation image par image pré-rendue. Il existe des outils qui généreront des images d'animation caustiques pour vous, comme Caustics Generator , qui a une version gratuite pour une utilisation non commerciale. Il existe également des modèles prédéfinis que vous pouvez acheter pour beaucoup moins cher que la version professionnelle de l'outil que j'ai mentionnée.

Notez que les effets caustiques sont également généralement un effet appliqué comme un cookie léger sur un terrain sous-marin ou sur la surface sous-marine. Autrement dit, le mettre à la surface de l'eau tout en regardant vers le bas n'est pas normalement à quoi ressemble l'eau.

Cela ressemble à une texture que vous pourriez générer à partir d'un graphique voronoi, par exemple:

Vous pouvez apporter de petits ajustements fluides au graphique en déplaçant les points; redessiner le graphique chaque image serait assez cher, vous voudrez donc probablement pré-rendre l'animation.

Il existe une méthode oldschool, impliquant une couche de texture inférieure et deux demi-textures transparentes pour la réflexion sur le dessus.

Si vous voulez aller jusqu'au bout et que l'eau ne semble pas pleine de vagues clonées ou de cartes de flux de soupe bleu samish, c'est le but.

https://steamcdn-a.akamaihd.net/apps/valve/2010/siggraph2010_vlachos_waterflow.pdf