babylon-mmd
mmd loader and runtime for Babylon.js
Screenshots
https://github.com/noname0310/babylon-mmd/assets/48761044/a4f046b7-3041-4c58-ac09-a3456d45c6e8
Music: ピチカートドロップス
Model: YYB Piano dress Miku
Stage: ガラス片ドーム
Motion: https://www.nicovideo.jp/watch/sm31508557
Camera: https://www.nicovideo.jp/watch/sm36273873
Music: メランコリ・ナイト
Model: YYB Hatsune Miku_10th
Motion / Camera: https://www.nicovideo.jp/watch/sm41164308
How to use
First, install the package.
npm add @babylonjs/core @babylonjs/havok babylon-mmd
Here is the code to build a scene with a simple MMD model and play a VMD animation.
import "babylon-mmd/esm/Loader/pmxLoader";
import "babylon-mmd/esm/Runtime/Animation/mmdRuntimeCameraAnimation";
import "babylon-mmd/esm/Runtime/Animation/mmdRuntimeModelAnimation";
async function build(canvas: HTMLCanvasElement, engine: Engine): Scene {
SdefInjector.OverrideEngineCreateEffect(engine);
const scene = new Scene(engine);
scene.ambientColor = new Color3(1, 1, 1);
const camera = new MmdCamera("mmdCamera", new Vector3(0, 10, 0), scene);
const hemisphericLight = new HemisphericLight("light1", new Vector3(0, 1, 0), scene);
hemisphericLight.intensity = 0.3;
hemisphericLight.specular = new Color3(0, 0, 0);
hemisphericLight.groundColor = new Color3(1, 1, 1);
const directionalLight = new DirectionalLight("DirectionalLight", new Vector3(0.5, -1, 1), scene);
directionalLight.intensity = 0.7;
CreateGround("ground1", { width: 60, height: 60, subdivisions: 2, updatable: false }, scene);
const havokInstance = await HavokPhysics();
const havokPlugin = new HavokPlugin(true, havokInstance);
scene.enablePhysics(new Vector3(0, -9.8 * 10, 0), havokPlugin);
const mmdRuntime = new MmdRuntime(scene, new MmdPhysics(scene));
mmdRuntime.register(scene);
const audioPlayer = new StreamAudioPlayer();
audioPlayer.source = "your_audio_path.mp3";
mmdRuntime.setAudioPlayer(audioPlayer);
mmdRuntime.playAnimation();
new MmdPlayerControl(scene, mmdRuntime, audioPlayer);
const vmdLoader = new VmdLoader(scene);
mmdRuntime.setCamera(camera);
const cameraMotion = await vmdLoader.loadAsync("camera_motion_1", "your_camera_motion_path.vmd");
camera.addAnimation(cameraMotion);
camera.setAnimation("camera_motion_1");
const model = await SceneLoader.ImportMeshAsync(undefined, "your/root/path/", "your_file_name.pmx", scene).then((result) => result.meshes[0]);
const mmdModel = mmdRuntime.createMmdModel(model);
const modelMotion = await vmdLoader.loadAsync("model_motion_1", "your_model_motion_path.vmd");
mmdModel.addAnimation(modelMotion);
mmdModel.setAnimation("model_motion_1");
return scene;
}
If your model uses textures such as TGA, don't forget to also import the side effects for TGA textures.
import "@babylonjs/core/Materials/Textures/Loaders/tgaTextureLoader";
Use optimized custom format
The optimized custom formats, BPMX (BabylonPMX) and BVMD (BabylonVMD), handle most of the validation and parsing process required for loading at the conversion stage.
As a result, you can provide users with an incredibly fast loading experience.
Furthermore, it is also useful when you want to protect the original model/motion files since they cannot be loaded in MMD.
PMX to BPMX
To perform pmx conversion, please visit below link and load the desired models directory. Then select the model you want to convert and click on "convert".
then you can load the converted files like below.
import "babylon-mmd/esm/Loader/Optimized/bpmxLoader";
const model = await SceneLoader.ImportMeshAsync(undefined, "your/root/path/", "your_file_name.bpmx", scene).then((result) => result.meshes[0]);
VMD to BVMD
To perform vmd conversion, please visit below link and load the desired motions. Then, simply click on "convert". By default, it is possible to merge one camera motion and one model motion together.
then you can load the converted files like below.
const bvmdLoader = new BvmdLoader(scene);
const motion = await bvmdLoader.loadAsync("motion_1", "your_motion_path.bvmd");
Documentation
Please refer to the documentation for more detailed instructions on how to use it.
Implementation status
Parser
PMX / PMD Loader
Mesh
Material / Shading
VMD / VPD Loader
Animation Runtime
Physics Runtime
Not planned features
- PMX 2.1 support (because 2.1 spec not implemented in MMD)
- Self shadow, Ground shadow spec support
Advanced technical support is available for those supporting the project
Contact me via email or discord
email: hjnam2014@gmail.com
discord: noname0310
References
PMX (Polygon Model eXtended) 2.0, 2.1 File Format Specifications
blender_mmd_tools
Saba: OpenGL Viewer (OBJ PMD PMX)
three.js MMDLoader