API

Babylon.js and VRM

VRM top header

What is VRM?

“VRM” is a file format for handling 3D humanoid avatar (3D model) data for VR applications. It is based on glTF2.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.

Additional information can be viewed at vrm.dev.

How to load VRM file in Babylon.js?

You can load VRM file in Babylon.js that uses babylon-vrm-loader, which is community-madeBabylon.js glTF Loader Extension for VRM.

It supports .vrm and .vci file loading.

A brief example

PG: VRM

What can do?

For example, once write some animation code, all VRM models can animate it!

VRM Same Code Animation

// 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);

BabylonJS standard animation mechanism also can be used.

For instance, you can make pose to any VRM.

PG: VRM

How to use?

On browser example is here.

Example PG: VRM

On npm/yarn with webpack...

$ npm install --save @babylonjs/core @babylonjs/loaders babylon-vrm-loader
## or
$ yarn add @babylonjs/core @babylonjs/loaders babylon-vrm-loader
import * as BABYLON from "@babylonjs/core";


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


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


// Update secondary animation
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);

External