MMD Loader

babylon-mmd: The MMD Loader and Runtime for Babylon.js

Expand YYB Hatsune Miku_10th by YYB (modified)

MMD is a Japanese 3D animation creation software that has its own 3D model format, PMD/PMX, and motion formats, VPD and VMD.

babylon-mmd is a library focused on loading PMX models and VMD motion files into Babylon.js and playing high-quality dance animations.

Features

• Load PMX models and VMD motion files
• Solve IK, AppendTransform(a.k.a. Append, Grant) and RigidBody / Joint simulation
• MMD morph system
• MmdStandardMaterial for PMX models
• Support multiple models and motions
• Synced audio playback
• Player controls (play, pause, etc.)
• Optimized custom format for MMD models and motions

Example

Expand

Music: メランコリ・ナイト by higma

Model: YYB Hatsune Miku_10th by YYB (modified)

Motion / Camera: https://www.nicovideo.jp/watch/sm41164308 by ほうき堂

Usage

These are just a few code snippets; please refer to the documentation for full usage.

Installation

ES6 module:

npm add @babylonjs/core @babylonjs/havok babylon-mmd

UMD module using the HTML script tag:

<script src="https://cdn.babylonjs.com/babylon.js"></script>
<script src="https://cdn.babylonjs.com/havok/HavokPhysics_umd.js"></script>
<script src="https://www.unpkg.com/babylon-mmd/umd/babylon.mmd.min.js"></script>

UMD module in Playgrounds:

declare const BABYLONMMD: any;

await new Promise((resolve) => {
    const babylonMmdScript = document.createElement("script");
    babylonMmdScript.src = "https://www.unpkg.com/babylon-mmd/umd/babylon.mmd.min.js";
    document.head.appendChild(babylonMmdScript);
    babylonMmdScript.onload = resolve;
});

Import PMX Model

import "babylon-mmd/esm/Loader/pmxLoader"; // side effect import

const mmdMesh = await ImportMeshAsync("your_model_path.pmx", scene).then((result) => result.meshes[0]);

Loading a PMX model with ImportMeshAsync always returns an array of length 1, so you can get the mesh with result.meshes[0].

Import VMD Motion

const vmdLoader = new VmdLoader(scene);
const modelMotion = await vmdLoader.loadAsync("model_motion_1", "your_model_motion_path.vmd");

Play MMD Animation

const mmdRuntime = new MmdRuntime();
mmdRuntime.register(scene);
const mmdModel = mmdRuntime.createMmdModel(mmdMesh);
mmdModel.addAnimation(modelMotion);
mmdModel.setAnimation("model_motion_1");

Documentation

In this document, you'll learn how to fully use babylon-mmd through two step-by-step examples.