Loading VRM Humanoid-based model

“VRM” is a file format for handling 3D humanoid avatar (3D model) data for VR applications . It is based on glTF 2.0. Anyone is free to use it. In addition, a standard implementation (UniVRM) in c# that can import and export VRM file in Unity is released as open source.
by VRM.dev

I’d just created UniVRM to TypeScript porting for babylon.js the amazing WebGL library!

Anyone can use babylon-vrm-loader npm package.

import * as BABYLON from '@babylonjs/core'

// this importing has side-effect
// ref. https://webpack.js.org/guides/tree-shaking#mark-the-file-as-side-effect-free
import 'babylon-vrm-loader'

// ... init and create Engine and Scene

// vrmFile is File object retrieved by <input type="file">.
// or you can use url too.
const scene = await BABYLON.SceneLoader.LoadAsync('file:', vrmFile, engine);
const vrmManager = scene.metadata.vrmManagers[0];

// Update secondary animation(Spring Bones)
scene.onBeforeRenderObservable.add(() => {
    vrmManager.update(scene.getEngine().getDeltaTime());
});

// Model Transformation
vrmManager.rootMesh.translate(new BABYLON.Vector3(1, 0, 0), 1);

// Work with HumanoidBone
vrmManager.humanoidBone.leftUpperArm.addRotation(0, 1, 0);

// Work with BlendShape(MorphTarget)
vrmManager.morphing('Joy', 1.0);

Codepen example is here(you need VRM model file).

Also you can see example here with sample model “Alicia Solid”.

Feel free to use and contribution! virtual-cast/babylon-vrm-loader : GitHub

7 Likes

This is amazing !!! I think this would deserve an entry in the documentation so that ppl looking for loaders could find your great work.

I bet on @Deltakosh being pretty happy with that too.

1 Like

You rock!!! would you be ok to add a page for it in our documentation so people can easily find it? (with link to your demo)

1 Like

This is very nice! I’m glad you are using the glTF loader extension mechanism to do it.

2 Likes

Of course.

VRM has Unity Humanoid bone mapping data. And TransformNode is mapped to these bones(like LeftUpperLeg, Chest, Neck, …).

So you can animate any VRM model with same code!

vrm-motion

// example code
vrmManager.humanoidBone.leftShoulder.rotationQuaternion = Quaternion.FromEulerAngles(
    Math.sin(Math.PI / 4 * (elapsedTime / 200)),
    0,
    Math.PI / 3.5,
);
vrmManager.humanoidBone.rightShoulder.rotationQuaternion = Quaternion.FromEulerAngles(
    Math.sin(Math.PI + (Math.PI / 4 * (elapsedTime / 200))),
    0,
    -Math.PI / 3.5,
);
vrmManager.humanoidBone.leftUpperLeg.rotationQuaternion = Quaternion.FromEulerAngles(
    Math.sin(Math.PI / 4 * (elapsedTime / 200)),
    0,
    0,
);
vrmManager.humanoidBone.rightUpperLeg.rotationQuaternion = Quaternion.FromEulerAngles(
    Math.sin(Math.PI + (Math.PI / 4 * (elapsedTime / 200))),
    0,
    0,
);
vrmManager.humanoidBone.leftLowerLeg.rotationQuaternion = Quaternion.FromEulerAngles(
    -Math.PI / 6,
    0,
    0,
);
vrmManager.humanoidBone.rightLowerLeg.rotationQuaternion = Quaternion.FromEulerAngles(
    -Math.PI / 6,
    0,
    0,
);

Left model is IL-tan which is my company’s image character.

Here is VRM applications list almost in Japan.

1 Like

This is excellent:D