Live Wallpaper Wasser Ripple-Effekt

8

Ich arbeite an einem Live-Hintergrundbild, das einige Welleneffekte beim Berühren des Bildschirms beinhaltet, aber ich stecke ein wenig fest.

Wäre es besser, mehrere Bilder zu erstellen und sie zu durchlaufen, um eine Ripple-Animation zu erstellen, oder wäre es besser, die Bitmap ein wenig zu verzerren, bevor ich sie auf die Leinwand lege?

Dies ist ein Video mit einem sehr schönen Welleneffekt, der durch OpenGL erzielt wird.

Ich habe noch keine Erfahrung mit OpenGL und habe mich gefragt, ob es noch möglich ist, einen 2D Wassereffekt auf dem Live Wallpaper zu erstellen?

    
Gatekeeper 26.04.2012, 01:21
quelle

3 Antworten

16
___ answer10868565 ___

Hier finden Sie ein Beispiel für einen Touch-Ripple-Effekt:

Ссылка

Es nutzt das rajawali OpenGL ES Framework / Library. Sie können die Rajawali-Beispiele App vom Markt herunterladen, um zu sehen, wie es aussieht. Durchsuchen Sie den Ordner "src" und Sie werden die TouchRippleEffect-Aktivität und den Renderer sehen. Hoffe das hilft.

    
___ qstntxt ___

Ich arbeite an einem Live-Hintergrundbild, das einige Welleneffekte beim Berühren des Bildschirms beinhaltet, aber ich stecke ein wenig fest.

Wäre es besser, mehrere Bilder zu erstellen und sie zu durchlaufen, um eine Ripple-Animation zu erstellen, oder wäre es besser, die Bitmap ein wenig zu verzerren, bevor ich sie auf die Leinwand lege?

Dies ist ein Video mit einem sehr schönen Welleneffekt, der durch OpenGL erzielt wird.

Ich habe noch keine Erfahrung mit OpenGL und habe mich gefragt, ob es noch möglich ist, einen 2D Wassereffekt auf dem Live Wallpaper zu erstellen?

    
___ Die Funktion tag123live ___ .live () in jQuery fügt einen Ereignishandler für alle Elemente an, die jetzt und in Zukunft mit dem aktuellen Selektor übereinstimmen. Es wurde in jQuery 1.7 veraltet und in jQuery 1.9 entfernt. ___ tag123android ___ Android ist das mobile Betriebssystem von Google, das zum Programmieren oder Entwickeln von digitalen Geräten (Smartphones, Tablets, Automobile, Fernseher, Wear, Glass, IoT) verwendet wird. Verwenden Sie für Themen rund um Android Android-spezifische Tags wie android-intent, nicht intent, android-activity, nicht activity, android-adapter, nicht adapter usw. Bei anderen Fragen als der Entwicklung oder Programmierung, aber im Zusammenhang mit Android Framework, verwenden Sie Der Link: https://android.stackexchange.com. ___ tag123wallpaper ___ Hintergrund ist das Hintergrundbild auf dem "Desktop" oder "Startbildschirm". ___ qstnhdr ___ Live Wallpaper Wasser Ripple-Effekt ___ tag123effects ___ Nicht funktionale Verbesserungen der Benutzerinteraktion mit einem Produkt (am häufigsten visuell und akustisch) ___ answer10326109 ___

Ich bin kein Experte darin, aber ich glaube, dass der typische Weg, Wassereffekte in OpenGL zu machen, ein Fragment-Shader ist. Mit einem statischen Bild als Textur kann Ihr Shader die Texturkoordinaten variieren, die für die Abtastung dieses Bildes verwendet werden, um es auf beliebige Weise zu verzerren.

Berechnen Sie die Richtung und den Abstand des Pixels vom Mittelpunkt des Kreises und stellen Sie die Texturkoordinate basierend auf einer sinusförmigen Funktion der Entfernung auf den Mittelpunkt des Kreises oder von ihm weg ein und Sie erhalten einen schönen Welleneffekt.

