Unity+VuforiaでCardboardする

# UnityとVuforiaでCardboard対応アプリケーションをつくる

ふと、CardboardでARアプリケーションを作りたくなったので作ってみました。~~日本語の記事がなく~~、試行錯誤しながら作ったので誤った記述が含まれるかもしれません、ご承知ください。

日本語の記事がないといったな、あれは嘘だ。

この記事より簡潔にわかりやすく纏められている記事がありましたのでご紹介します。
[Goole CardboardでAR表示を行う - テラシュールブログ(2015/01/28閲覧)](http://tsubakit1.hateblo.jp/entry/2014/09/07/011041)


## 前提
UnityでVuforiaを使用する例は先達の素晴らしい記事が多くありますので、割愛いたします。
Vuforia、マーカー、モデルをプロジェクトにインポートし、配置しておいて下さい。

## 背景用カメラの設置
ARということで、背景に端末のカメラから取得した画像を表示します。Vuforiaでは標準で背景画像を表示してくれますが、これをサイドバイサイド表示にするためには一工夫が必要です。

方法としてはPlaneに背景画像を描画し、それをシーン内のカメラで撮影します。

まず、カメラを一つ設置します。方向は下向き、Clear FlagsをDepth only、ProjectionをOrthographic、Sizeを1、Depthを-2に設定します。また、このカメラの映像は使用されないため、Cameraのチェックを外します。
![1.png](https://qiita-image-store.s3.amazonaws.com/0/67180/eaa6f6a2-d4af-90e5-c378-22a8cc5ebad6.png)

続いて、左目用と右目用のカメラを一つずつ設置します。これらは先ほど設置したカメラの子に設定してください。Clear FlagsをDepth only、ProjectionをOrthographic、Sizeを0.5、Depthを-2に設定します。また、Viewport Rectを設定します。

左目用はX:0, Y:0, W:0.5, H:1、右目用はX:0.5, Y:0, W:0.5, H:1にします。TransformのPositionとRotationはすべて0に設定します。
![3.png](https://qiita-image-store.s3.amazonaws.com/0/67180/df2d6110-c433-d5f9-9377-b551dea2207d.png)
![4.png](https://qiita-image-store.s3.amazonaws.com/0/67180/62075979-91c4-1862-61ce-72ac430f1f6c.png)

最後に、Planeを設置します。これも先ほどのカメラのこの設定してください。ここで、背景画像のテクスチャをPlaneに貼り付けるスクリプトを使用します。
![2.png](https://qiita-image-store.s3.amazonaws.com/0/67180/42c0412b-4f43-4e8c-6dc2-f5e0761ac6d0.png)

以下のURLでは、背景画像のテクスチャを利用するサンプルが紹介されています。
https://developer.vuforia.com/resources/sample-apps/background-texture-access-sample-app

今回はこのサンプル内に含まれているVideoTextureBehaviour.csを使用します。
PlaneにVideoTextureBehaviour.csを追加し、インスペクタでCameraに親のカメラを、Num Divisionsに10を設定します。

このままでは背景画像が描画されないので、Start()内でthis.InitBehaviour()を、Update()内でthis.UpdateBehaviour()を呼び出すようコードを書く必要があります。これはVideoTextureBehaviour内もしくは適当なスクリプトに記述してください。

以上で、背景画像がサイドバイサイドで表示されるはずです。

## ARカメラの設定
モデルもサイドバイサイドで表示しましょう。これはVuforiaのARCameraを使用します。
既にカメラは一つ設置されていると思うので、その下に子として右目用と左目用一つずつARCameraを設置してください。

親カメラの設定は、Camera、Web Cam Behaviourのチェックをオフにします。
![5.png](https://qiita-image-store.s3.amazonaws.com/0/67180/95c3425a-bb3e-bd04-08b7-16111b72f776.png)


左目用のカメラは、Viewport RectをX:0, Y:0, W:0.5, H:1に設定、右目用のカメラはViewport RectをX:0.5, Y:0, W:0.5, H:1に設定してください。
また、QCARBehaviour、Data Set Load Behaviour、Web Cam Behaviourのチェックをオフにします。Cameraのチェックがオンになっていることを確認してください。
![6.png](https://qiita-image-store.s3.amazonaws.com/0/67180/8e8ae2a4-69f9-80af-91a8-fb7c8883f8a3.png)

以上で、CardboardでARができるはずです。

## おわりに
読み辛い文章になってしまい申し訳ありません。Unityに関してはズブの素人なので、間違い等あればご指摘いただけると幸いです。
うまく表示されなかった時は一回カメラをすべて消してから設置しなおすと直る時があります。

## 参考等
### 参考
[Background Texture | Vuforia Developper Portal(2015/01/26閲覧)](https://developer.vuforia.com/resources/sample-apps/background-texture-access-sample-app)
[Two Stereo Cameras With Independent AR Camera | Vuforia Developper Portal(2015/01/26閲覧)](https://developer.vuforia.com/forum/unity-3-extension-technical-discussion/two-stereo-cameras-independent-ar-camera)

### License
![imageLicenseLogo.png](https://qiita-image-store.s3.amazonaws.com/0/67180/0777c137-a28e-f9c2-adc4-88f4d25f7aab.png)
この記事のサンプル製作に当たって、ユニティちゃんを使用させて頂きました。
従ってこの記事は、『[ユニティちゃんライセンス](http://unity-chan.com/contents/license_jp/)』で提供されます。