ロボット・マルチプレイ開発を実現する仮想化技術 Unity + Photon + ROS2 + Oculus Quest2 + 箱庭！(3/3)

# ロボット・マルチプレイ開発を体験する

前回で，複数 PC からクラウド環境(Photon)にオンラインで入って，ロボット・マルチプレイ開発できるようになりました．

最終回となる今回は，これまで構築してきた箱庭クラウド環境に，箱庭アバターでログインできるようにします！臨場感のある箱庭 VR 体験ができるようになります！レッツダイブ！

1 回目：[TOPPERS/箱庭に複数のロボット(TB3)を自由に配置して動かす](https://qiita.com/kanetugu2018/items/28c137b78ec6ec74033a)
2 回目：[Photon対応版箱庭を複数のパソコンで起動して，ロボット・マルチプレイする！](https://qiita.com/kanetugu2018/items/19d8fb22ef983cc5dc49)
3 回目：Photon&Oculus対応版箱庭使って，複数人で箱庭VR空間にダイブする！(本記事)

なお，この３連載記事内容は，[オープンソースカンファレンス2022 Nagoya](https://event.ospn.jp/osc2022-online-nagoya/session/579215) にて紹介しますので，興味のある方はぜひご参加ください．

# 箱庭クラウド環境にダイブする上で必要なモノ
箱庭クラウド環境にダイブするためには，本連載の[２回目](https://qiita.com/kanetugu2018/items/19d8fb22ef983cc5dc49)の環境構築ができている必要があります．

その上で，今回の新たに必要となる機器は，以下の Oculus が必要となります．

* ハード：Oculus Quest2
* リンクケーブル：[oculus quest 2用 ケーブル](https://www.amazon.co.jp/dp/B08NJ2KX52)

また，Oculus と PC 間で通信できるように Oculus Link をインストーしておく必要があります．Oculus Link のインストール方法はこちらをご参照ください

https://support.oculus.com/articles/headsets-and-accessories/oculus-link/connect-link-with-quest-2/?locale=ja_JP

# アーキテクチャ
ここで，箱庭VR体験向けのアーキテクチャは下図のようになります．

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244147/f614d4fe-9f2e-4dc8-5dcb-f4f224cd293d.png)

２回目の記事で，２台のPCから Photon サーバー通して，ロボット・マルチプレイ開発できるようになっていました．上図の拠点2と3が Photon サーバーにつながっている構成です．

この構成に対して，画面左下の箱庭アバター(拠点1)というものが，同様に Photon サーバーにログインして，箱庭 VR 空間上で，箱庭クラウド環境で動いているロボットたちを観察します．


# ロボット・マルチプレイ開発向け箱庭リポジトリ
この３連載記事をまとめたリポジトリを以下で公開しました．

https://github.com/toppers/hakoniwa-ros-multiplay

リポジトリ構成としては，以下のようになります．

* １回目の記事：ロボット・マルチプレイ開発をローカルPCで実現する
  * multiplay-local
    * [hakoniwa-ros-simulator](https://github.com/toppers/hakoniwa-ros-simulator)の main ブランチを submodule で参照しています．
* ２回目の記事：ロボット・マルチプレイ開発を複数拠点のPCで実現する
  * multiplay-photon 
    * [hakoniwa-ros-simulator](https://github.com/toppers/hakoniwa-ros-simulator)の photon ブランチを submodule で参照しています．
* 本記事：箱庭VR空間にダイブして，開発中のロボットを観察する
  * oculus-photon
    * 箱庭 VR 体験するための Unity 環境や箱庭アセットなどを管理しています

# 箱庭 VR 体験するためのセットアップ
ここでは，ロボット・マルチプレイできる環境を構築されていることを前提として，箱庭 VR 体験をする上で必要なセットアップ手順を説明します．

ロボット・マルチプレイできる環境を構築されていない方は，[２回の記事](https://qiita.com/kanetugu2018/items/19d8fb22ef983cc5dc49)を参照頂き，環境構築をお願いいたします．

セットアップ手順は以下の通りです．

1. ロボット・マルチプレイ開発向け箱庭リポジトリをクローン
2. 箱庭モデルのインストール
3. Unity の [Oculus Integration](https://assetstore.unity.com/packages/tools/integration/oculus-integration-82022?locale=ja-JP) をインストール
4. Photon の App ID PUN を設定

なお，今回の解説向けに動作確認した環境構成は以下の通りです．

* Windows 11/WSL2 Ubuntu 20.04.3 LTS
* Unity 2021.3.0f1
* Unity Hub：3.1.2

## ロボット・マルチプレイ開発向け箱庭リポジトリをクローン
任意のディレクトリ上で，ロボット・マルチプレイ開発向け箱庭リポジトリをクローンしましょう．

```shell
$ git clone --recursive https://github.com/toppers/hakoniwa-ros-multiplay.git
```

なお，今回は，`/mnt/c/project` 直下にクローンしました．

クローンが終わったら，`hakoniwa-ros-multiplay`ディレクトリができていますので，移動して，ls してみましょう．

```shell
$ cd hakoniwa-ros-multiplay
$ ls
multiplay-local  multiplay-photon  oculus-photon  README.md
```

## 箱庭モデルのインストール
次に箱庭モデルをインストールするために，以下のコマンドを実行しましょう．

```
$ bash oculus-photon/install.bash
```

* 補足
  * Unityモデルは git 上で管理するには大容量になるバイナリファイル等がありますので，そういったものは，ダウンロードして取得して展開する方針としております．

## Unity の [Oculus Integration](https://assetstore.unity.com/packages/tools/integration/oculus-integration-82022?locale=ja-JP) をインストール

まず，Unity Hub を起動しましょう．
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244147/a44be7ba-2449-d607-4774-10ce70fa9f75.png)

次に，画面右上の「開く」をクリックして，先ほどクローンしたディレクトリをたどり，「hakoniwa-ros-multiplay/oculus-photon/avator」を選択します．

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244147/19258bbb-f6fe-52f1-51c5-d5f44d158a77.png)

* 補足
  * 環境によりますが，自分の環境ですと，Unity 起動するのに数分かかりますので気長に待ちましょう．

Unity起動するとこうなります．
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244147/5b757493-cd27-a63d-71de-48824ac8ca04.png)

画面下を見ると，赤字でエラー出てますが，Oculus Integration パッケージがインストールされてないためです．というわけで，いざインストールです．

こちらから，「Unityで開く」をクリックし，インストールします．

https://assetstore.unity.com/packages/tools/integration/oculus-integration-82022?locale=ja-JP

クリックすると，Unityのパッケージマネージャが起動し，Oculus Integration 画面が現れますので，ダウンロードして，インポートしましょう．

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244147/2190c17c-47f5-9305-30a4-70fc44022993.png)

インポートボタンを押下すると，以下のダイアログが出てきますので，インポートします．

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244147/b21296dc-b317-59d7-fb56-8274e76acc61.png)

* 補足
  * ここでも数分待ちます・・

インポート中にいくつか確認ダイアログが出てきますが，一連の対応内容は以下の通りです．すべて終了すると，再起動して，画面下にあったエラーが消えます．

* Yes
  * ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244147/939b6d78-63e9-a00d-b40f-8c3cf270e884.png)
* Use OpenXR
  * ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244147/ebf9e361-72aa-8d27-7dda-fd89d61b138a.png)
* Ok
  * ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244147/a380ec95-2a1d-7c87-53ba-153c9af7f606.png)
