応用編3: アニメーション制御とモーフ操作

前章までで、モデルとモーションの読み込みが完了しました。本章では、より実践的なツール群として「プレーヤーGUIの表示」と「表情モーフの直接制御」を簡潔に紹介します。
詳細な仕様や多彩な機能については、ご自身のプロジェクトに合わせて公式ドキュメント等で深掘りしてみてください。

1. アニメーションプレーヤー（コントロールバー）の表示

babylon-mmdには、モーションの再生や一時停止、シークバーでの頭出し操作をブラウザ上で簡単に行えるGUIコントロールのクラス（MmdPlayerControl）が用意されています。

import { MmdPlayerControl } from "babylon-mmd/esm/Runtime/Util/mmdPlayerControl";
import { DisplayTimeFormat } from "babylon-mmd/esm/Runtime/Util/mmdPlayerControl";

// 登録されたアニメーションを操作する再生コントロールバーを生成
const currentControls = new MmdPlayerControl(scene, currentMmdRuntime);

// 時間表示のフォーマットをフレーム数に設定
currentControls.displayTimeFormat = DisplayTimeFormat.Frames;

// 画面上にGUIを表示
currentControls.showPlayerControl();

これを呼び出すだけで、画面下部に操作パネルが表示され、アニメーションの直感的なデバッグや鑑賞が可能になります。

2. プログラムからの表情（モーフ）操作

本来、キャラクターの表情（まばたきや口パクなど）はVMDモーションデータに組み込まれています。しかし、インタラクティブなWebアプリ等で、プログラムの処理（ユーザーのクリックや生成AIのレスポンスなど）に応じてリアルタイムに別の表情を作りたい場合などは、モーフウェイトを直接操作することができます。

この setMorphWeight メソッドに対して 0.0 〜 1.0 の数値を動的に渡す仕組みを作ることで、外部のリップシンク解析ライブラリと組み合わせて自動で口パクを行わせたり、状況に合わせて表情を切り替えたりといった、動的な表現が可能になります。

// 特定のモーフ（例："笑い"）の適用度を 1.0 (最大) に設定
mmdModel.morph.setMorphWeight("笑い", 1.0);

モデルの読み込み時に materialProxyConstructor: MmdStandardMaterialProxy を設定していないとエラーが発生する可能性があります。「応用編1: モデルのロードと表示」の章をご確認ください。

お疲れ様でした。これでキャラクターのアニメーションや表情を、プログラムから自由に操作するための基盤が整いました。