(:3[kanのメモ帳]

個人ゲーム開発者kan.kikuchiのメモ的技術ブログ。月木更新でUnity関連がメイン。

(:3[kanのメモ帳]



VR空間上にUI(Canvas)を設置し、常に3Dオブジェクトより前面表示かつカメラの方を向くようにする【Unity】【uGUI】【VR】


このエントリーをはてなブックマークに追加


この記事でのバージョン
Unity 2018.4.23f1


はじめに

今回はVR空間上にUIを設置する話で、イメージとしては以下のような感じ。

f:id:kan_kikuchi:20200705064100g:plain


なお、記事中では以下のアセットを使っています。

Japanese School Classroom | 3D Environments | Unity Asset Store



UIをVR空間上に設置

さっそくですが、UIをVR空間上に設置したい時はCanvasのRender ModeをWorld Spaceにします。

f:id:kan_kikuchi:20200703073515j:plain


これでCanvasがVR空間上(というより3D空間上)に表示されるようになります。

f:id:kan_kikuchi:20200705062410g:plain



UIを常に3Dオブジェクトより前面に表示

VR空間上に表示しているUIは3Dオブジェクトの裏にも行くようになってしまいます。

f:id:kan_kikuchi:20200705062626g:plain


と言う事で次はUIを常に3Dオブジェクトより前面に表示する方法です。


まず前面に表示する用のレイヤー(今回はInstructionUI)を作成します。

f:id:kan_kikuchi:20200703074454j:plain
f:id:kan_kikuchi:20200703074502j:plain
f:id:kan_kikuchi:20200703074516j:plain


作成したレイヤーを常に前面に表示したいCanvasとその子に設定し、

f:id:kan_kikuchi:20200703074532j:plain


普通のカメラには映らないようにCulling MaskのInstructionUIのレイヤーのチェックを外します。

f:id:kan_kikuchi:20200703074638j:plain


さらにInstructionUIだけを映す専用のカメラを作成し、Clear FlagsをDepth only

Culling MaskをInstructionUIだけにし、Depthを普通のカメラより大きい値にします。

f:id:kan_kikuchi:20200703074751j:plain


これでInstructionUIのレイヤーを設定した物は常に前面に表示されるようになります。

f:id:kan_kikuchi:20200705063012g:plain



UIが常にカメラの方を向くように

VR空間上に表示しているUIは、横からは見えないようになってしまいます。

f:id:kan_kikuchi:20200705063220g:plain


と言う事で次はUIが常にカメラの方を向くようにする方法です。


まず、以下のようにLookAtを使って対象の方を見続けるスクリプトを作成、

using UnityEngine;

/// <summary>
/// 常にカメラの方を見るキャンバス
/// </summary>
public class LookAtCameraCanvas : MonoBehaviour {
    
    [SerializeField]
    private Transform _camera = null;
    
    private void Update() {
        transform.LookAt(_camera);
    }
    
}


これをCanvasにAddし、Inspectorでカメラをアタッチ、さらにScaleのxをマイナスにして反転させます。

f:id:kan_kikuchi:20200703080553j:plain


これで常にカメラの方を見るようになります。

f:id:kan_kikuchi:20200705063509g:plain