コツコツエンジニアノート

...

p.48

p.49

p.50

p.51

p.52

p.53

p.54

p.55

p.56

p.57

p.58

...

-100p

-10p

+10p

+100p

Unityモザイクシェーダーとモザイク処理の解説

Unity uGUI用モザイクシェーダー。モザイクの仕組みも解説。
(Mosaic Shader for Unity uGUI)

2023-11-04

2024-08-14

モザイクシェーダー、コード全文

次の2つの動画がモザイクシェーダーの演出効果。1つ目が粗い精度、2つ目が細かい精度。

2つの処理の違いは、省略するピクセルの色情報を全て破棄するか、省略するピクセルの色の平均色を出力するかの違い。

以下コード全文。uGUI Imageへの反映方法はこちらの記事参照。
今回の場合GrabPassを使っているので、こちらの知識も必要になる。

Shader "UI/GrabMosaic"
{
    Properties
    {
        [HideInInspector]_MainTex("-",2D)="white"{}
        [KeywordEnum(one, equalize)] _Pick("ColorPick", Int) = 1
        _MosaicNum ("Mosaic Num", Range(0.0, 50.0)) = 0
    }

    SubShader
    {
        Tags
        {
            "Queue" = "Transparent"
            "RenderType"="Transparent"
        }
        Cull Off
        ZWrite Off
        Blend SrcAlpha OneMinusSrcAlpha

        GrabPass{}

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

            sampler2D _GrabTexture;
            float4 _GrabTexture_TexelSize;
            float _MosaicNum;

            struct appdata
            {
                fixed4 vertex : POSITION;
                fixed4 uv : TEXCOORD0;
            };

            struct v2f
            {
                fixed4 vertex : SV_POSITION;
                fixed2 uv : TEXCOORD0;
            };

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

//UV座標を大雑把にして、複数の隣り合うpixelのcolor値を同一色にする

            fixed2 get_mosaic_uv(fixed2 uv, fixed fixMosaicNum)
            {
                fixed2 mosaicUV = floor(uv / fixMosaicNum) * fixMosaicNum;
#ifdef _PICK_ONE

//座標の取得を大雑把にした結果画像が少し右下にずれる予定なので、左上に少しずらして修正

return mosaicUV+ fixMosaicNum / 2;
#elif _PICK_EQUALIZE

//座標の取得を大雑把にした結果画像が少し下にずれる予定なので、上に少しずらして修正

                return fixed2(mosaicUV.x, mosaicUV.y + fixMosaicNum);
#endif
            }

//渡したUV座標からGrabした画像のcolorを抜き出す

            fixed4 get_tex_color(fixed2 uv, fixed fixMosaicNum)
            {

#ifdef _PICK_ONE

//指定したuv座標のcolorをそのまま返す

return tex2D(_GrabTexture, uv);
#elif _PICK_EQUALIZE

//指定したuv座標から、省略する予定のpixel全体を平均化したcolor値を返す

                fixed4 col;
                int count;
                for(int jx = 0; jx <= floor(_GrabTexture_TexelSize.z * fixMosaicNum); jx++)
                {
                    for(int jy = 0; jy <= floor(_GrabTexture_TexelSize.w * fixMosaicNum); jy++)
                    {
                        fixed pickX = jx * _GrabTexture_TexelSize.x;
                        fixed pickY = jy * _GrabTexture_TexelSize.y;
                        col = col + tex2D(_GrabTexture, uv + fixed2(pickX, pickY));
                        count++;
                    }
                }
                return col /count;
#endif
            }

            fixed4 frag(v2f i) : SV_Target
            {

//もし_MosaicNumが0より大きいなら1を返し、それ以外は0を返す

//shaderではif文が推奨されてないので、if文の代わりとして使う