* Restart
  * ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244147/8162d2fc-4442-3c0a-b09c-233c6dd38320.png)
* Upgrade
  * ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244147/4a27a107-7cc1-3375-240b-82310c0fdb53.png)
* Restart
  * ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244147/0c75d1cb-a4b5-9a5c-725a-dcb9c8092a14.png)

ここから，Unityのプロジェクト設定です．まずは，[Edit]->[Project Settings...]をクリックしましょう．

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244147/4fd1bfaf-0a11-a3a8-ce90-8a818acfff0e.png)

画面左下の[XR Plugin Management]を選択すると，[Install XR Plugin Management]ボタンがありますので，クリックします．

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244147/800f2c68-71f5-707c-b1b9-6336366b9c3d.png)

インストール終了後，中央にある[Oculus]にチェックを入れます．

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244147/a251c14a-f6e6-b122-82df-fe76f01e2cb2.png)

最後に，Unityのプロジェクトビューの「Scenes」を選択して，「HakoniwaAvator」シーンをクリックしましょう．

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244147/123fb687-01d6-90f4-cc14-430fcce593e7.png)

画面中央に，いつもの箱庭シミュレーション空間が現れます．

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244147/bbe06f7a-ed47-2a68-1aa6-c71aadc05170.png)


## Photon の App ID PUN を設定
２回目の記事でやったように，PhotonUnityNetworking設定で， App ID PUN を設定しましょう．

