Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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さん

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  7. UnityのBlendShape

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  10. BlendShapePloxy

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  13. VRMフォーマットと
    BlendShape

    View full-size slide

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

    View full-size slide

  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個

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

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

    View full-size slide