“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
12 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
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!
// 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.
2 Likes
Haha this is really cool!! Do you want to add a page about VRM in our doc?
1 Like
Is there an example with react.js loading VRM
1 Like
Is it possible to use animation groups on the VRM model?
I tried loading animations from a GLB file (using Asset Containers) then copying the animation to the VRM model but I could not locate the skeleton object.
Also, if I create an avatar in Babylon.js can this library export the avatar as a VRM model?
You can apply the animation groups to TransformNode using VRMManager.humanoidBone reference.
(I don’t know how to use Skeleton in animation 
)
Sample code is here.
const baseAnimGroup = assetContainer.animationGroups[0]
const animGroup = new AnimationGroup(`${baseAnimGroup.name}_`, scene)
animGroup.speedRatio = baseAnimGroup.speedRatio
baseAnimGroup.targetedAnimations.forEach(targetedAnimation => {
// refer animation name correspond to humanoidBone. example: head, leftUpperArm, ...
const boneName: string | undefined = targetedAnimation.target.name
if (!boneName || !targetVRMManager.humanoidBone[boneName]) {
return
}
animGroup.addTargetedAnimation(
// clone from original animation
targetedAnimation.animation.clone(),
// attach animation to TransformNode.
targetVRMManager.humanoidBone[boneName],
)
})
Currently, you cannot export VRM Model using babylon.js. You need to use UniVRM for example.
1 Like
When I try this method of copying an animation to the VRM avatar the bones become warped. One of the problems with VRM is that the hip bone is rotated 180 so none of the Mixamo animations work properly. Is there a workaround for this? I even tried adjusting the local matrix to rotate hip 180 but there is still warping. Here is a picture of the Mixamo rig on the left and same animation applied to VRM rig on the right.
Incompatibility with Mixamo and VRM is a difficult problem.
Sorry but I couldn’t make a solution about them. 
Hi i’ve been trying to make vrm models in model change costumes (by using the append function inside blender, getting objects e.g. hair from another model made also in vroid studio) but when i do this, the spring bones on the new hair loads in unity (i can see that the gizmos sway when i move the model in unity play mode) but the actual mesh doesn’t move.
Any suggestions ?
When will 6.x be supported
I upgraded it based on babylon-vrm-loader and sent the package as babylonjs-vrm-loader.
Now he has endorsed babylon.js 6.x.
This is the repo address：
playgroud：
4 Likes
Man I can’t wait for someone to work with this and make animationGroups work, it’d be a dream come true
Hey @Spencer17x . Thank you for forking!
Could you tell me the difference of my master branch? I want to merge this feature.
