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

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

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

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

Baku_Dreameater

May 22, 2019
Tweet

More Decks by Baku_Dreameater

Other Decks in Technology

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