$30 off During Our Annual Pro Sale. View Details »

XR Kaigi 2020 VRMで表情を こねくりまわす技術

m2wasabi
December 10, 2020

XR Kaigi 2020 VRMで表情を こねくりまわす技術

Table of Contents
BlendShapeProxyの仕組み
表情はVRMの中でどう保存されているのか
エコにする:ShapeShifterの紹介
豊かにする:パーフェクトシンク文化圏
未来の話:VRM1.0での表情周りの改定(予定)

Related Links
P3. https://m2wasabi.booth.pm/
P4. https://github.com/m2wasabi/VRMLoaderUI
P4. https://github.com/m2wasabi/VRMQuickMetaLoader

P11. BlendShapeのセットアップ(v0.45) | VRM Document

P18. https://github.com/m2wasabi/ShapeShifter

P23. パーフェクトシンクであそぼう! | はいぬっかメモ
P23. xR Developers Community Conference | YouTube
P24. ARFaceAnchor.BlendShapeLocation | Apple Developpers
P25. HANA Tool

P27. https://github.com/vrm-c/vrm-specification/pull/175

m2wasabi

December 10, 2020
Tweet

More Decks by m2wasabi

Other Decks in Technology

Transcript

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

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

    最近CSM取得しました フリーランスエンジニア
  3. 書いた本 https://m2wasabi.booth.pm/ Boothで書いたもの☝

  4. 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さん
  5. 今回の内容 • UnityのBlendShapeについて • BlendShapeProxyの概要 • VRMフォーマットとBlendShape • 便利ツールShapeShifterの紹介 •

    閑話休題:パーフェクトシンク文化圏 • 未来の話:VRM1.0の表情の整理
  6. 今回の話が役に立ちそうな人 • 自分のアバターにVRMを使う人 • VRMモデルをモデリングする人 • モデルをセットアップする人 • VRM実装に興味のあるエンジニア •

    VRMアバター制作ツールを作っている人 • 今回は実装に突っ込んだ話はしません!
  7. UnityのBlendShape

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

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

  10. BlendShapePloxy

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

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

    https://vrm.dev/docs/univrm/blendshape/blendshape_setup/
  13. VRMフォーマットと BlendShape

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

  15. 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個
  16. バリエーションと最適化のジレンマ • 表情のバリエーションを持たせつつ • アプリ利用では最適化したものを使いたい ツール作ってみた

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

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

  19. ShapeShifterのご紹介(2/4) • 使い方 Window -> ShapeShifter -> ShapeShifter VRM で設定ウィンドウを呼び出す

    Prefab Mesh BlendShapeClip を設定して ReplaceBlendShapes ボタンを押す
  20. ShapeShifterのご紹介(3/4) • 結果 7695KB before 6346KB after これを VRMエクスポート する

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

    性格 個性 設定 アバターメイカー アプリ
  22. 閑話休題 パーフェクトシンク文化圏

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

  25. パーフェクトシンク文化圏(3/3) • Tools  HANA Tool  BlendShapeを付けたり剥がしたりするツール  VRoid用のパーフェクトシンクが同梱されている

    • Apps  vear  Emosign  waidayo →次の発表で詳細  VMagicMirror(with iFacialMocap) https://booth.pm/ja/items/2437978
  26. 未来の話 VRM1.0における表情の整理

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

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