animation_state
English | 日本語

概要
- samples/gltf_loader/hand.glb の手を読み込み、各指ポーズの action 自体は Action で再生しつつ、「今どの action を選ぶか」は AnimationState が決める構成を確認できます。
- 1 - 6 で desired state を切り替えるだけで、対応する action が始まる構成にしてあり、状態制御と action 再生の役割分担を追いやすくしています。
- 操作説明は buildHelpPanelOptions() と showOverlayPanel() を使って左上の畳める help panel へ出し、現在状態は canvas HUD 側へ分けて表示します。
実行方法
- 実行ファイルは ./animation_state.html です
- WebGPU に対応したブラウザで開き、必要に応じて help panel や HUD と合わせて確認してください
使用している webg 機能
- WebgApp: Screen / Shader / Space / Input / Message をまとめて初期化し、loadModel(..., { format: "gltf" }) で hand.glb を読み込む
- Skeleton / Bone: ボーン表示と回転
- Action: 指ポーズの pattern / action 再生を担当
- AnimationState: desired state と遷移条件から、どの action を開始するかを決める最小 state machine
- 各 pose の action は単発再生で扱い、state が変わるまで最後に到達した pose を表示し続けます
- buildHelpPanelOptions() + showOverlayPanel(): 左上の help panel を標準形式で生成し、操作説明の表示 / 非表示を切り替える
- Message: HUD と状態表示
確認ポイント
- 左上の help panel に操作説明が表示され、Hide Help を押すと Show Help ボタンだけが残り、Show Help で再表示できることを確認します。
- HUD に desired state / current state / current action / current pattern / transition が表示され、状態遷移と action 再生の役割分担を画面上から追えることを確認します。
- P で auto cycle を有効にすると、一定時間ごとに desired state が変わり、state machine が連続して action を切り替えることを確認します。
- 現在の hand.glb では、0:レスト, 1:グー, 2-3:1本伸ばす, 4-5:チョキ, 6-7:3本伸ばす, 8-9:4本伸ばす, 10-11:パー, 12-13:グー の保持区間に対応します。
操作方法
- 左上 help panel の Hide Help / Show Help: 操作説明本文の表示 / 非表示
- W / S: モデルを X 軸回転
- A / D: モデルを Y 軸回転
- Z / X: モデルを Z 軸回転
- J: ボーン一覧を console 出力
- E / R: 選択中ボーンを X 軸回転
- Y / U: 選択中ボーンを Y 軸回転
- C / V: 選択中ボーンを Z 軸回転
- N / M: メッシュ選択を前後切り替え
- O / I: 選択メッシュの非表示 / 表示
- 9 / 0: ボーン表示 / 非表示
- 1 - 5: desired state を pose1 - pose5 に変更
- 6: desired state を pose0 に変更
- /: 次の desired state へ進む
- @: 現在 state を再始動
- P: auto cycle の ON / OFF
- 7 / 8: 描画 ON / OFF
- K: 遅延描画モード ON
- Q:サンプル停止
補足
- AnimationState は clip データを持たず、既存 Action を controller として受ける薄い制御層です
- このサンプルでは state.action -> Action.start(actionId) の接続だけを使い、cross-fade や blend は扱いません