Unityでモザイク処理をする方法

今回はUnityで画像にモザイク処理を掛ける方法を紹介します。標準機能では用意されていないようなのでカスタムシェーダーで実装します。

シェーダーを書く

Shader "Custom/Mosaic" {
    Properties {
        _MainTex ("Texture", 2D) = "white" {}
        //ここの数値は任意
        _GridSize ("Grid Size", Range(16, 256)) = 8
    }

    SubShader {
        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;
            };

            sampler2D _MainTex;
            float _GridSize;

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

            fixed4 frag (v2f i) : SV_Target {
                float2 uv = i.uv * _GridSize;
                uv = floor(uv) / _GridSize;
                return tex2D(_MainTex, uv);
            }
            ENDCG
        }
    }
    FallBack "Diffuse"
}

マテリアルにアタッチする

新規マテリアルを作成し、今作ったシェーダーをアタッチする。そしてそのマテリアルをモザイク処理を掛けたいオブジェクトにアタッチする。

今回はUGUIのImageオブジェクトに使用します。

インスペクタから操作する

Imageオブジェクトに上記マテリアルをアタッチするとインスペクタから操作できるようになります。

今回はインスペクタからの操作のみの実装ですが、C#スクリプトから動的に操作する事もできます。またDotweenなどで徐々にフェードするような処理も可能です。演出の幅が広がるのでぜひ一度試してみて下さい。