Attualmente implemento un gioco con una vista dall'alto in basso sull'oceano. Uso il seguente, una piccola trama astratta:

La trama reale è trasparente, ho aggiunto il colore verde per chiarezza.

Il problema che ho ora è che non so come animare questa trama in modo che l'acqua abbia un bell'aspetto. Ho cercato di spostare la texture con un'onda peccato texture.y += sin(angle). Ovviamente ora l'intera trama si sta muovendo, il che sembra un po 'irrealistico. La prossima cosa che ho provato è di aggiungere un altro livello e implementare un effetto di parallasse. In modo che anche i riflessi sotto la superficie dell'acqua si muovessero, ma molto più lentamente. Sembra un po 'meglio, ma non ancora ... abbastanza carino.

Penso che l'animazione più bella sarebbe, se le singole celle si espandessero e si contraggessero, un po 'come una rete o un pezzo di stoffa. Immagina se qualcuno tirasse leggermente verso un vertice di queste celle e la cella vicina si espandesse e la cellula verso cui tiro verso (o spingendo) si contrarrà. Un po 'come una rete di molle (?). Ma non ho idea di come implementare qualcosa del genere:

• Qual è il modello matematico per questo? Qualcosa con le molle, dove le forze spingono / tirano?
• E se è così, come posso mappare questo modello sulla trama data? Mantenere tutte le curve e cosa no ...

(Sono anche aperto a diverse idee / risposte su come animare la trama data. Il realismo non è il punto qui, solo un po 'di acqua dall'aspetto gradevole come i movimenti ...)

Soluzione di DMGregory

Ho pubblicato un esempio di libgdx in questo post: l'animazione dell'acqua 2d è frastagliata e non liscia (vedi risposta sul filtro delle trame)

Un modo comune per farlo è usare una ricerca di trama indiretta nello shader per distorcere la trama di visualizzazione:

Qui sto usando una trama con un po 'di rumore di colore a bassa frequenza (piastrellatura di chiazze lisce di colori casuali) e la faccio scorrere attraverso la geometria del display nel tempo.

Invece di disegnare i colori da questa trama, prendo invece i canali rosso e verde e li sottraggo 0.5fper trasformarli in un vettore 2D pseudocasuale che cambia senza problemi nel tempo e nello spazio.

Posso quindi aggiungere un piccolo multiplo di questo vettore alle mie coordinate UV, prima di campionare dalla trama principale dell'acqua. Questo sposta la parte della trama che stiamo leggendo e visualizzando, deformandola.

Calcolando in media due campioni da questo rumore, scorrendo in direzioni opposte, possiamo nascondere la direzione del movimento in modo che appaia come una scarica senza scopo.

In Unity lo shader dovrebbe apparire così: dovrebbe essere abbastanza semplice da tradurre nella lingua dello shader che preferisci:

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

Questo è chiamato effetto caustico e la generazione di questi effetti in fase di runtime richiede abbastanza tempo, quindi tradizionalmente viene eseguita con l'animazione fotogramma per fotogramma pre-renderizzata. Esistono strumenti che generano frame di animazione caustici per te, come Caustics Generator , che ha una versione gratuita per uso non commerciale. Ci sono anche alcuni pre-made che è possibile acquistare a un prezzo significativamente più economico rispetto alla versione pro dello strumento che ho citato.

Si noti che gli effetti caustici di solito sono anche effetti applicati come un biscotto leggero su un terreno sottomarino o sulla superficie sottomarina. Cioè, metterlo sulla superficie dell'acqua mentre si guarda in basso non è normalmente l'aspetto dell'acqua.

Sembra una trama che potresti generare da un grafico voronoi, ad esempio:

È possibile apportare piccole e regolari regolazioni al grafico spostando i punti; ridisegnare il grafico ogni fotogramma sarebbe piuttosto costoso, quindi probabilmente vorrai pre-renderizzare l'animazione.

Esiste un metodo oldschool, che prevede un livello di trama inferiore e due trame semitrasparenti per la riflessione in alto.

Se vuoi andare fino in fondo e vuoi che l'acqua non appaia piena di onde clonate o samish blue soupmaps, le mappe di flusso sono l'obiettivo.

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