Neos ARのやり方

[Neos VR Advent Calendar 2022](https://adventar.org/calendars/7623) 11日目の記事です！
昨日はhardhattさんの[Neosをやる上で、知っておくと得するTips](https://note.com/hardhatt/n/n90df21be8e51)でした。

# Neos ARとは？
Neos VRを現実空間でプレイしている映像が撮れる仕組みです。
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">Neos VRでMRできるようにしてみた！😂<br>近々使うかもなので技術検証中🔧<a href="https://twitter.com/hashtag/NeosVR?src=hash&amp;ref_src=twsrc%5Etfw">#NeosVR</a> <a href="https://twitter.com/hashtag/mixedreality?src=hash&amp;ref_src=twsrc%5Etfw">#mixedreality</a> <a href="https://t.co/hUgQ7FrUv3">pic.twitter.com/hUgQ7FrUv3</a></p>&mdash; オレンジ/メタバース撮影技術者 (@orange_3134) <a href="https://twitter.com/orange_3134/status/1569586938268758016?ref_src=twsrc%5Etfw">September 13, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Neos VRって何？という方はこちら。
最も汎用性の高いメタバースプラットフォームです。

https://youtu.be/60B6YU-Jszo

# 使うもの
- VR機器
- パソコン
- Webカメラ（スマホでもOK）
- VIVEトラッカー

Webカメラ以外にもスマホやミラーレス一眼、ビデオカメラなど、PC上にWebカメラとして映像を取り込める物ならなんでもOKです。

# やり方
## スマホをWebカメラにする（スマホを使う場合のみ）
このアプリをインストールして、スマホをWebカメラにします。

Android版

https://play.google.com/store/apps/details?id=com.dev47apps.droidcam&hl=ja&gl=US

iOS版

https://apps.apple.com/jp/app/droidcam-webcam-obs-camera/id1510258102

## カメラにVIVEトラッカーを付ける
このようにします。
![IMG_0224.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/919266/149931bf-67d2-1733-752d-f4aadc6dd782.jpeg)


このようなアダプターを使うと簡単です。

https://www.amazon.co.jp/SmallRig-%E3%82%B9%E3%83%9E%E3%83%9B%E4%B8%89%E8%84%9A%E3%83%9B%E3%83%AB%E3%83%80%E3%83%BC-%E3%82%B9%E3%83%9E%E3%83%BC%E3%83%88%E3%83%95%E3%82%A9%E3%83%B3%E4%B8%89%E8%84%9A%E3%83%9E%E3%82%A6%E3%83%B3%E3%83%88-%E9%87%91%E5%B1%9E%E8%A3%BD%E3%82%B9%E3%83%9E%E3%83%9B%E3%82%AF%E3%83%AA%E3%83%83%E3%83%97-Tiktok%E4%B8%89%E8%84%9A%E7%94%A8%E3%83%BC3836/dp/B0B49NGGKD/ref=sr_1_13?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&crid=2N43XFM2316XD&keywords=smallrig+%E3%82%B9%E3%83%9E%E3%83%9B&qid=1670148717&sprefix=smallrig+%E3%82%B9%E3%83%9E%E3%83%9B%2Caps%2C169&sr=8-13

https://www.amazon.co.jp/UTEBIT-%E3%83%9B%E3%83%83%E3%83%88%E3%82%B7%E3%83%A5%E3%83%BC-%E3%80%8C4%E7%82%B9%E3%82%BB%E3%83%83%E3%83%88%E3%80%8D-%E5%BC%B7%E5%8C%96%E3%82%A2%E3%83%AB%E3%83%9F%E8%A3%BD-Canon%EF%BC%86Nikon%E9%81%A9%E5%BF%9C/dp/B077FYKQ6L/ref=sr_1_19_sspa?keywords=%E3%83%9B%E3%83%83%E3%83%88%E3%82%B7%E3%83%A5%E3%83%BC%E3%82%A2%E3%83%80%E3%83%97%E3%82%BF%E3%83%BC&qid=1670148803&sprefix=%E3%83%9B%E3%83%83%E3%83%88%E3%82%B7%E3%83%A5%E3%83%BC%2Caps%2C168&sr=8-19-spons&psc=1&spLa=ZW5jcnlwdGVkUXVhbGlmaWVyPUExV1FZN0NNVDZJSjExJmVuY3J5cHRlZElkPUEwNjUzMDU2MUM1S1FWQzVTTTBORSZlbmNyeXB0ZWRBZElkPUEyTlZOOTlWRjRST1VEJndpZGdldE5hbWU9c3BfbXRmJmFjdGlvbj1jbGlja1JlZGlyZWN0JmRvTm90TG9nQ2xpY2s9dHJ1ZQ==


## LIVをインストールする
LIVはVRゲームでMR合成をするツールです。
生身の人間がBeat Saberを遊んでいる動画を見たことがあると思います。
あのような動画を撮影するために使われるツールです。

Neos VRはLIVに対応していませんが、LIVのキャリブレーション機能だけ利用します。
Steamからインストールしてください。

https://store.steampowered.com/app/755540/LIV/?l=japanese

## LIVでカメラキャリブレーションを行う
カメラを平らな場所に置いて部屋全体が映るようにします。

Steam VRとLIVを起動します。
**Mixed Reality Caputure**を選んで**START PCVR REALITY CAPTURE**を押します。
![screenshot.2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/919266/e5d320f4-3a4d-4297-dd7b-87a94d187313.png)

**キャプチャー**タブで**手動**モードに切り替えます。
ターゲットはなんでもいいので適当に今動いているアプリを選びます。
![screenshot.3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/919266/b20bb17e-8008-a3e0-e39c-3480b64c7dcc.png)

**カメラ**タブで**足す**ボタンを押します。
![screenshot.5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/919266/95800052-7d8c-713a-5b72-64e5ba8e457b.png)

**タイプ**を**ビデオカメラ**にします。
**デバイス**は使用するWebカメラを選びます。
**モード**では可能なら16:9の解像度（1920x1080や1280x720など）を選びます。
カメラが対応していない場合は他の解像度を選びます。精度は落ちますが可能です。
（画像ではDroidCam無料版が640ｘ480のみの対応のため、それを選択しています）
![screenshot.6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/919266/e8e63f4b-bb62-d23a-7da5-8e45b23f3eb3.png)

**キャリブレーション**タブで**キャリブレーションを始める**をクリックします。
![screenshot.7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/919266/5729c3d9-ca7e-0299-3244-bef1dbf5989f.png)

**FROM DESKTOP**を選びます。
![screenshot.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/919266/1f6e8685-e091-d0a7-306d-834f20508f0f.png)

デスクトップにこんな画面が映ります。
（なぜか他のウィンドウの裏側に出てくることがあるので、見えない場合は全画面になっているウィンドウを最小化してください。）
![screenshot.8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/919266/cb9a3aa7-0774-0180-14b2-9e4bffd0374b.png)

コントローラーをカメラのレンズに極力近づけて、先端が赤い十字の位置に来るようにしてトリガーを引きます。
![screenshot.9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/919266/5b353123-1338-e4a2-6fc6-72c9db096965.png)

別の十字が表示されるので、カメラから十分離れてコントローラーをあわせてトリガー。
この画像よりもっと離れる必要があります。
十分に離れていると下の文字が緑色になります。
また別の場所に十字が出るので繰り返します。
![screenshot.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/919266/79dedb16-31d1-3d21-7691-d839bed1196b.png)

このような画面になったら**CONFIRM**を押します。
今回合成にはLIVの機能を使わないので、レイテンシーは調整しなくて大丈夫です。
![screenshot.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/919266/ed2c89b7-d2bd-6e10-f9c6-1488871fb9b2.png)

**キャリブレーション**タブに戻って**しょうさい**にチェックを入れます。
![screenshot.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/919266/320dad85-5b96-b70f-2f4c-ea78864f1bf4.png)

**エクスポート→ファイルへ→Unityに（完全）**をクリック。
![screenshot.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/919266/1709784f-53bd-346e-a777-f3244b1fdc7e.png)

適当な場所に保存して、メモ帳などで開きます。
この数字はあとで使います。
![screenshot.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/919266/0b600b72-3da1-8da7-1b1e-5af61b6ccdf3.png)


**LIVは起動したまま**次のステップへ。

## Neos VRの設定
Steamライブラリで**Neos VRを右クリック→プロパティ**をクリック。
**起動オプション**欄に下をコピペしてください。
``-screen-width 1920 -screen-height 1080``
![キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/919266/183ee490-5ef1-349a-56a4-9c174f93703a.png)

## Neos VRでNeos ARワールドへ行く
Neos VRを起動してこのURLを開きます。
http://cloudx.azurewebsites.net/open/world/U-orange/R-619fd5a3-253e-4b4c-86aa-80179f895cb6

このワールドにはこんなものが置いてあります。
左にあるのが**ARカメラ**です。
![2022-12-06-03.25.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/919266/f0c9c049-7ce5-04ba-dc53-8371434fb035.png)


また、Neos VR内で自分にトラッカーがくっついてきているのが見えると思います。
一つは本物のトラッカー、もう一つはLIVが生成したカメラのレンズ位置を表す**LIVトラッカー**です。
現実と見比べてどっちがLIVトラッカーなのか確認しましょう。
![2022-12-06-03.26.01_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/919266/61e6ebf8-03df-dd6e-9cc6-5efc6910f5ef.png)

**ARカメラ**を掴んで**LIVトラッカー**に重ねます。
![2022-12-06-03.26.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/919266/76a78cff-0fd3-2370-a7aa-659637715141.png)

**トラッカーにアタッチ**をクリックするとARカメラがLIVトラッカーに追従します。
![2022-12-06-03.26.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/919266/7d34fc9b-678b-443f-5d1c-7f2eb6356fb6.png)

もし本物のトラッカーのほうに追従してしまった場合は、もう一度トラッカーにアタッチボタンをクリックすると追従が解除されますので、やり直してください。

右にある**数字のところ**にさっき開いたメモ帳に書いてあったfov=の後の数字をコピペします。
**デスクトップにミラーリング**をクリックするとボタンの表示がミラーリング中となり、デスクトップにARカメラの映像が映ります。
![2022-12-06-03.33.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/919266/240c7aa7-294d-5be3-783f-3ac48a5eb442.png)

## OBSで取り込む
OBSを起動します。
ソースで**＋ボタン**を押して**ゲームキャプチャ**を選択。
**モード**を**特定のウィンドウをキャプチャ**に。
**ウィンドウ**で**Neos VR**を選びます。
![screenshot.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/919266/dcad2326-c6b9-edb5-0d2c-0b38294308d0.png)

さらにソースで**＋ボタン**を押して**映像キャプチャデバイス**を選択。
Webカメラのデバイスを選びます。
Webカメラの取り込みサイズによってはこうなっているかもしれません。
![screenshot.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/919266/aeed09b0-5b55-8f3e-389a-11757baecd77.png)
映像キャプチャデバイスを選択した状態で**Ctrl+S**を押すと全画面にフィットします。
![screenshot.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/919266/638a5f77-3351-e06b-6007-4a7d6c08c8b9.png)

ゲームキャプチャを映像キャプチャデバイス**より上**にします。
![screenshot.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/919266/d0284e22-91ab-189c-9f54-5d7e0656d22a.png)

ゲームキャプチャを**右クリック→フィルタ**。
**＋ボタン**で**クロマキー**を追加します。
![screenshot.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/919266/ea486b72-fb9a-c99c-da54-e76f68816982.png)

フィルタ画面を閉じるとこうなっているはず。
**Neos ARの完成です！**
![screenshot.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/919266/debdf5cf-195b-e3f2-8db0-0d6e4b03ffc1.png)

もし手を動かしたとき、Webカメラの遅延が気になる場合はゲーム側を遅延させることで調整できます。
ゲームキャプチャのフィルタ画面で**＋ボタン**を押して**レンダリング遅延**を追加します。
遅延量をちょっとずつ変えながらいい感じのところを見つけましょう。
![screenshot.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/919266/983b1c2d-989c-1da0-2226-850d7356d305.png)

## Neos ARで遊ぶ
Webカメラを持って動かせばNeos内のカメラも一緒に動きます。
Neos内でオブジェクトを置いたり、ペンで描いたりすれば、あたかも現実にオブジェクトやペンで描いたものが存在しているように見えます。
OBSで録画してTwitterに投稿しちゃいましょう。
一歩先の未来って感じで面白いですよね。

現実側にグリーンバックを用意すればこんな撮影も可能です。
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">このワールドに展示されている3D作品はNeos VRの中で制作されています！😋<br>最先端の制作環境をフル活用して実現した展示、ぜひその目で体験してください！🎉<a href="https://twitter.com/hashtag/NeosVR?src=hash&amp;ref_src=twsrc%5Etfw">#NeosVR</a> <a href="https://twitter.com/hashtag/%E9%9D%92%E6%9F%B3%E7%BE%8E%E6%89%87?src=hash&amp;ref_src=twsrc%5Etfw">#青柳美扇</a> <a href="https://t.co/vkk9SvshmE">https://t.co/vkk9SvshmE</a> <a href="https://t.co/9OUGOLUX7H">pic.twitter.com/9OUGOLUX7H</a></p>&mdash; オレンジ/メタバース撮影技術者 (@orange_3134) <a href="https://twitter.com/orange_3134/status/1591998028071989248?ref_src=twsrc%5Etfw">November 14, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

やってみてね～！👏