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

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

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

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

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

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

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

入力キャプチャのやり方 マウス ：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

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

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

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

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

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

14 補足

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

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

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

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