【Unity】Viveコントローラを使ったプロジェクションマッピングもどきを作ってみる

# 概要
 HTC Viveコントローラを使ったプロジェクションマッピングもどきを作成してみます．

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">HTC Viveコントローラを使ったプロジェクションマッピングもどきを作成してみた <a href="https://t.co/N6g7FO3Ob7">pic.twitter.com/N6g7FO3Ob7</a></p>&mdash; Masaki Jack (@JackMasaki) <a href="https://twitter.com/JackMasaki/status/832951920847261696">2017年2月18日</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

こんな感じで表示されます．

# 必要なもの
・PC(今回はWindowsで作ります)
・HTC Vive
・プロジェクター

 # 準備段階
次のものを導入します．
・Unity(5.4.0f3)
・SteamVR plugin for Unity(v1.2.0)
SteamVR plugin for UnityはUnityをインストール後にAsset Storeからダウンロードして
インポートしてください．無料で配布されています．

 ※投稿時とのVersionの違いで設定項目が異なる可能性があります．

# 1.表示画像用のオブジェクト作成
画像を表示するオブジェクトを作成します．
GameObject -> 3D Object -> Cube
で作成します．
今回は正方形のものを作成するので
Scaleはx:10 y:10 z:1
で作成します．
作成したCubeに表示したい画像を貼り付けてテクスチャにします．

また，projectを作成した直後だと画像が反転して表示されるので
CubeのRotateを180にして向きを合わせましょう．

![cube.png](https://qiita-image-store.s3.amazonaws.com/0/162880/20fa38f3-f515-7de3-a5a3-4839aeb2dfa4.png)

# 2.SteamVR plugin for Unityの設置
Asset StoreからダウンロードしたSteamVR plugin for Unityをインポートします．

![steamvrp.png](https://qiita-image-store.s3.amazonaws.com/0/162880/d1b7adca-af77-8acc-5132-330176c42a9e.png)

インポートした後
SteamVR -> Prefabs -> CameraRig
をScene上に設置します．
CameraRigのPositionはx:0 y:-1.5 z:-25
で今回は設置しました．
使用感などで調整してください．

設置後，CameraRig内にあるComponentのSteam_VR_Play Area(Script)内の
Wireframe Heightを0にして枠線を消します．

次のHierarchyのCameraRig下のCamera(head)内にあるCamera Component
にあるTarget DisplayをDisplay2に変更します．
同様にCamera(head)下にあるCamera(eye)内のCamera Component
のTarget DisplayをDisplay2に変更します．

![steamcameraset.png](https://qiita-image-store.s3.amazonaws.com/0/162880/99573d48-cc8f-1fdc-de5d-655e06841df4.png)

# 3.プロジェクター出力設定
プロジェクターに表示するためにMain Cameraの設定をします．

まずPositionをx:0 y:-0.5 z:-25に変更します．
BackgroundをHEX Colorを#00000000に変更します．
Field of Viewを21に変更します．
Viewport Rectをx:0.12 w:0.75に変更します．
Depthを1に変更します．
Target EyeをNone(Main Display)に変更します．

![maincameraset.png](https://qiita-image-store.s3.amazonaws.com/0/162880/cffee6eb-fa37-1bc2-e9ec-f7ed2b401a22.png)

# 4.画面の設定
このままでは空が明るい状態のままになるので暗くしましょう．
Window -> Lighting
を開きます．
SkyboxをNoneに変更し，Ambient Colorを#000000に変更します．

![skyboxset.png](https://qiita-image-store.s3.amazonaws.com/0/162880/b3ac984d-1cc5-9fd2-af85-85e08d707b92.png)

Hierarchy内にあるDirectional Lightを削除します．
画像が暗くなれば成功です．

![directionaldelete.png](https://qiita-image-store.s3.amazonaws.com/0/162880/75a5285e-f94b-6b4f-3d2e-dcdcae133a5b.png)

# 5.スポットライトの設定
暗くなった画面にコントローラを向けると
向けた個所が明るくなるようにSpotlightを作成します．
GameObject -> Light -> Spotlightで作成します．

作成したSpotlightをCameraRig/Controller(left)に入れます．
ここのleftはrightでも両方でも構いません．

SpotlightのLight Component内の設定をします．
Positionは(0,0,0)に変更します．
Rotateも(0,0,0)に変更します．
Rangeを40に変更します．
Spot Angleを8に変更します．
Intensityを8に変更します．

![spotlightset.png](https://qiita-image-store.s3.amazonaws.com/0/162880/3b68682b-4409-85d6-b401-046f3d254565.png)

# 6.HTC Viveコントローラのモデル非表示
ここまででほとんど完成しているのですが，
最後にViveコントローラを非表示にします．

CameraRig/Controller(left or right)/Model
のInspectorのチェックボックスを外して非表示にします．

# 7.実際に動作させてみる
Buildしてプロジェクターで投影してみましょう．
うまくできていればコントローラを向けた先だけ画像が表示されるはずです．

ライトの範囲調整や画像のサイズ調整などいろいろと弄るところはあるかと思います．


この次はプロジェクターの位置トラッキングやKinectの位置トラッキングなんかを考えています
（考えているだけ）