VRM ビューワーを作った
@pixiv/three-vrm を使って VRM を個人サイトに表示し、VRMA でアニメーションもできるビューワーを作って公開した。
https://gitlab.com/k1350/vrm-viewer
これが作ったものである。
私は 3D については過去に Unity で浮体の動的解析結果を描画するソフトを作ったくらいの知識しかなく、three.js と VRM については初心者だったので、色々参考にした。
下記が参考にした公式ドキュメントや記事である。
- https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene
- three.js の公式ドキュメント
- https://github.com/pixiv/three-vrm/tree/dev/packages/three-vrm
- @pixiv/three-vrm のリポジトリ。example が有用。
- https://github.com/pixiv/three-vrm/tree/dev/packages/three-vrm-animation
- @pixiv/three-vrm-animaton のリポジトリ。example が有用。
- https://github.com/vrm-c/vrm-specification/blob/master/specification/VRMC_vrm-1.0/expressions.ja.md
- VRM の仕様書の表情の部分
- https://ics.media/tutorial-three/
- Three.js 入門サイト。three.js の公式ドキュメントは図があまりないので、こっちを見たほうが直感的にわかる部分もある。
- https://github.com/pixiv/ChatVRM/blob/main/src/features/emoteController/autoBlink.ts
- ChatVRM というアーカイブされたプロジェクトの自動瞬きの実装を参考にした
- https://scrapbox.io/ke456memo/pixiv%2Fthree-vrm%E3%81%A7VRM%E3%81%AE%E5%BD%B1%E3%82%92%E5%BA%8A%E3%81%AB%E5%87%BA%E3%81%99
- VRM の影を床に出す実装を参考にした
やっていて詰まった点は主に VRM のバージョン関連であった。
VRM はバージョン 0.0 から 1.0 になるときに Z 軸方向が逆になっている。
https://github.com/pixiv/three-vrm/blob/dev/docs/migration-guide-1.0.md
に書いてある通り VRMUtils.rotateVRM0 を呼んでおかないと、モデルが後ろを向いた状態で空間に降り立ってしまう。
また上記を入れたとしても、たとえばデフォルトの T 字ポーズから腕を下げようとして Z 軸周りの回転を加えると、VRM 0.0 と 1.0 では回転方向が逆になる。
少なくとも VRoid Studio で出力したモデルは vrm.meta.metaVersion にバージョン情報が入っているので、これを元にして制御した。
VRMA でのアニメーションは VRM 0.0 でも 1.0 でも問題なく読み込めるのだが、VRMA 自体に制御が入っているのか、Z 軸方向に関係なく動かせるように指定することができるのかはよくわかっていない。
それ以外には様々なリソースの破棄について
https://threejs.org/docs/#manual/ja/introduction/How-to-dispose-of-objects
のように個別に破棄しなければならないのが難しかった。
幸い three-vrm には deepDispose という関数があって、マテリアルとかジオメトリとか持ってそうなやつは deepDispose を使えばよさそうであった。
ただ、正直未だにきちんと全てが破棄できているかは自信が無い。
もともと Unity で 3D をやっていた当時は平面を繋げて波面を作るというようなことをしていて、単に市販のモデルを配置するというよりも詳しく扱っていたと思うので、マテリアルだとかテクスチャだとか、そういうものへの理解は役だったと思う。
以上