VRMで表情を こねくりまわす技術 BlendShapeと仲良くなろう XR Kaigi 2020 2020/12/10 えむにわ @m2wasabi

自己紹介 • 山本 允葵 (Masaki Yamamoto) えむにわ @m2wasabi 普段はサーバーサイド・インフラを触る フルスタック寄りエンジニア 最近CSM取得しました フリーランスエンジニア

書いた本 https://m2wasabi.booth.pm/ Boothで書いたもの☝

VRM関連ライブラリ VRMのMeta情報を高速で読み込むライブラリ https://github.com/m2wasabi/VRMQuickMetaLoader VRMのMeta情報（作者・規約・サムネイルなど）を 爆速で読み込むライブラリ MITライセンス JobSystemに対応 VRM.QuickMetaLoader VRMを読み込むUI https://github.com/m2wasabi/VRMLoaderUI ソースは MITライセンス アートワークは CC0 編集自由なのでカスタマイズして使おう！ VRM Loader UI Special Thanks pCYSl5EDgoさん

今回の内容 • UnityのBlendShapeについて • BlendShapeProxyの概要 • VRMフォーマットとBlendShape • 便利ツールShapeShifterの紹介 • 閑話休題：パーフェクトシンク文化圏 • 未来の話：VRM1.0の表情の整理

今回の話が役に立ちそうな人 • 自分のアバターにVRMを使う人 • VRMモデルをモデリングする人 • モデルをセットアップする人 • VRM実装に興味のあるエンジニア • VRMアバター制作ツールを作っている人 • 今回は実装に突っ込んだ話はしません！

UnityのBlendShape

UnityのBlendShapeについて(1/2) • BlendShapeとは UnityでVertexMorphingを実現する機能 頂点の位置・法線の向きの変位を記録 記録した変位を重みを付けて適用する

UnityのBlendShapeについて(2/2) • BlendShapeの辛いところ BlendShapeの命名規則には制限がない 制御方法が自由で実装が散らかりがち 自由すぎる

BlendShapePloxy

BlendShapeProxyについて • BlendShapeを纏めて、 一定の制約を課すもの 表情のデフォルト設定枠 表情を設定する標準関数

BlendShapeProxyについて(option) • 表情にBlendShapeだけでなく、マテリア ルの属性を定義することができる 色変更・UV座標 • 中間状態を表示させたくない場合、2段階 の表情切替も可能 詳細はこれ読むか 公式ドキュメントサイト https://vrm.dev/docs/univrm/blendshape/blendshape_setup/

VRMフォーマットと BlendShape

VRMフォーマットと BlendShape(1/2) • VRMファイルの中で、BlendShapeは 頂点と法線の変位として保存される • 頂点群はメッシュごとに保存されるので メッシュが分かれている方が容量は少ない ・・・ ・・・

VRMフォーマットと BlendShape(2/2) • BlendShapeの容量計算の一例 要素 値 顔の頂点数 10,000 BlendShape数 40 頂点1個 あたり 座標 (x, y, z) as float(4bytes) 法線 (x, y, z) as float(4bytes) 計 24bytes BlendShape1個 あたり 24bytes * 10,000 = 240KB BlendShape合計 240kB * 40 = 9600KB ≒ 10MB 顔を分離してなかったり、 ハイポリすぎると恐ろしいことになります 豆知識：アリシアさんのfaceは 頂点数 1,894頂点 BlandShape 49個

バリエーションと最適化のジレンマ • 表情のバリエーションを持たせつつ • アプリ利用では最適化したものを使いたい ツール作ってみた

ShapeShifter -自作ツールのご紹介-

ShapeShifterのご紹介(1/4) • MITライセンスで自由に使える、 BlendShapeを再構築するツール • DemoのためにBlemdShapeProxyを使って いますが、コードを書けば VRMでなくてもBlendShapeを合成可能 https://github.com/m2wasabi/ShapeShifter

ShapeShifterのご紹介(2/4) • 使い方 Window -> ShapeShifter -> ShapeShifter VRM で設定ウィンドウを呼び出す Prefab Mesh BlendShapeClip を設定して ReplaceBlendShapes ボタンを押す

ShapeShifterのご紹介(3/4) • 結果 7695KB before 6346KB after これを VRMエクスポート する 約2割の削減

ShapeShifterのご紹介(4/4) • さらに応用 アバター作成ツールを作ってる人向け マスターデータから、個性パラメータで 表情生成(善-悪,活発-大人しい)など Master VRM(全部入り) Distribution VRM 性格 個性 設定 アバターメイカー アプリ

閑話休題 パーフェクトシンク文化圏

パーフェクトシンクとは(1/3) • はいぬっか氏が提唱するiOSのARKitの ARFaceAnchor.BlendShapeLocation を VRMで再現する仕様 • 初出はxR Developers Community Conference noppe氏の講演 https://hinzka.hatenablog.com/entry/2020/08/15/145040 https://www.youtube.com/watch?v=b83xymLi8O4&t=3467s

パーフェクトシンクとは(2/3) • ARFaceAnchor.BlendShapeLocation の定義 そのままの名前で BlendShapeProxyを設定する(52パターン) • アプリ側はその命名のままARKitから得たパ ラメータで操作する https://developer.apple.com/documentation/arkit/arfaceanchor/blendshapelocation

パーフェクトシンク文化圏(3/3) • Tools  HANA Tool  BlendShapeを付けたり剥がしたりするツール  VRoid用のパーフェクトシンクが同梱されている • Apps  vear  Emosign  waidayo →次の発表で詳細  VMagicMirror(with iFacialMocap) https://booth.pm/ja/items/2437978

未来の話 VRM1.0における表情の整理

VRM1.0における表情の整理 • ラッセルの感情円環モデルを基準に表情の 整理が行われる https://github.com/vrm-c/vrm-specification/pull/175 New! Renamed! from [fun] 快 不快 覚醒 眠気 neutral joy angry sorrow fun 快 不快 覚醒 眠気 neutral joy angry sorrow relaxed surprise

まとめ • VRMのBlendShape完全に理解した。多分！ • ShapeShifter使ってみて！ • VRM1.0で表情増えるよ ※アバターメイカーアプリの素体提供とか、 そういうのOKなモデラーさんいたら友達になってください‍♂️

Thanks for your attention Next: nmちゃん VTuber(本物)