Nach der Beschreibung des YouTube-Videos zu urteilen, das du verlinkt hast, klingt es so, als würde man ein Gitter aus Dreiecken verwenden und die Texturkoordinaten nur an den Scheitelpunkten anpassen. Das sollte auch funktionieren, aber es wird nicht so gut aussehen, wenn Sie nicht ein ziemlich feines Raster verwenden. Es ist zwar ideal, dies pro Pixel mit einem Fragment-Shader zu tun, aber ich weiß nicht, ob das Leistungsprobleme auf der GPU eines Telefons verursachen würde.

    
___ antwort10994850 ___

Ich wollte auch einen realistischen Welleneffekt in Android implementieren, also werde ich meine Erfahrung teilen:

Als Referenzimplementierung habe ich Sergey's Chikuyonok-JavaScript-Port von Neil Wallis Java algo genommen. Hier ist ein Spielplatz, auf dem Sie mit dem ursprünglichen JS-Code experimentieren können: Ссылка

Zuerst habe ich den JS-Code nach Java portiert, nur um festzustellen, dass es keine Möglichkeit gibt, mehr als 1 fps auf meine Huawei U8100 Hardware zu pressen. (Es gibt mehrere ähnliche Versuche im Netz mit der einzigen Schlussfolgerung: Sie sind lächerlich langsam).

Übrigens war diese SO-Antwort sehr nützlich, um ein grundlegendes Verständnis dafür zu bekommen, wie man interaktive Grafiken in Android programmiert: Ссылка . Ich habe mir fps counter von dort ausgeliehen.

Dann habe ich beschlossen, Android NDK zu versuchen, den ursprünglichen Algo in reinem C neu zu implementieren (meine erste Begegnung damit in 10 Jahren!). Obwohl die Dokumente von NDK etwas verwirrend waren (insbesondere hinsichtlich der Anforderungen und Voraussetzungen), funktionierte alles wie ein Zauber, so dass ich bis zu 30 fps erreichen konnte - es ist vielleicht nicht beeindruckend, aber dennoch eine radikale Verbesserung gegenüber Java-Code .

Endlich habe ich all meine Arbeit online gestellt: Ссылка , also fühle dich frei, damit zu spielen. Es enthält:

  1. Interaktiver springender Ballcode oben erwähnt (nur für die Referenz).
  2. Wasser kräuselt den Java-Port (langsam wie die Hölle!)
  3. Wasser kräuselt die C-Implementierung (benötigt NDK zum Kompilieren und JDK zum Erstellen der .h-Datei).

(Das Projekt ist nicht "sauber", d. h. alle Binärdateien sind vorhanden, also kann es versuchen, es "so wie es ist" auch ohne NDK auszuführen.)

    
___
esteewhy 12.06.2012, 10:32
quelle
6

Hier finden Sie ein Beispiel für einen Touch-Ripple-Effekt:

Ссылка

Es nutzt das rajawali OpenGL ES Framework / Library. Sie können die Rajawali-Beispiele App vom Markt herunterladen, um zu sehen, wie es aussieht. Durchsuchen Sie den Ordner "src" und Sie werden die TouchRippleEffect-Aktivität und den Renderer sehen. Hoffe das hilft.

    
Steve C. 03.06.2012 07:12
quelle
4

Ich bin kein Experte darin, aber ich glaube, dass der typische Weg, Wassereffekte in OpenGL zu machen, ein Fragment-Shader ist. Mit einem statischen Bild als Textur kann Ihr Shader die Texturkoordinaten variieren, die für die Abtastung dieses Bildes verwendet werden, um es auf beliebige Weise zu verzerren.

Berechnen Sie die Richtung und den Abstand des Pixels vom Mittelpunkt des Kreises und stellen Sie die Texturkoordinate basierend auf einer sinusförmigen Funktion der Entfernung auf den Mittelpunkt des Kreises oder von ihm weg ein und Sie erhalten einen schönen Welleneffekt.

Nach der Beschreibung des YouTube-Videos zu urteilen, das du verlinkt hast, klingt es so, als würde man ein Gitter aus Dreiecken verwenden und die Texturkoordinaten nur an den Scheitelpunkten anpassen. Das sollte auch funktionieren, aber es wird nicht so gut aussehen, wenn Sie nicht ein ziemlich feines Raster verwenden. Es ist zwar ideal, dies pro Pixel mit einem Fragment-Shader zu tun, aber ich weiß nicht, ob das Leistungsprobleme auf der GPU eines Telefons verursachen würde.

    
Wyzard 26.04.2012 01:31
quelle

Tags und Links