【Unity】【シェーダテクニック】プロシージャルな円形グラデーション

f:id:halya_11:20180718234114p:plain

円形のグラデーションをプロシージャルに作ってみます。

考え方

  1. UV座標から0.5を差し引いて(0, 0)を中心とする値にする
  2. 1で求めた値のlengthを求める

これだけです。

シェーダ

シェーダは次のようになります。

Shader "Sample"
{
    SubShader
    {
        Tags { "RenderType"="Opaque" }

        Pass
        {
            CGPROGRAM
           #pragma vertex vert
           #pragma fragment frag
            
           #include "UnityCG.cginc"

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

            struct v2f
            {
                float2 uv : TEXCOORD0;
                float4 vertex : SV_POSITION;
            };
            
            v2f vert (appdata v)
            {
                v2f o;
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.uv = v.uv;
                return o;
            }
            
            fixed4 frag (v2f i) : SV_Target
            {
                return length(i.uv - 0.5);
            }
            ENDCG
        }
    }
}

結果

結果は次のようになります。

f:id:halya_11:20180718234114p:plain

このままでは結構値が小さいので、用途によっては
フラグメントシェーダを下記のようにしてもいいかもしれません。

length((i.uv - 0.5) * 2.0);

この場合は次のような結果が得られます。

f:id:halya_11:20180718235418p:plain