https://gyazo.com/a1f1da4345df92c797405dae63db9754

基本情報

デモ

リポジトリ

VRMの身長を確かめたいことが多かったので、Webブラウザ上で確認で出来るツールを作りました。

VRMの身長を計算する

まずはVRMの身長を求めます。足の裏から天辺までの高さを身長として計算してみます。

アバターが収まるサイズのバウンディングボックスを生成してその高さを求めます。

注意点としては

アバターよりも若干大きくなってしまうこと

髪型や装飾品に影響されること

があります。

そのため、見た目上の高さの目安として考えるのが良さそうです。

次にVector3のmaxとminの差分をとります。

y軸の値を身長として扱うことにします。

code:ts

const bBox = new THREE.Box3().setFromObject(vrm.scene);

const bSize = bBox.max.sub(bBox.min);

const height = bSize.y;

バウンディングボックスを可視化する

THREE.BoxHelperを使用しバウンディングボックスを表示します。

シーン上のアバターはTポーズをしているのでx軸方向に大きくなっています。

https://gyazo.com/f821c41c7c57d732364529f78be01fce

目線の高さを求める

装飾品や髪型に影響されない高さの指標として目線の高さを求めます。

今回はVRMの一人称用に設定されているボーンのy座標を視点の高さしました。

だいたいのVRMモデルではHeadボーンが設定されていると思います。

getWorldPositionでワールド座標を取得しました。

なお、アバターを原点から移動させている場合は対応が必要です。

vrm.scene.getWorldPositionとの差分をとればいいはず

code:ts

const headBone = vrm.firstPerson.firstPersonBone;

const headPos = new THREE.Vector3();

const eyelevel = headBone.getWorldPosition(headPos).y;

ポリゴン数を計測する

ポリゴン数も気になることが多いので確認できるようにします。

ポリゴン数を計測するためにレンダラー情報からシーン全体のポリゴン数を取得しました。

今回はVRMアバターしかジオメトリが配置されていないので問題ないのですが、他のオブジェクトとかを配置する場合は対応が必要です。

アバターを配置する前との差分を取るなど

注意点としてレンダリング後に参照する必要があります。

毎フレームレンダリングしているので問題がおきにくいですが、取得前にレンダリングするようにしています。

code:ts

public renderInfo(): THREE.WebGLInfo {

this._renderer.render(this._scene, this._camera);

return (this._renderer.info);

}

// ...

const polygonCount = renderInfo.render.triangles;

後は、取得した情報を表示させれば完成です。

https://gyazo.com/a1f1da4345df92c797405dae63db9754

作成したツールは以下のリンクから実際に使ってみることが出来ます。

GitHub上のリポジトリです。

良かったら使ってみてください。

参考