WebGL Water Ripple Collection

マウスやスワイプの動きに連動して、背景が水面のように美しく揺らぐ演出（WebGL）のサンプル集です。
軽量なライブラリから、高度なカスタマイズが可能なものまで、3種類のライブラリによる実装パターンを収録しています。

デモの特長

• インタラクティブ性: クリック不要。マウスホバーやスワイプの軌跡に合わせて波紋が発生します。
• マルチデバイス対応: PCのマウス、スマホのタッチ・スワイプ両方に対応しています。
• 最新のライブラリ構成: PixiJS v7、Curtains.js v8 などのモダンな記述を採用しています。

📂 収録されている実装パターン

1. PixiJS (RenderTexture + Displacement Filter)

• 特徴: 最もパフォーマンスが高く、自然な波紋の広がりを再現します。
• 仕組み: マウス位置に「法線マップブラシ」を動的に描画し、それを変位マップとして背景に適用しています。

2. Curtains.js (Custom Shader)

• 特徴: DOM要素（HTML）との親和性が高く、シェーダー（GLSL）を直接制御できます。
• 仕組み: 裏側の Canvas で描画した波紋データをテクスチャとしてシェーダーに渡し、ピクセル単位で画像を歪ませています。

3. jQuery Ripples (Fluid Dynamics)

• 特徴: 物理演算に基づいた最もリアルな水面表現で、導入も非常に簡単です。
• 仕組み: ライブラリ内部で高度な流体シミュレーションが行われています。

実行方法

WebGL および外部画像の読み込み制限（CORS）を回避するため、必ずローカルサーバーを立てて実行してください。

VS Code を使う場合

1. 拡張機能 Live Server をインストールします。
2. index.html を右クリックして Open with Live Server を選択します。

ターミナルから実行する場合

# Python 3
python3 -m http.server 8000

# Node.js (npx)
npx serve

技術的なポイント

なぜ波紋がリアルに見えるのか？

波紋の表現には、Displacement Mapping（変位マッピング）を使用しています。

• Redチャンネル: ピクセルを横方向にどれくらいずらすか
• Greenチャンネル: ピクセルを縦方向にどれくらいずらすか
• Alphaチャンネル: 歪みの強度

これらをマウス位置に合わせて動的に生成することで、静止画があたかも水の中に沈んでいるような視覚効果を生み出しています。

📜 ライセンス

MIT License. 自由に変更・商用利用いただけます。

ファイル構成

リポジトリは以下のような構成です。

.
├── curtainsjs/
│   └── index.html
├── jquery-ripples/
│   └── index.html
├── pixijs/
│   └── index.html
├── .gitignore
├── index.html
├── README.md
└── webgl.htm