Shape Matching

WebGL と Hooke's Law でソフトボディの呼吸をシミュレート

Physics Controls
Stiffness (Spring Force)
0.008

How hard the mesh tries to return to target.

Damping (Friction)
0.580

Lower values = wobble/jelly. Higher = rigid.

Breath Speed
0.0003
Breath Intensity
1.01
Character Texture

Upload an image (PNG/JPG) to map to the mesh.

How it works

1. メッシュの生成

画像を 20×30 の格子状の頂点に分割します。 各頂点は元の位置(rest position)を記憶しています。

2. 呼吸のターゲット計算

時間に応じてsin波で呼吸サイクルを生成し、各頂点の「目標位置」を計算します。 胸部付近の頂点ほど大きく動くよう、Y座標に基づいて重みを設定しています。

weight = max(0, 1.0 - |normalizedY - 0.6| × 2.5)

3. フックの法則によるバネ物理

各頂点は目標位置に向かってバネ力で引っ張られます。 これにより、急激な動きではなく滑らかな追従が実現されます。

force = (target - current) × stiffness
velocity = (velocity + force) × damping
position += velocity

4. WebGLでレンダリング

物理計算はCPUで行い、変形後の頂点座標をGPU(WebGL)に送ってテクスチャ付きメッシュとして描画します。 毎フレーム頂点バッファを更新することで、リアルタイムにアニメーションします。

FPS 0