本日は HoloLens の調査枠です。
HoloLens の視野角を画面UIで表示する手順についてまとめます。
以下の記事を参考にしました。
heliosinteractive.com
qiita.com
アプリ内で視野角を表示することで HoloLens 装着時のズレを調整することができます。
サンプル作成のため、HoloLens(WindowsMR) プロジェクトの基本設定を行ったプロジェクトを用意します。
bluebirdofoz.hatenablog.com
本記事ではUIの位置調整に MRTK の Billbord と Tagalong スクリプトを利用します。
最初にUIオブジェクトの位置調整のためのゲームオブジェクトを追加します。
Hierarchy 直下に以下の Transform 設定の空ゲームオブジェクトを追加します。
Position X:0, Y:0, Z:1 Rotation X:0, Y:0, Z:0 Scale X:1, Y:1, Z:1
AddComponent から Billbord と Tagalong スクリプトを追加します。
設定値は一例です。Tagalong の設定は追従の好みに合わせて微調整します。
・Billboard
PivotAxis : Free TargetTransform : None
・SphereBasedTagalong
SphereRadius : 0.01 MoveSpeed : 10 UseUnscaledTime : ON HideOnStart : OFF
位置調整用ゲームオブジェクトの配下に、以下の設定で Canvas オブジェクトを追加します。
変更が必要な設定値のみ抜粋します。
また視野角表示のUIについてはアタリ判定が不要なので GraphicRaycaster は無効化します。
Rect Transform PosX:0, PosY:0, PosZ:0 Width:126.8, Height:72 Scale X:0.004, Y:0.004, Z:0.004 Canvas RenderMode : World Space
視野角の表示UIは参考先の記事のように LineRenderer を利用しても良いですが。
透過色を設定した PNG ファイルを出力できる環境があるならば 1268×720 pixelの画像を作成するのも手っ取り早いです。
作成時の注意点として、横枠は目一杯利用せず、表示部分を 1140×720 pixelほどの大きさに留めます。
(追従を緩くしている場合、更に余裕を持たせる必要があります)
横枠を一杯に利用しないのは両目の左右視差の関係上、左右に視野外となる領域が発生するためです。
今回は以下のような画像を作成しました。
CLIP STUDIO の環境があり、上下左右対称な画像を作成したい場合は以下の記事を参考にしてみてください。
bluebirdofoz.hatenablog.com
作成した画像を Assets フォルダにインポートします。
[TextureType]を[Sprite(2DandUI)]に変更し、[Apply]ボタンをクリックします。
Canvas オブジェクトの配下に、以下の設定で Image オブジェクトを追加します。
Rect Transform PosX:0, PosY:0, PosZ:0 Width:126.8, Height:72 Scale X:1, Y:1, Z:1
先程インポートした画像ファイルを[SourceImage]として設定すれば作成完了です。
本記事ではUIの追従に Tagalong を利用しましたが、適切な調整が難しいです。
位置調整用ゲームオブジェクトを MainCamera オブジェクトの子オブジェクトにして追従させる方が容易かもしれません。