メニューの[Windows]->[Photon Unity Networking]->[PUN Wizard]をクリックしてください．

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244147/4c2eb96f-edec-c516-8565-a6849835bbb6.png)

そうすると，以下のダイアログがポップアップされますので，Locate PhotonServerSettingsをクリックしましょう．

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244147/315bcf08-f0a0-ab22-3985-bc091cb81edc.png)

インスペクタビューが開きますので，(T.B.D)となっているApp ID PUN に，登録したアプリケーションIDを入力してください．

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244147/4e2db351-cbbb-9bbb-002a-f211861c414a.png)

以上でセットアップは終了です！お疲れ様でしたー．

# 箱庭アバター使って，箱庭 VR 空間にレッツダイブ！
箱庭 VR 空間にダイブするために，まずは，ロボット・マルチプレイを Photon 上で実行してください(参照：[２回目の記事](https://qiita.com/kanetugu2018/items/19d8fb22ef983cc5dc49))．

次に，Oculus Qeuest 2を装着して，PC 操作開始します．
先ほどセットアップしたUnityエディタ上で，シミュレーション開始します．

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244147/8b8c5cf1-8fc6-5333-7ffb-f16b6971266e.png)

うまくいくと，箱庭 VR 空間にダイブします．Oculus Quest2 備え付けのTouchコントローラを使って，方向転換および移動できます．

* 方向転換
  * 右Touchコントローラの「アナログスティック」を左右にふる
* 移動
  * 左Touchコントローラの「アナログスティック」を移動したい方向に向ける

ダイブした風景はこんな感じです．

https://twitter.com/kanetugu2020/status/1520376718166740993

なお，箱庭アバターは，以下の記事と同様な方法で作成しました．

https://qiita.com/kanetugu2018/items/0d57cf85f334cac39419

# この記事の背景的なところ

「[IoT（Internet of Things、モノのインターネット）は情報技術（IT）の総合格闘技です](https://monoist.itmedia.co.jp/mn/articles/2106/28/news012.html)」という名文句が示す通り，IoT のような複雑なシステム開発では，様々なエンジニアが様々な技術領域を横断して開発します．

こういう背景に対して，[TOPPERS](https://www.toppers.jp/) / [箱庭WG](https://toppers.github.io/hakoniwa/) では，『[箱庭](https://ja.m.wikipedia.org/wiki/%E7%AE%B1%E5%BA%AD)』 という新しいシミュレーション環境の構築を目指しています．この箱庭空間ができれば，様々なエンジニアが同じ仮想空間に集まって，ワイワイ議論しながら実証実験できるようになります．ただ，箱庭コンセプトを実現するのはなかなか大変なことだと思っており，出来るところから順番にやっています．

なお，ここ数年の活動のサマリはこちらをご参照ください．

* https://www.toppers.jp/newsletter/newsletter-2111.pdf
  * 上記記事の「箱庭 WG の活動紹介」のところです



# お知らせ：箱庭もくもく会

TOPPERS箱庭WGでは，もくもく会を不定期に開催しています．
本記事の内容を実際に試してみたい方や試してみたけど詰まっている方は，ぜひご参加ください．画面共有しながら参加者同士でサポートしたり，一緒に新しい機能を実装したりと”もくもく”しましょう．

https://hakoniwa.connpass.com/