ARでVRアバターを表示するシステムを構築しよう
•
2 likes•3,381 views
次のカンファレンスで発表した資料です。 ・どっかんナゴヤ'18 Jun. https://dcn.connpass.com/event/87240/ ・ABC 2018 Spring https://abc.android-group.jp/2018s/ プロジェクトファイル ・https://github.com/TORISOUP/AR_VR_Viewer #Unity
Recommended
More Related Content
What's hot
What's hot (20)
Similar to ARでVRアバターを表示するシステムを構築しよう
Similar to ARでVRアバターを表示するシステムを構築しよう (20)
More from torisoup
More from torisoup (19)
Recently uploaded
Recently uploaded (7)
ARでVRアバターを表示するシステムを構築しよう
- 2. 自己紹介 • とりすーぷ • @toRisouP • 個人ゲーム開発者 • 日本Androidの会Unity部 部員のはず
- 4. これなに？ • VR空間のアバターをARで表示するシステム • スマホだけでVR空間をそれっぽく見たい • VR側での演者の動きをそのままARで表示する • 通話機能で会話できる • ARカメラの位置をVR側から視認できる
- 5. Unityプロジェクト • githubで公開済み • https://github.com/TORISOUP/AR_VR_Viewer • CC0 で公開(一部スクリプトファイルを除く)
- 6. 今回の発表内容 • どうやって作ったか？のノウハウ共有 • 構成 • ワークフロー • VRMの使い方 • ネットワーク同期の話 • VR/ARの実装 • その他実装のコツ
- 7. 構成
- 9. プロジェクト構成 • １つのプロジェクトでAR/VRの両方をビルドする • 同じプロジェクトから両パターンビルドできるようにする • 単にプロジェクトを分けるのが面倒くさかっただけ…
- 10. 使ったもの • HTC Vive、Galaxy S8 • Unity 2018.1 / .NET 4.6 / C#6.0 • VRM / UniVRM • ARCore • SteamVR、Final IK • Photon Cloud、 Photon Voice
- 11. VRM • VRアプリケーション向け人型3Dアバターフォーマット • オープンソースで様々なプラットフォームで利用可能 • 利用ライセンスをファイル自体に埋め込める • 今回はVRMのUnity向けインポータ「UniVRM」も使用
- 12. ARCore • Google製のARライブラリ • Tangoの後継 • マーカ検知、マーカレストラッキング、床・壁の検知、光源推測、特 徴点抽出、認識した空間の共有 • 利用可能端末がかなり少ない（アップデートで追加はされている） • 今回の利用バージョンは1.2.0
- 13. SteamVR • Valve社が提供するVRプラットフォーム & SDK • PC向けVR開発に利用可能なSDK
- 14. Photon Cloud/Voice • Photon Cloud • ドイツのExit Games社製の通信フレームワーク＆クラウドサーバ • 20人同時接続までなら無料で利用可能 • Unity向けSDK（PUN）を利用して開発する • Photon Voice • Photon Cloudと連動して音声通信機能を追加するサービス
- 15. 開発方針 • 「モダンな開発をしたい」 • .NET 4.6 + C# 6.0 で開発 • 全体的に挙動を非同期にする(Task, Observable, async/awaitの活用) • DIをメインに使った開発 • static変数を使った参照解決をしない • GameObject.Find禁止
- 16. ワークフローの話
- 17. 制作の流れ 1. 通信デバッグ用のビルドを作成 2. VR/AR対応前の状態で動作確認 3. ARCoreを使った実装（InstantPreview) 4. Android実機確認 5. VR実装 6. 結合して動作確認
- 18. デバッグ用のビルドファイル • アバターがアニメーションを自動再生するだけのビルド • VR側のモック化として利用 • 通信機能だけ実装しておき、モーションデータを送信する @UTJ/UCL
- 19. シンプルなプロジェクトで先に作る • AR、VRは無視して単体で作れるところまで作る • モック化等の小技を駆使してデバッグをする 送信 受信 https://twitter.com/toRisouP/status/995230604928036864
- 20. ARCoreを導入して実験 • Instant Preview機能が便利 • USB接続されたスマホを使ってUnityEditor上でデバッグできる ←先程のデバッグ用ビルド https://twitter.com/toRisouP/status/995640657195581440
- 23. 「ワークフロー」のまとめ • コア部分は先に作っておくと楽 • AR実装、VR実装、それぞれで共通して動かせる部分を先に作る • AR/VRの状態をモック化できるようになってるとなお良い • ARとVRはプロジェクトを分けるべきだった • Switch Platformがツライ
- 24. VRMの使い方
- 26. VRMファイルを探すには • ニコニ立体で探すのが良い • 利用許可なライセンスのモデルを探して利用 • 今回はニコニ立体ちゃんを使用 https://3d.nicovideo.jp/works/td32797
- 27. Unityで使うためには • UniVRMを導入する必要がある • githubから導入すればOK • https://github.com/dwango/UniVRM • バージョンアップが頻繁 • （まだ安定している感じはしない）
- 28. Unity上でのVRMの取り扱い方 • ２パターンある • Prefab化する方法 • 動的にロードする方法
- 29. Prefab化する方法 • vrm拡張子のファイルは自動的にロードされてPrefab化される • ビルドファイルにモデルを埋め込むならこの手法が楽 • あとからユーザがモデルを差し替えるみたいなことはできない手法
- 30. 動的ロードする方法 • ランタイムロードしてモデルを生成する • 後から自由にモデルを変更できるようにするならこっち • VRMの使い方として、おそらくこの方法がメイン • 今回はこちらの方法でやる 直接ファイルパスを指定してロードする場合
- 31. おすすめのロード方法 • WWWで先にロードしてからVRMImporterに渡すのがおすすめ • VRMImporterのデフォルトはなぜか同期読み込み • Android実機ではWWWじゃないとロードできないディレクトリがある UniRxを導入しているとWWWもawaitできる https://github.com/TORISOUP/AR_VR_Viewer/blob/master/Assets/VrmArPlayer/ Scripts/Scene/Main/Common/AvaterProvider.cs
- 34. オリジナルの制御を加える場合は • AddComponentで自作コンポーネントを設定する • 同時に初期パラメータもこのタイミングで設定する • 初期化完了のタイミングを通知する機構を用意すると便利 指の曲げ制御コンポーネント https://github.com/TORISOUP/AR_VR_Viewer/blob/master/Assets/VrmArPlayer/ Scripts/Scene/Main/Common/AvaterController.cs#L46
- 35. VRMアバターの制御
- 36. 今回組み込んだ機能は３つ • 表情の操作 • 指の曲げ伸ばし操作 • リップシンク
- 39. コントローラ操作で表情変更 • VRMBlendShapeProxy.SetValue()を使って設定する • 0 – 1の範囲で指定 タッチパッドを触った座標（２次元ベクトル）と設定された表情のベクトルとの内積をとった値を使う https://github.com/TORISOUP/AR_VR_Viewer/blob/master/Assets/VrmArPlayer/ Scripts/Scene/Main/Common/AvaterController.cs#L137-L140
- 40. 表情変更：ポイント１ • 表情を合成する場合はSetValue()の第三引数にfalseを指定 • trueの場合はその時の値で強制上書きになる • falseを指定した場合はApply()を呼び出すと合成値が反映される このタイミング(Update()内)ではすべてfalseにしておく LateUpdate()のタイミングでApply()
- 42. 指の曲げ伸ばし • VRMにデフォルトでは用意されていない • スクリプトを自分で用意する必要がある • FingerControllerコンポーネント （みゅみゅさん作のスクリプトを許可をもらって改変・配布） • これを動的にアタッチして使う https://github.com/TORISOUP/AR_VR_Viewer/blob/master/Assets/VrmArPlayer/ Scripts/Scene/Main/Common/FingerController.cs
- 43. コントローラ操作で指の曲げ伸ばし • 各コントローラのトリガーキーの入力を反映 • 曲げる/伸ばす の２段階のみ https://github.com/TORISOUP/AR_VR_Viewer/blob/master/Assets/VrmArPlayer/ Scripts/Scene/Main/Common/AvaterController.cs#L44
- 45. リップシンク • 音声に合わせて口パクする機能 • 今回は Oculus Lipsync Unity を使った • https://developer.oculus.com/downloads/package/oculus-lipsync- unity/
- 47. VRM まとめ • アバター制御の基本的な機能が揃っており便利 • Humanoidの制御に必要なことは最低限はできそう • 「動的ロード」はちょっと難しめ • プログラムが書けないとキビシイ • まだ出て間もないのでドキュメント不足気味
- 48. ネットワーク同期の話
- 49. ネットワーク同期する情報 • アバターの姿勢 • 頭、腰、手先、足先の座標と角度 • コントローラ入力値（表情・手の曲げ伸ばしに使用） • タッチパッドの座標とトリガーキーの状態 • ARカメラの座標 • VR空間内にARカメラがどこにあるかを表示するため
- 50. ネットワーク同期のやり方 • PUN (Photon Unity Networking) の機能をそのまま使うだけ https://github.com/TORISOUP/AR_VR_Viewer/blob/master/Assets/VrmArPlayer/ Scripts/Scene/Main/Common/AvaterSynchronizer.cs#L90-L134
- 51. ハマりどころ • VRMの動的ロードとPhoton Cloudの相性が悪い • Photon Cloudの同期の仕組みに乗せるにはPrefab化が必要 • VRMの動的ロードを使っているとPrefabが用意できない • VRMのアバターを直接同期する仕組みにすることができない
- 53. 解決策 • 「同期管理オブジェクト」と「アバター」を分離して作る • アバターを独立したGameObjectとして生成する • アバターが生成されたら同期管理オブジェクトに登録する • 同期管理オブジェクトがアバターの情報を同期する
- 57. ネットワーク同期 まとめ • Photon Cloudを使えばクライアント実装のみで完結する • VRMの動的ロードと合わせるには工夫が必要 • 同時接続数は1部屋あたり10人くらいが限界そう • Photon Cloudの制約（メッセージ数上限） • デモ用途なら十分 • 不特定多数への生放送に用いるには専用のインフラ構築が必要
- 58. VR側の実装の話
- 59. Steam VRを導入 • Asset Storeから導入する
- 60. IK • 終端を指定し、そこに向かって関節を制御する機能 • Inverse Kinematics(逆運動学) • IKのゴールにViveのHMDとコントローラの座標を 設定することでアバターが操作できるようになる
- 61. Final IK • Unity向けのIKアセット • VR対応 • IKやるならコレ
- 63. VR実装 まとめ • vtuberを実装する方法をそのまま行うだけ • ググったら情報いっぱい出てくる • VRで「結月ゆかり」になって生放送する https://qiita.com/toRisouP/items/14fe62f89808013f9f6e
- 64. AR実装の話
- 65. ARCore SDKを導入 • Githubからダウンロード • https://github.com/google-ar/arcore-unity-sdk/releases/tag/v1.2.0
- 66. サンプルコードをそのまま流用 • HelloAR • 平面を認識してタップした位置にドロイド君を表示するサンプル • これを流用し、タップ地点の座標を取り出せるようにした
- 70. 動かなかった理由 • パーミッションが足りない • マイクが不許可になってた • カメラの認可ダイアログは出たのに、マイクは出なかった • モデルデータがロードできない • StreamingAssetsはWWWでしかロードできない問題と衝突 • UniVRMをそのまま使うとFile.ReadAllBytesでVRMをロードしようとする
- 71. Androidビルドでデバッグするときは • Android Device Monitorが使える • Android SDKについてくるログ閲覧ツール • ビルド時にDevelopment BuildにするとDebug.Logがここに流れる
- 73. 回避策 • Android向けdllを無理矢理よみこませてビルドする • かなりバッドノウハウ • やはりARとVRでプロジェクトを分けたほうが良さそう… これを追加して無理矢理よみこませる
- 74. AR実装 まとめ • ARCoreのサンプルコードをそのまま使っただけ • ARCoreの自体の機能はほとんど活かせてない • VRプロジェクトとの混在は避けたほうが良さそう • ビルドは無理矢理通るようになったけど、 今度はInstant Previewがおかしくなった
- 75. その他実装のコツ
- 76. その１：処理の非同期化 • アバター読み込み、ネットワーク通信などで非同期処理が多い • async/await & UniRx が大活躍
- 77. UniRx • Reactive Exntensions for Unity • 非同期処理、イベント処理に強くなるライブラリ • Asset Storeから導入可能（無料） • MITライセンス
- 78. async/await + UniRx • コルーチンを使わずにWWWをawaitで待てる • VRMのロードもawaitで待てる
- 80. その2：設計の話 • どのモードで動いているか意識せずに作りたい • いまARなのか、VRなのかをできるだけ意識せずにコードを書きたい • オープン・クローズド原則を守りたい
- 81. どういうこと？ • たとえば「コントローラ入力」 • VR時：Viveコントローラの入力を使う • AR時：ネットワーク通信で送られてきた値を使う • デバッグ時：キーボードの入力を使いたい • これをif文で書き分けるみたいなことはしたくない • DIで乗り切ろう
- 83. Zenject • Unity向けのDIのフレームワーク • DIするならこれが便利 • Asset Storeから導入可能（無料） • MITライセンス
- 87. Installerをシーンごとにわけて用意する • VRモード、ARモードのシーンでそれぞれ中身を変える • VRのときはVR用InputEventProvider • ARのときはネットワーク同期用InputEventProvider VRモードのときのInstaller ARモードのときのInstaller https://github.com/TORISOUP/AR_VR_Viewer/blob/master/Assets/VrmArPlayer/ Scripts/Scene/Main/ForPC/ForPCInstaller.cs https://github.com/TORISOUP/AR_VR_Viewer/blob/master/Assets/VrmArPlayer/ Scripts/Scene/Main/ForSmartphone/ForSmartphoneInstaller.cs
- 90. DIはムズカシイ • 疎結合な設計ができてないと効果がない • オープン・クローズド原則 • 依存関係逆転の原則
- 91. 設計の勉強をするには • この資料を見て • Unity開発で使える設計の話＋Zenjectの紹介 • https://www.slideshare.net/torisoup/unityzenject
- 92. Zenjectを使う上での注意点 • DIの実行にはオブジェクトの存在をZenjectに認識させる必要 がある • 直接Instantiateしたり、AddComponentするとDIされない • あらかじめSceneに配置しておくか、Zenjectのコンテナ経由で GameObjectを作る/AddComponentを実行する必要がある
- 94. 解決策 • ZenAutoInjecterコンポーネントをアタッチする • これを対象につけておくとオブジェクト生成後にZenjectに認識される • 後追いでDIが実行されるようになる
- 95. ZenAutoInjectorを使う上での注意 • DIのタイミングがいつになるかわからない • Start()の実行までにDIが実行されないことがある • DIが終わったことを検知して処理を開始する仕組みにしよう
- 96. DIの実行を検知する方法 • メソッドインジェクションを使う • DIが実行されたタイミングでメソッドが実行される • その中でフラグを立てるなり、イベント飛ばすなりすればよい https://github.com/TORISOUP/AR_VR_Viewer/blob/master/Assets/VrmArPlayer/ Scripts/Scene/Main/Common/SynchronizeCamera.cs#L30-L42
- 97. その他実装のコツ まとめ • 非同期処理は対処法を知っておくべし • async/await, Task, UniRxの使い方を覚えておくと良さげ • Zenjectを使ったDIが非常に便利 • 無駄なif文/switch文を減らせる • わざわざマネージャクラスをシングルトン化する必要がなくなる • デバッグやテストがやりやすくなる
- 98. さいごに
- 99. 現状の問題点 • 技術デモの領域を出ない設計になってる • VR1人-AR1人、の1対1通信を想定した作りになってる • VR複数-AR複数、の多対多は現状の設計じゃ無理 • スケール性がない • まともにサービス化するなら通信サーバの開発、インフラ構築が必要 • 個人開発じゃ技術デモくらいが限界
- 100. さいごにまとめ • VR空間をARで可視化するのは夢がある • AR/MRデバイスがもうちょっと普及してくれたらありがたい • VRMが便利でオススメ • 簡単に人型アバターを動的ロードして扱えて良さげ • 今後の3Dコンテンツの主流フォーマットになってほしいな