脳汁portal

アメリカ在住(だった)新米エンジニアがその日学んだIT知識を書き綴るブログ

HTC Viveでテレポート機能を実装する方法

VR

HTC Viveでコントローラーを利用したテレポートの方法です
こんなのです
f:id:portaltan:20180115183249p:plain

ライブラリとしてgithubで公開されている以下のライブラリを利用させていただきます
github.com

環境

HTC ViveをUnityで開発するにはSteamVR PluginというPluginを利用することになりますが、Unity5.x系とは相性が悪くコントローラーが表示されなかったり一部機能がうまく動かなかったりするので、そういう場合は素直にUnity2017を利用するとすんなり動くことが多いです
(この記事はところどころ5.6.3で書いていますが)
https://www.assetstore.unity3d.com/jp/#!/content/32647

ライブラリimport

import Vive-Teleporter library

テレポート用のライブラリをimportします
githubからそのままダウンロードしてUnityにimportします
https://github.com/Flafla2/Vive-Teleporter

importすると設定を最適なものにするかどうか聞かれるダイアログが表示されるので、問題なければAcceptを選択します
f:id:portaltan:20180115175129p:plain

今回は上記のライブラリにSteamVR Pluginも入っているため、追加でSteamVR Pluginをimportする必要はありません

テレポート機能の作成

地面の作成

まずは移動するための地面を作ります
Groundという名前でCubeを作成し、地面っぽく引き伸ばします

  • position: 0, -0.5, 0
  • Scale: 10, 1, 10
  • (Staticにチェック)
  • (LightProbeをOff)
  • (Lightmap Staticにチェック)

f:id:portaltan:20180115175344p:plain

Windows > Navigationを選び、Groundを選択します

  • Objectタブ
    • Navigate Staticにチェックをチェック
    • Generate OffMeshLinksのチェックを外す
  • bakeタブ
    • bakeをクリックして実行

bakeがうまくいくと以下のようにcubeの上面に水色のエリアが表示されます
f:id:portaltan:20180115175932p:plain

NavMeshの作成

NavMesh prefabをヒエラルキーにD&Dします
InspectorのVive Nav Mesh(Script)の項目でUpdate Navmesh Dataをクリックして実行します
そうすると以下のようなマス目と移動の境界線にエフェクトが表示されます
f:id:portaltan:20180115181947p:plain

Pointerの作成

pointer prefabをヒエラルキーにD&Dします

  • NavMeshに上記で作成したNavmeshをアタッチ
Cameraの設定

まずは不要なMain Cameraを削除して、Camera Rig prefabをヒエラルキーにD&Dします
f:id:portaltan:20180115182310p:plain
次にInspectorから各項目を設定していきます
Camera Rig本体

  • Steam VR_Play Area(script)を削除
  • (Mesh Filter)を削除
  • Mesh Rendererを削除

Camera(eye)

  • Vive Teleporterスクリプトをadd component
    • (Border ReferererとTeleport Viveの項目が追加されます)
  • Teleport Vive
    • pointerに上記で作ったpointerをアタッチ
    • Origin TransformにCameraRig自体をアタッチ
    • Head TransformにCamera(head)自体をアタッチ
    • Navmesh Animatorに上記で作ったNavMeshをアタッチ
    • Fade Materialはライブラリに入っているFadeBlackを選択
    • Controllersのsizeを2に変更
      • Element0にController(left)をアタッチ
      • Element1にController(right)をアタッチ
  • Border renderer
    • Border MaterialでRoom Area Borderを選択

f:id:portaltan:20180115183027p:plain

以上で設定は完了です

確認

デバッグを起動すると以下のようにタッチパッド長押しでテレポートできるようになります
f:id:portaltan:20180115183249p:plain

おまけ

侵入禁止エリアの設定

Cube等のcolliderの設定されている障害物を作成し、Groundに接地させる（めりこませてもよい）
f:id:portaltan:20180115183920p:plain
Inspectorタブでstaticにし、Navigationタブでbakeします
すると以下のようにCubeのまわりだけの水色のスペースが除外されます
f:id:portaltan:20180115184104p:plain
次に忘れずにNavmeshからUpdate Navmesh Dataをクリックします
f:id:portaltan:20180115184221p:plain

この状態でデモを実行するとCubeのまわりだけテレポートできないようになります
f:id:portaltan:20180115184359p:plain