Ich implementiere derzeit ein Spiel mit einem Top-Down-Blick auf den Ozean. Ich benutze folgende, ein wenig abstrakte Textur:

Die eigentliche Textur ist transparent, ich habe der Klarheit halber die grünliche Farbe hinzugefügt.

Das Problem, das ich jetzt habe, ist, dass ich nicht weiß, wie ich diese Textur animieren soll, damit das Wasser schön aussieht. Ich versuchte , die Textur mit einer Sinuswelle zu bewegen: texture.y += sin(angle). Natürlich bewegt sich jetzt die gesamte Textur, was irgendwie unrealistisch aussieht. Als nächstes habe ich versucht, eine weitere Ebene hinzuzufügen und einen Parallaxeeffekt zu implementieren. Damit würden sich auch Reflexionen unter der Wasseroberfläche bewegen, allerdings viel langsamer. Es sieht ein bisschen besser aus, aber immer noch nicht ... nett genug.

Ich denke, die am besten aussehende Animation wäre, wenn sich die einzelnen Zellen ausdehnen und zusammenziehen würden, wie ein Netz oder ein Stück Stoff. Stellen Sie sich vor, jemand würde an einem Scheitelpunkt dieser Zellen leicht ziehen und die benachbarte Zelle würde sich ausdehnen und die Zelle, zu der ich ziehe (oder die ich drücke), würde sich zusammenziehen. Ein bisschen wie ein Federnnetz (?). Aber ich habe keine Ahnung, wie ich so etwas implementieren soll:

• Was ist das Mathe-Modell dafür? Etwas mit Federn, wo Kräfte drücken / ziehen?
• Und wenn ja, wie ordne ich dieses Modell der angegebenen Textur zu? Alle Kurven behalten und was nicht ...

(Ich bin auch offen für verschiedene Ideen / Antworten, wie man die gegebene Textur animiert. Hier geht es nicht um Realismus, sondern nur um ein paar gut aussehende Bewegungen, die wie Wasser aussehen ...)

Lösung von DMGregory

Ich habe in diesem Beitrag ein libgdx-Beispiel gepostet: 2D-Wasseranimation ist gezackt und nicht glatt (siehe Antwort zur Texturfilterung)

Eine übliche Methode ist die Verwendung einer indirekten Texturensuche im Shader, um die Anzeigetextur zu verzerren:

Hier verwende ich eine Textur mit niederfrequentem Farbrauschen (Kacheln von glatten Blobs mit zufälligen Farben) und bewege sie über die Anzeigegeometrie im Laufe der Zeit.

Anstatt die Farben von dieser Textur zu zeichnen, nehme ich stattdessen die roten und grünen Kanäle und subtrahiere sie 0.5f, um sie in einen pseudozufälligen 2D-Vektor zu verwandeln, der sich über Zeit und Raum hinweg reibungslos ändert.

Ich kann dann ein kleines Vielfaches dieses Vektors zu meinen UV-Koordinaten hinzufügen, bevor ich von der Hauptwassertextur eine Probe nehme. Dies verschiebt den Teil der Textur, die wir lesen und anzeigen, und verzieht ihn.

Durch Mitteln von zwei Abtastwerten aus diesem Geräusch, die in entgegengesetzte Richtungen scrollen, können wir die Bewegungsrichtung verbergen, so dass es wie zielloses Schwappen aussieht.

In Unity würde der Shader so aussehen - er sollte einfach genug sein, um in die Shader-Sprache Ihrer Wahl übersetzt zu werden:

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;
}

Dies wird als ätzender Effekt bezeichnet, und das Erzeugen dieser Effekte zur Laufzeit ist ziemlich zeitaufwendig. Daher wird dies traditionell mit vorgerenderten Einzelbildanimationen durchgeführt. Es gibt Tools, die ätzende Animationsrahmen für Sie erstellen , wie z. B. Caustics Generator , der eine kostenlose Version für nichtkommerzielle Zwecke enthält. Es gibt auch einige vorgefertigte, die Sie für deutlich günstigere Preise als die von mir erwähnte Pro-Version des Tools kaufen können.

Beachten Sie, dass ätzende Effekte in der Regel auch ein Effekt sind, der als leichter Keks auf einem Unterwassergelände oder auf der Unterwasseroberfläche angewendet wird. Das heißt, es auf die Oberfläche des Wassers zu legen, während man hineinschaut, ist normalerweise nicht so, wie Wasser aussieht.

Dies sieht aus wie eine Textur, die Sie aus einem Voronoi-Diagramm generieren könnten, z.

Sie können kleine, sanfte Anpassungen am Diagramm vornehmen, indem Sie die Punkte verschieben. Das erneute Zeichnen des Graphen in jedem Frame ist sehr teuer. Daher möchten Sie die Animation wahrscheinlich vorab rendern.

Es gibt eine Oldschool-Methode, die eine untere Texturebene und zwei halbtransparente Texturen für die Reflexion darüber umfasst.

Wenn Sie den ganzen Weg gehen möchten und das Wasser nicht voller geklonter Wellen oder samischblauer Suppen aussehen soll, sind Flowmaps das richtige Ziel.

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