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