Live Wallpaper Water Ripple Effect

Question

Sto lavorando a uno sfondo animato che incorpora alcuni effetti di ripple dell'acqua sullo schermo ma sono un po 'bloccato.

Sarebbe meglio creare più immagini e passarle in loop per creare un'animazione ripple o sarebbe meglio distorcere un po 'la bitmap prima di posizionarla sulla tela?

This è un video di un effetto di ripple molto piacevole eseguito tramite OpenGL.

Non ho ancora esperienza con OpenGL e mi chiedevo se è ancora possibile creare un effetto acqua 2D sullo sfondo animato?

Answer 1

ho voluto implementato un effetto a catena realistico in Android troppo, in modo da condividere la mia esperienza:

Come un'implementazione di riferimento ho preso la porta Chikuyonok JavaScript di Sergey di Neil Wallis Java algo. Ecco un parco giochi dove è possibile sperimentare con il codice JS originale: http://jsfiddle.net/esteewhy/5Ht3b/6/

All'inizio, ho portato il codice JS in Java solo per rendermi conto che non c'è modo di spremere più di 1 fps sul mio hardware Huawei U8100. (Ci sono diversi tentativi simili in rete con la sola conclusione: sono ridicolmente lenti).

BTW, questa risposta SO è stata molto utile per ottenere una conoscenza di base su come codificare una grafica interattiva in Android: https://stackoverflow.com/a/4946893/35438. Ho preso in prestito il contatore dei fps da lì.

Quindi ho deciso di provare Android NDK per reimplementare algo originale in puro C (il mio primo incontro con esso in 10+ anni!). Nonostante i documenti di NDK siano un po 'confusi (soprattutto per quanto riguarda requisiti e prerequisiti), tutto ha funzionato come un incantesimo, quindi sono stato in grado di raggiungere fino a 30 fps - potrebbe non essere troppo impressionante, ma comunque, un miglioramento radicale rispetto al codice Java .

Infine, ho messo online tutto il mio lavoro: https://github.com/esteewhy/whater, quindi sentitevi liberi di giocare con quello.Esso contiene:

1. Codice di palla di rimbalzo interattivo menzionato sopra (solo per il riferimento).
2. Increspatura dell'acqua Porta Java (lento come l'inferno!)
3. Implementazione di acqua increspata C (richiede NDK da compilare e JDK per creare il file .h).

(Il progetto non è "pulita", vale a dire: tutti i file binari sono lì, così può provare a farlo funzionare "così come sono", anche senza NDK.)

Answer 2

Non sono esperto in questo, ma credo che il modo tipico per eseguire gli effetti dell'acqua in OpenGL sia con un frammento shader. Con un'immagine statica come trama, lo shader può variare le coordinate della texture utilizzate per il campionamento di quell'immagine, per distorcerlo in modi arbitrari.

Calcolare la direzione e la distanza del pixel dal centro del cerchio e regolare la coordinata della trama verso o lontano dal centro del cerchio in base a una funzione sinusoidale della distanza e si dovrebbe ottenere un piacevole effetto a catena.

A giudicare dalla descrizione di quel video di YouTube che hai collegato, sembra che sia fatto usando una griglia di triangoli e regolando le coordinate della trama solo sui vertici. Anche questo dovrebbe funzionare, ma non sembrerà buono a meno che non si usi una griglia piuttosto fine. L'applicazione per pixel con un framment shader è l'ideale, ma non so se ciò potrebbe causare problemi di prestazioni nella GPU di un telefono.

Answer 3

È possibile trovare un esempio di un effetto a catena tocco qui:

https://github.com/MasDennis/RajawaliExamples

Utilizza il Rajawali OpenGL ES quadro/biblioteca. Puoi scaricare l'app di rajawali dal mercato per vedere come appare. Sfoglia la cartella "src" e vedrai l'attività e il renderer TouchRippleEffect. Spero possa aiutare.