VRMの向きの話

VRM0とVRM1の違いのひとつ、VRM0とVRM1ではモデルの正面方向が違う。

そのため、読み込んだときにY軸で180度回転したり、関節の回転方向を考慮する必要がある。

VRM1でモデルの正面方向に仕様変更がありました。

VRM-1.0の変更点

VRM-0.X からの変更点

glTF: z- forward => z+ forward

ここからはVRMお手軽ポーズでも使っているpixiv/three-vrmの話をしていきます。

1. VRM0と1の正面を合わせる

VRMをそのまま読み込むとVRM0と1で向いている方向が違います。

https://gyazo.com/65d1c453cd0b0f71553f0a050410068f

読み込み時にVRMUtils.rotateVRM0を使ってVRM0だった場合は回転させるようにします。

code:js

loader.register((parser) => {

return new VRMLoaderPlugin(parser);

});

loader.load(

'sample.vrm',

(gltf) => {

const vrm = gltf.userData.vrm;

VRMUtils.rotateVRM0(vrm); // vrmがVRM0の場合、vrm.sceneをY軸を中心に180度回転させる。

scene.add(vrm.scene);

// ...

向きがそろいました。

https://gyazo.com/553e0ff6ab58b55eb43fbc24bc8db747

２．VRM0とVRM1でポーズが共有できない

VRM0のポーズをVRM1に適用すると関節が逆に曲がるといった問題が起きます。

具体的にはVRM0でgetNormalizedPoseしたものをVRM1にsetNormalizedPoseにしたり、その逆をすると発生します。

https://gyazo.com/b0c26bda7ab181fcb59a9319a50aa2eb

VRMのバージョンに合わせて、VRMPoseの角関節のrotation(クォータニオン)をY軸で反転させて対応します。

$ ( -x, y, -z, w )

VRMお手軽ポーズのコードではこんな感じです

code:ts

export const invertRotation = (pose: VRMPose) => {

Object.keys(pose).forEach((key) => {

const rotation = posekey as VRMHumanBoneName!.rotation;

if (rotation) {

rotation0 = -rotation0;

rotation2 = -rotation2;

}

});

};

VRMお手軽ポーズのポーズデータはVRM1用になっています。

参考