シンプルなImageEffect　その10。TilePattern

7604 ワード
Shader ImageEffect Unity Unity テキストリンク

Twitterでアップした、TilePatternImageEffectのシェーダコードを貼っておきます。

画面に均一なパターンで１枚画像を重ね合わせて、雰囲気を彩ることが出来ます。
画像を変更することで、色々カスタマイズが可能です。
また、Tile用のテクスチャは必ずRepeart属性にするのをお忘れなく！
今回のコードでは、テクスチャの白みに合わせて、二乗色（明度が下がりつつ、彩度が上がるようなイメージ）を載せています

TilePattern.shader
Shader "ScreenPocket/ImageEffect/TilePattern"
{
    Properties
    {
        _MainTex ("Texture", 2D) = "white" {}
        _TileTex ("Tile Texture", 2D) = "black" {}
        _TileCountH ("Tile Count Horizontal", Float) = 64
    }

    SubShader
    {
        // No culling or depth
        Cull Off ZWrite Off ZTest Always

        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag

            #include "UnityCG.cginc"

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

            struct v2f
            {
                float4 uv : TEXCOORD0;
                float4 vertex : SV_POSITION;
            };

            float _TileCountH;

            v2f vert (appdata v)
            {
                v2f o;
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.uv.xy = v.uv;
                o.uv.zw = v.uv * _TileCountH;
                //縦横比で縦のドット数を補正する
                o.uv.w *= _ScreenParams.y / _ScreenParams.x;
                return o;
            }

            sampler2D _MainTex;
            sampler2D _TileTex;

            fixed4 frag (v2f i) : SV_Target
            {
                half4 col = tex2D( _MainTex, i.uv.xy );
                float rate = tex2D( _TileTex, i.uv.zw  ).r;
                col = lerp(col,col*col,rate);
                return col;
            }
            ENDCG
        }
    }
}


↑の画像を_TileTexに流し込んだ↓の見た目が結構気に入っています。

とうとう１０個目ですね。
手軽に導入しやすい＆組み合わせやすいImageEffectを今後も貼っていきたい所です。