波動方程式をGPUで毎フレーム計算しています
アニメーションの再生ではなく、水面の物理(波動方程式)をシェーダーでリアルタイムに解いています。 波同士が干渉したり、画面の端で反射したりするのはそのためです。
水面の高さを記録したテクスチャを2枚用意し、GPU上で「隣のピクセルの平均 − 1フレーム前の自分」を毎フレーム計算。得られた高さの傾きで背景写真を屈折させ、光の反射も加えています。
ファーストビューの一枚写真に。水・自然・リラクゼーション系はもちろん、「静かな高級感」を出したいブランドサイトにも。触った人が思わず遊んでしまう滞在時間アップ効果も。
WebGL2 + GLSL。ライブラリ不使用でHTML1枚で動作。右下のボタンで波の強さ(おだやか/ふつう/つよめ)を切り替えられます。シミュレーション解像度は表示と別に持っているため、フルスクリーンでも軽量です。