MRが楽しい

MRやVRについて学習したことを書き残す

UnityのLineRendererを使って破線を表示する

本日は Unity の小ネタ枠です。
UnityのLineRendererを使って破線を表示する方法を記事にします。

LineRendererの作成

初めにラインを描画するため、適当なゲームオブジェクトに LineRenderer コンポーネントを設定します。

LineRenderer コンポーネントはポイントを指定することで線を描画することができるコンポーネントです。
Inspector ビューから[Positions]を指定することで線の形状や、[Width]を指定することで線の幅を設定することができます。
docs.unity3d.com

マテリアルを作成する

ラインの見た目を変更するにはマテリアルを設定する必要があります。
破線の見た目になるマテリアルを構成するためのシェーダを作成するため、Assets フォルダで右クリックから[Create -> Shader -> Unlit Shader]を実行します。

生成されたシェーダを以下の通り編集して、一定間隔ごとに指定のカラーが描画されるシェーダを作成します。
・DashLine.shader

Shader "Unlit/DashLine"
{
    Properties
    {
        _MainTex ("Texture", 2D) = "white" {}
        _Color ("Color", Color) = (1,1,1,1)
        _Rate ("Rate", Range(0, 1)) = 0.5
        _DivisionNumber ("Division", Range(0, 100)) = 10
    }
    SubShader
    {
        // 破線部分は透過が必要なため Transparent と AlphaBlend を設定
        Tags { "RenderType"="Transparent" "Queue" = "Transparent" }
        Blend SrcAlpha OneMinusSrcAlpha
        LOD 100

        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            // make fog work
            #pragma multi_compile_fog

            #include "UnityCG.cginc"

            struct appdata
            {
                float4 vertex : POSITION;
                float2 uv : TEXCOORD0;
            };

            struct v2f
            {
                float2 uv : TEXCOORD0;
                UNITY_FOG_COORDS(1)
                float4 vertex : SV_POSITION;
            };

            sampler2D _MainTex;
            float4 _MainTex_ST;
            fixed4 _Color;
            float _Rate;
            int _DivisionNumber;

            v2f vert (appdata v)
            {
                v2f o;
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.uv = TRANSFORM_TEX(v.uv, _MainTex);
                UNITY_TRANSFER_FOG(o,o.vertex);
                return o;
            }

            fixed4 frag (v2f i) : SV_Target
            {
                // UVマップのX軸の位置に沿って色の表示/非表示を切り替える
                // step:第一引数より第二引数が大きい場合は 1 を小さい場合は 0 を返す
                // frac:第一引数の少数値を取得する
                return step(_Rate, frac(i.uv.x * _DivisionNumber)) * _Color;
            }
            ENDCG
        }
    }
}

次にマテリアルを作成します。右クリックから[Create -> Material]で新規マテリアルを作成します。

作成されたマテリアルの Inspector ビューを開き、[Shader]のプルダウンから作成したシェーダを選択します。
これで破線の描画を行うマテリアルが作成できました。

マテリアルを設定する

再び LineRenderer の Inspector ビューを開き、[Materials]の項目に作成したマテリアルを設定します。
これで LineRenderer で破線が描画されるようになりました。

マテリアルからシェーダプロパティを設定することで破線の比率や間隔を調整することもできます。