キーボードとマウス入力で動かすVRM(キャラ付き版)

キーボードとマウスでVRMを動かすVMagicMirrorというソフトを宣伝しつつ、全体的な技術背景を説明します。

Transcript

1. キーボードとマウス入力で
   動かすVRM
   獏星(ばくすたー)@baku_dreameater
   2019/05/22
   第2回VRM勉強会
   1
   

   View Slide

2. 自己紹介
   獏星(ばくすたー)
   @baku_dreameater
   ・仕事：ロボット関係+モバイルアプリ
   ・趣味：洋食屋さん巡り
   ・好きなもの：マレーバク
   2
   プレゼン中はここでも
   わちゃわちゃしてます
   

   View Slide

3. 話すこと
   宣伝
   ・「VMagicMirror」というソフトの紹介
   知見の紹介
   ・「VRデバイス無くても結構いい線行くよ」という話
   ・余談：常駐化に関係ある事
   3
   

   View Slide

4. (※宣伝)VMagicMirrorについて
   ・Windows向けのVRM表示ソフト
   ・デスクトップマスコットにもなります
   BOOTH
   https://baku-dreameater.booth.pm/items/1272298
   ソースコード(MITライセンス)
   https://github.com/malaybaku/VMagicMirror
   4
   

   View Slide

5. VMagicMirrorの雰囲気
   1: 何か適当にテキストを打つ
   TODO: この辺にテキスト
   2: プレゼンモード
   5
   ※このLTスライドは
   実演前提で作ってあります
   

   View Slide

6. なぜキーボードとマウスなのか
   デバイス構成を絞る
   ・すぐ使える=VRMと好相性
   自分をモーキャプする最小構成を考える
   ・プログラマとしてはキーボード叩くだけでも足りそう
   一体感
   ・作業風景ならキーボードとマウス操作が主のハズ
   そこだけ使えば十分な一体感が出せそう
   追加: デスクトップ常駐力を高めたい
   6
   私がかんがえたVRM沼
   ・PC単体で動くソフトで誘致
   ・トラッキング欲が次第に高まる
   ・気づいたらVRデバイスを買っている
   

   View Slide

7. アプリケーションの構成
   WPF Unity
   7
   WPFで設定UIを作ると実装がラク！
   ※gRPCについての詳細は無しで…
   (毛の生えたTCP通信扱いしてます)
   gRPC
   ・コンフィグUI
   ・設定ファイルI/O
   ・Windowsっぽい事
   (レジストリ操作等)
   ・キャラ表示
   ・視点コントロール
   ・モーション (FinalIK)
   ・リップシンク(AniLipSync)
   ・顔トラッキング
   (DlibFaceLandmarkDetector)
   

   View Slide

8. 入力キャプチャのやり方
   マウス ：Unity標準のMouse.inputPosition
   キーボード ：WPFアプリ内でグローバルフックを
   使ってキャプチャ(*1)
   ゲームパッド：XInputGamePad(*2)
   ※Unity向けのUnityRawInput(*3)も多分使えるが、
   VMagicMirrorでは非使用
   8
   *1: https://github.com/malaybaku/VMagicMirrorConfigのKeyboardHook.cs
   *2: https://github.com/kaikikazu/XinputGamePad
   *3: https://github.com/Elringus/UnityRawInput
   

   View Slide

9. キーボード配列と運指の設計
   手元のSJISキーボードを眺めて全部決め打ち。
   例：”A”キーはどこにある？また、どの指で打鍵する？
   ・”A”は3列目、左から2番目のキー
   ・”A”はいつも左手小指で打鍵する
   ○実装が簡単なわりに見栄えよし
   △海外のキーボード配列ではちょっと不自然
   △変態自作キーボードと相性が悪い
   9
   ソース：
   https://github.com/malaybaku/VMagicMirror
   以下のKeyboardProvider.cs
   楽器では厳しい手法。
   キーボードの特権！
   

   View Slide

10. マウス注視 + デスクトップの奥行きイメージ
    10
    壁紙 + 他アプリ
    キャラクター
    マウスポインタ
    ＝ キャラの注視点
    ≒ ユーザー注視点
    視点はあくまで横～前方を向き。
    背後の他アプリは直接は見ません。
    (顔が見えないと嫌でしょ？)
    

    View Slide

11. 指さしモーション
    やりたい事
    指先 ≒ マウス位置になるように動かす
    やり方
    Mouse.ScreenToWorldPoint()でIK位置を決める
    ・XY: Mouse.inputPositionそのまま
    ・Z: カメラ-キャラ頭部間の距離をめやすに決定
    その他
    ・胴体付近に腕がめり込まないようガードすると◎
    11
    奥行き意識が大事！
    

    View Slide

12. キーボード・マウスでは動かない部分
    表情の動き
    ・まばたき→てきとうに一定間隔で1回or2回まばたき
    ・目の閉じ具合に合わせて瞳孔を下げる+眉毛も上下
    (※眉毛については補足参照)
    ・表情ショートカットキーは現状なし
    →キーボード入力がバレます
    ・デフォルトでFunブレンドシェイプが有効(30%程度)
    全身動作
    ・呼吸動作をスクリプトベースで適用
    ・待機アニメーションは非使用
    (IKとの競合回避のため)
    12
    トークに興味ない人は
    まばたきにご注目…
    

    View Slide

13. 余談：透過 (非矩形ウィンドウ)について
    実装方式
    ・Win32APIで実現→キルロボ(@kirurobo)さんの記事等(*1)
    ・「透明な部分でもヒットテスト(当たり判定)が有効」問題…
    →上記記事の方法だと対策済み！
    あると嬉しい事
    ・スクリーン丸ごと見せたいときに強力
    ・常駐力が高い
    なくてもいい理由
    ・配信ソフト任せでもいい(単色背景)
    ・ハンパに実装するとヒットテスト制御で苦労
    →キャラが邪魔に感じられるとあまり嬉しくない
    13
    興味をもった人は
    「透過ウィンドウ」だけでなく
    「非矩形ウィンドウ」でもググること！
    後者のほうがコアなネタが出てきます。
    *1: https://qiita.com/kirurobo/items/013cee3fa47a5332e186
    

    View Slide

14. 14
    補足
    

    View Slide

15. 顔トラッキングについて
    ・多少いい加減でも載ってると嬉しい
    ・パラメータ調整は最小0個か1個
    ・顔全体の位置/角度トラッキングだけでも
    だいぶ変わる
    ・FPS低下の対策も仕込んでおくと○
    →とりあえず顔検出メソッドはUIスレッド外に逃がす
    15
    

    View Slide

16. 眉毛 on VRM
    ・VRMBlendShapeProxyを経由せず、
    直にブレンドシェイプを設定すればOK
    ※眉単独の動作は(まだ)VRM仕様外！あくまで「ついで」
    ・手動設定UIを作るとゴチャゴチャする
    →とりあえずVRoidStudio製モデルでは自動セットアップ
    16
    

    View Slide

17. その他の知見
    ・顔トラッキングが使える環境で手元を隠す
    →肩がそれっぽく動くので意外と有効
    ・英語UIは意外と大事
    海外の方は色々な方法で
    貴方を見つけてきます(VRChat経由とか)
    17
    キーボードが隠れる位置まで
    下がってみると…
    

    View Slide

18. このLTスライドのレイアウト
    ・左にメインコンテンツ
    ・右下は空白orキャラ背景
    ・右上はセリフとかリアクション芸コーナー
    セリフ枠このへん
    18
    スライド番号は左下へ！右下はNG
    

    View Slide