応用編2: モーション（VMD）のロードと適用

本章のゴール

VMDモーションデータを読み込み、モデルに適用してアニメーションを再生する方法を習得する。

読み進める前に

本チュートリアルではコードの要点を抜粋しながら仕組みを解説していきます。babylon-mmdの開発者が公開している公式テンプレートの src/SceneBuilder.ts に実際の構成がまとまっているので、手元に開きながら読み進めると各ステップの位置づけが掴みやすくなるはずです。

モーションロードまでのステップ

VMD形式のモーションに対してもbabylon-mmdの専用ローダー、そしてアニメーション管理機能が活躍します。大きく分けて4つのステップでアニメーションを完成させます。

ステップ1: VMDローダーとアニメーション関連機能のインポート
ステップ2: モーションデータの非同期ダウンロード
ステップ3: アニメーションの生成とモデルへの紐付け
ステップ4: アニメーションの再生コントロール

1. VMDローダーとアニメーション関連機能のインポート

import "babylon-mmd/esm/Loader/vmdLoader";
import "babylon-mmd/esm/Runtime/Optimized/Animation/mmdWasmRuntimeModelAnimation";

import { VmdLoader } from "babylon-mmd/esm/Loader/vmdLoader";

const vmdLoader = new VmdLoader(scene);

2. モーションデータの非同期ダウンロード

// VMDモーションデータのダウンロードと解析
const motionData = await vmdLoader.loadAsync(
    modelItem.id + "_motion",
    [modelItem.motionUrl], // モーションファイルのURL（配列）
    () => { /* ローディングの進捗を表示するスクリプト（今回は空） */ }
);

3. アニメーションの生成とモデルへの紐付け

import { MmdWasmAnimation } from "babylon-mmd/esm/Runtime/Optimized/Animation/mmdWasmAnimation";

if (motionData) {
    const wasmAnimation = new MmdWasmAnimation(motionData, currentMmdRuntime.wasmInstance, scene);
    
    // アニメーションを実行データに変換し、モデルへ適用する
    const modelAnimationHandle = mmdModel.createRuntimeAnimation(wasmAnimation);
    mmdModel.setRuntimeAnimation(modelAnimationHandle);
}

4. アニメーションの再生コントロール

アニメーションの再生位置（シーク）や再生・停止などの状態管理は、モデル単体ではなく、babylon-mmdの MmdRuntime クラスに基づきます。このランタイムの seekAnimation() や playAnimation() を呼び出すことで、空間内のアニメーション状態を一元的に制御できます。

if (currentMmdRuntime) {
    currentMmdRuntime.seekAnimation(0, true);
    
    currentMmdRuntime.playAnimation();
}

お疲れ様でした。これでキャラクターにモーションを適用し、アニメーションとして再生させる方法を習得できました。