$30 off During Our Annual Pro Sale. View Details »
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
キーボードとマウス入力で動かすVRM(キャラ付き版)
Search
Baku_Dreameater
May 22, 2019
Technology
0
1.7k
キーボードとマウス入力で動かすVRM(キャラ付き版)
キーボードとマウスでVRMを動かすVMagicMirrorというソフトを宣伝しつつ、全体的な技術背景を説明します。
Baku_Dreameater
May 22, 2019
Tweet
Share
More Decks by Baku_Dreameater
See All by Baku_Dreameater
自作ソフト(VMagicMirror)がVRMA対応してる話+実装のTips
bakudreameater
0
530
趣味開発でVRM1.0モデルに対応した話
bakudreameater
1
7.1k
Oculus Questでマリオネットを召喚して遊んでみた
bakudreameater
1
1.7k
キーボードとマウス入力で動かすVRM(キャラ無し版)
bakudreameater
0
230
Other Decks in Technology
See All in Technology
2025 DORA Reportから読み解く!AIが映し出す、成果を出し続ける組織の共通点 #開発生産性_findy
takabow
2
950
名刺メーカーDevグループ 紹介資料
sansan33
PRO
0
970
TROCCO 2025年の進化をデモで振り返る
__allllllllez__
0
280
機械学習を「社会実装」するということ 2025年冬版 / Social Implementation of Machine Learning November 2025 Version
moepy_stats
4
2.1k
"'TSのAPI型安全”の対価は誰が払う?不公平なスキーマ駆動に終止符を打つハイブリッド戦略
hal_spidernight
0
220
事業部のプロジェクト進行と開発チームの改善の “時間軸" のすり合わせ
konifar
9
2.5k
『星の世界の地図の話: Google Sky MapをAI Agentでよみがえらせる』 - Google Developers DevFest Tokyo 2025
taniiicom
0
460
Flutter Thread Merge - Flutter Tokyo #11
itsmedreamwalker
1
130
MCP・A2A概要 〜Google Cloudで構築するなら〜
shukob
0
120
Databricksによるエージェント構築
taka_aki
1
110
Eight Engineering Unit 紹介資料
sansan33
PRO
0
5.7k
【保存版】「ガチャ」からの脱却:Gemini × Veoで作る、意図を反映するAI動画制作ワークフロー
nekoailab
0
130
Featured
See All Featured
The Illustrated Children's Guide to Kubernetes
chrisshort
51
51k
How GitHub (no longer) Works
holman
316
140k
It's Worth the Effort
3n
187
29k
How to Think Like a Performance Engineer
csswizardry
28
2.3k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.7k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
36
6.2k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.3k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
Why Our Code Smells
bkeepers
PRO
340
57k
Scaling GitHub
holman
464
140k
Transcript
キーボードとマウス入力で 動かす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