動態壁紙水漣漪效應

Question

我正在做一個動態壁紙，其中包含一些水漣漪效果觸摸屏幕，但我有點卡住了。

創建多個圖像並循環遍歷它們以創建漣漪動畫會更好嗎？還是在將它放在畫布上之前扭曲位圖會更好？

This是一個非常漂亮的漣漪效應通過OpenGL完成的視頻。

我還沒有使用OpenGL的經驗，並想知道是否仍有可能在動態壁紙上創建2D水效果？

Answer 1

我想實現在Android的一個現實的連鎖反應太多，所以會分享我的經驗：

作爲一個參考實現，我把尼爾·沃利斯的Java算法中的謝爾蓋的Chikuyonok的JavaScript端口。這裏有一個遊樂場，您可以嘗試使用原始的JS代碼：http://jsfiddle.net/esteewhy/5Ht3b/6/

首先，我已經將JS代碼移植到了Java中，只是意識到我的華爲U8100硬件無法擠壓超過1 fps。 （網上有幾個類似的嘗試，唯一的結論是：他們的速度很慢）。

順便說一句，這個SO的答案是非常有用的基本瞭解如何在Android中編寫交互式圖形：https://stackoverflow.com/a/4946893/35438。我從那裏借用了fps計數器。

然後我決定嘗試使用Android NDK來重新實現純C中的原始算法（我的第一次遇到它在10年以上！）。儘管NDK的文檔有些混亂（特別是對於需求和先決條件），但它的功能都像一個魅力，所以我能夠達到30幀/秒 - 它可能不會太令人印象深刻，但仍然是對Java代碼的徹底改進。

最後，我把我所有的工作放在網上：https://github.com/esteewhy/whater，所以隨時隨地玩。它包含：

1. 上面提到的交互式彈跳球代碼（僅供參考）。
2. 水漣漪Java端口（像地獄一樣慢！）
3. 水漣漪C實現（需要NDK編譯和JDK創建.h文件）。

（該項目是不是「乾淨」，即：所有的二進制文件都在那裏，所以可以嘗試運行「原樣」即使沒有NDK）

Answer 2

我不是這方面的專家，但我相信在OpenGL中做水效應的典型方法是使用片段着色器。使用靜態圖像作爲紋理，着色器可以改變用於採樣該圖像的紋理座標，以任意方式對其進行扭曲。

根據距離的正弦函數計算像素的方向和距離圓心的距離，並根據距離的正弦函數調整朝向​​或遠離圓心的紋理座標，並且您應該獲得很好的漣漪效應。

根據您關聯的YouTube視頻的描述來判斷，這聽起來像是通過使用三角形網格並僅在頂點調整紋理座標來完成的。這也應該起作用，但除非使用相當精細的網格，否則看起來不太好。使用片段着色器進行每像素處理是理想選擇，但我不知道這是否會導致手機GPU上的性能問題。

Answer 3

你可以找到在這裏觸摸漣漪效果的例子：

https://github.com/MasDennis/RajawaliExamples

它利用拉賈瓦利OpenGL ES的框架/庫。您可以從市場上下載rajawali示例應用程序，看看它的外觀。瀏覽「src」文件夾，您將看到TouchRippleEffect活動和渲染器。希望有所幫助。