Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
キーボードとマウス入力で動かすVRM(キャラ付き版)
Search
Baku_Dreameater
May 22, 2019
Technology
0
1.4k
キーボードとマウス入力で動かす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
160
趣味開発でVRM1.0モデルに対応した話
bakudreameater
1
4.8k
Oculus Questでマリオネットを召喚して遊んでみた
bakudreameater
1
1.4k
キーボードとマウス入力で動かすVRM(キャラ無し版)
bakudreameater
0
150
Other Decks in Technology
See All in Technology
LLM開発・活用の舞台裏@2024.04.25
yushin_n
3
1.4k
AWSやJAWS-UGとの出会いを振り返る
yoyoyopg
1
180
サービス開発におけるVue3とTypeScriptの親和性について
tsukuha
0
120
【基本】データベース設計
oracle4engineer
PRO
2
280
自己改善からチームを動かす! 「セルフエンジニアリングマネージャー」のすゝめ
shoota
6
1.1k
2024春 注目のWeb系 OSS & SaaS 3選
makies
0
210
Microsoft for Startups Founders Hub_20240429 update
daikikanemitsu
1
2.5k
M&A戦略を支えるデータマネジメント (MIDAS Tech Study #16 GENDA Komiyama)
kommy339
1
170
社内アプリで Cloudflare D1を プロダクト運用してみた体験談(Tokyo)
haochenx
0
130
データ基盤を支える技術
chanyou0311
0
110
データベース03: 関係データモデル
trycycle
0
110
20分で完全に理解するGrafanaダッシュボード
hamadakoji
5
990
Featured
See All Featured
Typedesign – Prime Four
hannesfritz
36
2.1k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
117
18k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
41
4.4k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
245
20k
Statistics for Hackers
jakevdp
790
220k
Designing the Hi-DPI Web
ddemaree
276
33k
Learning to Love Humans: Emotional Interface Design
aarron
267
39k
Ruby is Unlike a Banana
tanoku
96
10k
Optimizing for Happiness
mojombo
370
69k
Git: the NoSQL Database
bkeepers
PRO
423
63k
Why You Should Never Use an ORM
jnunemaker
PRO
51
8.7k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
660
120k
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