← wakame.dev

水面と葉っぱ

カーソルを動かすと水が流れ、葉っぱが運ばれます。クリック(タップ)でエサをまくと、池の鯉が寄ってきて食べます。

表示
クリックで
しくみ
  • 描画:Three.jsなどのライブラリは使わず、WebGL2とGLSLのシェーダーを直接書いています。
  • 視点:画面の各ピクセルから視線を飛ばして水面との交点を求め、斜めから見下ろした池を描いています。奥ほど空や岸の木が映り込みます。
  • 波:風の強さと向きから波のスペクトルを作り、GPU上の逆FFT(256×256)で毎フレーム高さと傾きを求めています。
  • 流れ:波とは別に、2次元の流体(移流・渦・圧力の計算)をGPUで解いています。カーソルの動きがそのまま力になります。
  • 葉っぱ:流れの速度をGPUから非同期で読み戻し、その場所の流れと渦に合わせて動かしています。葉っぱ同士はぶつかり合います。
  • 鯉:池の平面のテクスチャに鯉を描き、水面で屈折させて水の中に見せています。底には鯉の影が落ちます。泳ぐと水が押されて、葉っぱも少し動きます。浮いているエサに気づくと寄ってきて、口で吸い込みます。