Unityでgoogle CardBoard事始め

# はじめに
この記事では、Unity初心者が[Google CardBoard](https://vr.google.com/cardboard/)とAndroid端末でVRコンテンツを作るまでを書いています。
[Daydreame](https://vr.google.com/daydream/)の話ではないので、今更感はありますが、身内の勉強会用に簡単にまとめました。

#使用ソフト
・Unity 5.4.1f1 Personal以降 [ダウンロード先](https://store.unity.com/ja/download?ref=personal)
・Google VR SDK for Unity [ダウンロード先](https://developers.google.com/vr/unity/download)
###Android端末用
・Android Studio 2.2.1.0以降 [ダウンロード先](https://developer.android.com/studio/index.html)
・Java SE Development Kit（JDK）8u102 [ダウンロード先](http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html)
・Android端末用USBドライバ　※Macは基本的に不要。各スマホ端末により必要に応じて。
###iPhone用
・Xcode 8 [App Store](https://itunes.apple.com/us/app/xcode/id497799835?ls=1&mt=12)からインストール　
 ※XcodeはMacでのみ動作するため、iPhone開発の場合はMacが必須です。

##必要物
・新し目のスマートフォン（Android端末、もしくはiPhone）
・USBケーブル　※PCとAndroid端末を繋げるため
・ハコスコ（２眼）など、google CardBoardクローン　[※Amazonで1000〜1500円くらいで買えます。](https://www.amazon.co.jp/%E3%83%8F%E3%82%B3%E3%82%B9%E3%82%B3-%E3%82%BF%E3%82%BF%E3%83%9F2%E7%9C%BC-iPhone5-6-6Plus%E3%82%B5%E3%82%A4%E3%82%BA%E5%AF%BE%E5%BF%9C/dp/B011I9FCGS/ref=pd_sim_504_1?_encoding=UTF8&psc=1&refRID=CMDHWCE6R55AHGKS95HS)

#事前準備
下記記事を参考に、開発環境のインストールと、Android端末の設定（開発者モード化、USBデバッグ有効化）を行っておきます。

◆「Unityを利用したスマホアプリ開発環境セットアップ方法」
http://qiita.com/kosaku360/items/f72e00c8a07195a818c0

◆「Androidアプリ開発のための、Android端末の開発者モード設定方法」
http://qiita.com/kosaku360/items/40d7f7fe5b6d185fb7c6

#新規プロジェクトとサンプルVR空間の作成

##新規プロジェクト作成
まずは、Unityを立ち上げ、新規プロジェクトを作成します。
　①プロジェクト作成画面でProject name欄に「VR_test」など好きな名前を入力します。
　②「Create project」をクリックします。
<img width="1001" alt="screenshot.png" src="https://qiita-image-store.s3.amazonaws.com/0/103726/5dee9ba6-85e3-cd54-b562-228711a119cf.png">

##3Dオブジェクトの作成
　次にVR空間に置く3Dオブジェクトを作ります。

###立方体の作成
　「Hierarchy」内の「Create」のプルダウンメニューから、「3D Object」を選択し「Cube」を作成します。
![screenshot.png](https://qiita-image-store.s3.amazonaws.com/0/103726/1137f04d-1dee-c177-6405-fab0a8250cb2.png)

　立方体が出現するので「Position」と「Rotation」に値を入力して位置を調整します。
<img width="1060" alt="screenshot.png" src="https://qiita-image-store.s3.amazonaws.com/0/103726/5c16abef-22b5-00e3-6272-67fed5afb914.png">

###球の作成
　さらにもう一度「Hierarchy」内の「Create」のプルダウンメニューから、「3D Object」を選択し今度は「Sphere」を作成します。
![screenshot.png](https://qiita-image-store.s3.amazonaws.com/0/103726/e390865e-f0d7-0229-131f-dd6a8a282367.png)

　こちらも立方体と同じく「Position」と「Rotation」に値を入力して位置を調整します。
<img width="1060" alt="screenshot.png" src="https://qiita-image-store.s3.amazonaws.com/0/103726/fe8556ee-cffe-83b0-cb6c-86e308db6307.png">

###Materialの設定（色付け）
　球と立方体に色付けをします。
Unityでは「Material」というクラスを使うことで、Objectに色や「質感（Smoothness）」「光の反射（Mrtallic）」を付け足します。ここではまず、赤色のMaterialを作成します。

![screenshot.png](https://qiita-image-store.s3.amazonaws.com/0/103726/0d4b95e4-6501-e50d-f747-978eb4ab3bbf.png)

　Materialの名前を「Red」（名前はなんでも構いません）にし、「Inspector」＞「Albedo」の□をクリックするとカラーパレットが出現するので、いい感じの赤色を選択します。
![screenshot.png](https://qiita-image-store.s3.amazonaws.com/0/103726/d29d31e4-93b9-f134-6286-c39bab731477.png)

　赤色に設定したMaterial「Red」を「Hierarchy」＞「Sphere」へクリック＆ドロップします。
　これで作成した球（Sphere）が赤色に設定されました。
![screenshot.png](https://qiita-image-store.s3.amazonaws.com/0/103726/805bab12-9a3a-feef-7b65-e69ef54db029.png)

　もう一つ名前を「Blue」（名前はなんでも構いません）としたMaterialを作成します。
　「Red」と同様に「Inspector」＞「Albedo」の□で、いい感じの青色を選択します。
![screenshot.png](https://qiita-image-store.s3.amazonaws.com/0/103726/34d53a41-0b1a-4d38-2c26-3bf67c016da3.png)

　青色に設定したMaterial「Blue」を「Hierarchy」＞「Sphere」へクリック＆ドロップします。
　これで作成した立方体（Cube）が青色に設定されました。
![screenshot.png](https://qiita-image-store.s3.amazonaws.com/0/103726/8208b7ed-1c0b-90d4-6adf-991ad55ca32b.png)

##床と背景の作成
###床と壁の作成
　球と立方体だけだと寂しいので、床と壁を作ります。
　「Hierarchy」内の「Create」のプルダウンメニューから、「3D Object」を選択し今度は「Plane」を作成します。
![screenshot.png](https://qiita-image-store.s3.amazonaws.com/0/103726/e9449402-0a7c-96e7-1996-dee5ad08893d.png)

　床ができたら、また全く同じようにもう一つ「Plane」を作成し、名前を「Wall」にリネームします。
![screenshot.png](https://qiita-image-store.s3.amazonaws.com/0/103726/9fcf25fa-4589-cad6-2bdf-beb1c2aca041.png)

　「Wall」の「Position」と「Rotation」に値を入力し、床の端に立てるように位置を調整します。
　※「Wall」手前右に立っていますが、裏側を向いて立っていますので、画面の視点では消えているように見えます。（視点を変えれば見えます。）
<img width="1033" alt="screenshot.png" src="https://qiita-image-store.s3.amazonaws.com/0/103726/94a12867-0cf8-e4a2-20ee-9ade1d9d5821.png">

###背景テクスチャの設定
　壁に背景テクスチャを貼り付けることで、白壁から背景にします。
　まずは、適当な背景テクスチャを読み込みます。ここでは参考にした書籍「UnityによるVRアプリケーション開発」で頒布されている[画像データ](https://github.com/oreilly-japan/unity-virtual-reality-projects-ja/blob/master/resources/02/GrandCanyon.jpg)を使用しました。
![screenshot.png](https://qiita-image-store.s3.amazonaws.com/0/103726/b63802aa-0422-cb1e-1459-8b0ea779fcbe.png)

　「Assets」フォルダに画像データをインポートします。（画像データは直接「Assets」欄にクリック＆ドロップでも追加できます。）
<img width="709" alt="screenshot.png" src="https://qiita-image-store.s3.amazonaws.com/0/103726/d0d2dfdc-a458-2af6-5df7-17b6d9f891c2.png">

　インポートした画像データ（背景テクスチャ）を「Hierarchy」＞「Wall」にクリック＆ドロップします。
![screenshot.png](https://qiita-image-store.s3.amazonaws.com/0/103726/3e288aa8-0840-3943-31a5-c60c226eaed1.png)

　試しに画面中央上部のPlayボタン「▶︎」を押して正面から確認してみると、背景が横を向いてしまっています。このように画像によっては、位置が調整が必要になることがあります。
<img width="1031" alt="screenshot.png" src="https://qiita-image-store.s3.amazonaws.com/0/103726/c8e4d70e-a48e-d176-b596-f55d9e9600d0.png">

　「Hierarchy」＞「Wall」を選択し、「Inspector」＞「Rotation」で「X:90」に設定します。
<img width="1032" alt="screenshot.png" src="https://qiita-image-store.s3.amazonaws.com/0/103726/176fa36e-981b-01a9-8e5c-67b0c0d5fda9.png">

　もう一度Playボタン「▶︎」を押して背景が正常な位置になったのを確認します。
<img width="1033" alt="screenshot.png" src="https://qiita-image-store.s3.amazonaws.com/0/103726/853ace25-1743-64e0-9814-bb1a210be73c.png">

　これで、サンプルのVR空間ができました。

#Google VR SDKの組み込み
　いよいよ「Google VR SDK for Unity」を組み込みます。
　公式サイトより、[ダウンロード](https://developers.google.com/vr/unity/download)します。

<img width="1212" alt="screenshot.png" src="https://qiita-image-store.s3.amazonaws.com/0/103726/54096e9b-f016-bfa1-0002-b01794f7ae25.png">

　ダウンロードした「gvr-unity-sdk-master.zip」を解凍します。
　解凍したフォルダの中に「GoogleVRForUnity.unitypackage」というファイルがありますので、これをUnityに読み込みます。
<img width="617" alt="screenshot.png" src="https://qiita-image-store.s3.amazonaws.com/0/103726/c2f7f98c-74c0-c821-0513-cc50a8bacedf.png">

![screenshot.png](https://qiita-image-store.s3.amazonaws.com/0/103726/4e9275c7-48e4-9365-a468-72f7b9b207ca.png)

<img width="753" alt="screenshot.png" src="https://qiita-image-store.s3.amazonaws.com/0/103726/5c869c52-5262-bfed-2e89-5cea7e3069e8.png">

<img width="472" alt="screenshot.png" src="https://qiita-image-store.s3.amazonaws.com/0/103726/3a4c06aa-ab41-6089-70f6-701d4af8ffb0.png">

![screenshot.png](https://qiita-image-store.s3.amazonaws.com/0/103726/abf6c99d-c249-9401-a6f1-90864b80ee1e.png)

![screenshot.png](https://qiita-image-store.s3.amazonaws.com/0/103726/bac9224c-72ac-fd32-5b48-a07e1ca8bf1d.png)

<img width="1033" alt="screenshot.png" src="https://qiita-image-store.s3.amazonaws.com/0/103726/4073368b-013b-1a6b-d872-f2a0ee5a4dbd.png">

<img width="1031" alt="screenshot.png" src="https://qiita-image-store.s3.amazonaws.com/0/103726/830af2e1-0e6f-ff05-4a74-708ca7c0f790.png">

<img width="1033" alt="screenshot.png" src="https://qiita-image-store.s3.amazonaws.com/0/103726/38966bcc-8926-2c7c-3069-8a76faff6b69.png">




#Android端末への出力
執筆中

#iPhoneへの出力
執筆中


#参考資料
◆書籍「UnityによるVRアプリケーション開発」（オライリー・ジャパン）
https://www.oreilly.co.jp/books/9784873117577/

◆「Unity初心者が5分でGoogle Cardboard SDKを試してみた」
http://qiita.com/hy3/items/4596ffde7d8ccee77f3d