2012-04-26 18 views
8

私は、画面に触れるときに水の波紋効果を組み込んだライブ壁紙に取り組んでいますが、ちょっと立ち往生しています。ライブ壁紙ウォーターリップル効果

リップルアニメーションを作成するために複数の画像を作成してループする方が良いでしょうか、キャンバスに配置する前に少しビットマップを歪ませる方が良いでしょうか?

Thisは、OpenGLで行われた非常に素晴らしいリップル効果のビデオです。

私はまだOpenGLでの経験はありませんし、ライブ壁紙に2Dウォーターエフェクトを作成することがまだ可能かどうか疑問に思っていましたか?

+0

ワンAndroidのライブ壁紙では水が波打っているので、確かに可能です。 – Wyzard

答えて

16

私もアンドロイドで実装され、現実的な波及効果を望んでいたので、私の経験を共有します:私はニール・ウォリスのJavaアルゴのセルゲイさんChikuyonok JavaScriptのポートを取ったリファレンス実装として

を。 http://jsfiddle.net/esteewhy/5Ht3b/6/

最初は、私のHuawei U8100ハードウェアで1fps以上を絞る方法がないことを理解するために、JSコードをJavaに移植しました。 (唯一の結論でネット上にいくつかの同様の試みがある:彼らはとんでもないほど遅い)。

ところで、このSOの回答は、Androidの対話型グラフィックスをコーディングする方法の基本的な理解を得るのに非常に役に立ちました。https://stackoverflow.com/a/4946893/35438私はそこからfpsカウンターを借りました。

その後、私は純粋なCで元のアルゴを再現するためにAndroid NDKを試すことにしました(私の最初の遭遇は10+年!)。 NDKのドキュメントは(特に要件や前提条件に関して)いくぶん混乱していましたが、それはすべて魅力的だったので、最大30fpsを達成できました。これは印象的すぎるかもしれませんが、Javaコード。

最後に、すべての仕事をオンラインにしました:https://github.com/esteewhy/whater、それで遊んでください。それは含まれています:

  1. 上記のインタラクティブなバウンスボールコード(参考のため)。
  2. 水リップルJavaポート(地獄のように遅い!)
  3. 水リップルCの実装(コンパイルするにはNDK、.hファイルを作成するにはJDKが必要)。

(プロジェクトはすなわち、「クリーン」ではありません:すべてのバイナリがある、そうでもNDKせずに「そのまま」それを実行しようとすることができます。)内蔵の

enter image description here

+0

コード内で背景を自分のイメージに変更する方法を教えてください。 私が試したときに、NullPointerExceptionが発生しました ありがとう – metalink

4

私はこれについて専門家はいませんが、私はOpenGLでウォーターエフェクトを実行する典型的な方法はフラグメントシェーダーであると信じています。静的なイメージをテクスチャとして使用すると、シェーダはそのイメージのサンプリングに使用されるテクスチャ座標を変更して、任意の方法で歪ませることができます。

円の中心からのピクセルの方向と距離を計算し、距離の正弦関数に基づいてテクスチャ座標を円の中心に近づけたり遠ざけたりするよう調整します。波紋効果が得られるはずです。

リンクしたYouTube動画の説明から判断すると、三角形のグリッドを使用し、頂点でのみテクスチャ座標を調整すると、そのように見えます。それでもうまくいくはずですが、かなり細かいグリッドを使用しない限り、それほどうまく見えません。フラグメントシェーダでピクセル単位で処理するのが理想ですが、それが電話機のGPUでパフォーマンスの問題を引き起こすかどうかはわかりません。

+0

OpenGLでこれを行う方法の例がありますか? – Gatekeeper

+0

申し訳ありませんが、申し訳ありません。 OpenGLが初めての方は、フラグメントシェーダやテクスチャのサンプリングについて学び、それらを理解すれば波紋を作るのを心配してください。 – Wyzard

6

あなたはここをタッチ波及効果の一例を見つけることができます。

https://github.com/MasDennis/RajawaliExamples

それはラジャワリのOpenGL ESフレームワーク/ライブラリを利用しています。あなたはそれがどのように見えるかを見るために市場からrajawaliサンプルアプリをダウンロードすることができます。 "src"フォルダを参照すると、TouchRippleEffectアクティビティとレンダラーが表示されます。希望が役立ちます。

+0

私はplaystoreからRajawaliの例をダウンロードしました。その中で27はTouch Ripples Effectですが、ソースコードを実行すると、その部分がコメントされています...私のソースコードには以下の行があります... org.rajawali3d:rajawali:[email protected] 誰でも助けてくださいこの問題を解決するには –

関連する問題