WebGL × CSS
ライブラリ比較

// 波紋を UV 座標の歪みとして描画するフラグメントシェーダー
precision mediump float;
varying  vec2 vTextureCoord;
uniform sampler2D uTexture;       // 元画像テクスチャ
uniform sampler2D uDisplacement;  // 2D Canvas で生成した波紋マップ

void main() {
  vec4 disp       = texture2D(uDisplacement, vTextureCoord);
  vec2 distortion = (disp.rg - 0.5) * 2.0; // [0,1] → [-1,1]
  vec2 finalUv    = vTextureCoord + distortion * 0.04 * disp.a;
  gl_FragColor    = texture2D(uTexture, finalUv);
}

// ノーマルマップ状のブラシを Canvas で手書き生成
const imgData = bCtx.createImageData(brushSize, brushSize);
for (let y = 0; y < brushSize; y++) {
  for (let x = 0; x < brushSize; x++) {
    const dx = x - radius, dy = y - radius;
    const dist = Math.sqrt(dx*dx + dy*dy);
    const i = (y * brushSize + x) * 4;
    if (dist <= radius) {
      imgData.data[i]   = (dx/radius + 1) / 2 * 255; // R → X 方向
      imgData.data[i+1] = (dy/radius + 1) / 2 * 255; // G → Y 方向
      imgData.data[i+3] = (1 - dist/radius) * 255;    // A → 減衰
    }
  }
}

// フレームごとにテクスチャ更新を通知
plane.onRender(() => {
  if (plane.textures?.length > 1) plane.textures[1].needUpdate();
});

// 動的なディスプレイスメントマップ用テクスチャを作成
const renderTexture = PIXI.RenderTexture.create({
  width: app.screen.width, height: app.screen.height
});
const dispFilter = new PIXI.DisplacementFilter(
  new PIXI.Sprite(renderTexture)
);
dispFilter.scale.set(40, 40); // 屈折の強さ
app.stage.filters = [dispFilter];

// ポインター移動で波紋スタンプを追加
app.stage.on('pointermove', (e) => {
  const r = new PIXI.Sprite(brushTexture);
  r.anchor.set(0.5);
  r.x = e.global.x; r.y = e.global.y;
  r.scale.set(0.2); r.alpha = 1;
  rippleContainer.addChild(r);
  ripples.push(r);
});

// 毎フレーム: 波を広げて RenderTexture に焼き付ける
app.ticker.add(() => {
  ripples.forEach((r, i) => {
    r.scale.x += 0.03; r.scale.y += 0.03;
    r.alpha   -= 0.03;
    if (r.alpha <= 0) { rippleContainer.removeChild(r); ripples.splice(i,1); }
  });
  app.renderer.render(rippleContainer, { renderTexture, clear: true });
});

// これだけで物理シミュレーション付きの水面エフェクト完成
$('#canvas-bg').ripples({
  resolution:  512,   // テクスチャ解像度（高いほど重い）
  dropRadius:  20,    // 波紋の半径 (px)
  perturbance: 0.04,  // 屈折の強さ (0 〜 1)
  interactive: true   // マウス / タッチ操作を有効化
});

// 任意の位置に波紋を追加 (雨・クリック等)
$('#canvas-bg').ripples('drop', x, y, radius, strength);