/babylon-vrm-loader

glTF VRM extension Loader for babylon.js

Primary LanguageTypeScriptMIT LicenseMIT

babylon-vrm-loader

npm version CircleCI semantic-release

alicia.png

VRM porting to babylon.js.

This loader is used as VirtualCast web VRM/VCI/glb viewer.

Supported version table

babylon.js version babylon-vrm-loader version
~4.1.0 <1.5.0
~4.2.0 ^1.5.0
^5.19.0 ^2.0.0
^6.0.0 will be ^3.0.0

Features

  • Supports .vrm v0.x file loading
    • with extensions.VRM glTF Extension
    • TODO VRM v1.0 file loading
  • Supports .vci file loading
  • Supports MToonMaterial
  • Get bone(TransformNode) from Unity Humanoid bone mapping name
  • BlendShape morphing
  • SpringBone
  • Supports VCI features(partial support)
    • VCAST_vci_material_unity
    • TODO: VCAST_vci_meta
    • TODO: VCAST_vci_embedded_script
    • TODO: VCAST_vci_audios
    • TODO: VCAST_vci_colliders
    • TODO: VCAST_vci_rigidbody
    • TODO: VCAST_vci_joints
    • TODO: VCAST_vci_item

Usage

on browser

example is here.

on Babylon.js Playgound

example is here.

with npm/yarn

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

Contributing

See CONTRIBUTING.md.

Build

$ yarn build

Debugging MToonMaterial

$ yarn debug

You can see inspector on http://localhost:8080/

Related Links

Licenses

see LICENSE.

This project uses babylon.js with Apache License, Version 2.0.