Unity Shader PostProcessing - 5 - PixelSyle 像素化风格

我的童年乐趣，基本上，都是花在：小霸王游戏机、红白机、街机里，很多那种像素化的游戏。

今天在研究别的东西时，看到一些像素化的游戏，有想起，之前想要试试这个后处理效果的。今天就试试吧。

先上个图，下图是后处理的结果：

原图在这：

看看参数调整过程的GIF

像素化

我们知道马赛克都是应为采样率不够，导致的。

而采样率我们是可以控制的。

在上述的后处理效果中，仅仅将uv的过渡处理成失真似的就可以了。

核心处理失真代码：

                float2 th = i.uv / _PixelInterval;  // 按interval划分中，属于第几个像素
                float2 th_int = th - frac(th);      // 去小数，让采样的第几个纹素整数化，这就是失真UV关键
                th_int *= _PixelInterval;           // 再重新按第几个像素的uv坐标定位
                float2 use_uv = lerp(i.uv, th_int, _PixelItensity); // 应用像素化的强度
                return tex2D(_MainTex, use_uv);

先看看未处理的uv的与分辨率的对应该系，假设500x500的分辨率，采样的纹素sample_U与uv.x的对应关系是这样的：

处理后的失真纹理distortion_sample_u与uv.x的对应关系：(_PixelInterval=0.1)

看看由_PixelInterval=0.1，设置成0.3，再到0.05（目前我划分uv.x的最小值），再回复0.1的关系图：

_PixelInterval参数作用是：像素化时纵横向的像素大小都为屏幕*_PixelInterval的尺寸。 如，w:500,h:500,_PixelInterval:0.1，说明，每个像素的宽高就是(w*_PixelInterval,h*_PixelInterval)==(5,5)。

Shader 按PixelInterval的方式

// jave.lin 2020.03.13 - 像素化风格
Shader "Custom/PixelStylePP" {
    Properties {
        _MainTex ("Texture", 2D) = "white" {}
        _PixelInterval ("PixelInterval", Range(0.0001,0.1)) = 0.001
        _PixelItensity ("PixelIntensity", Range(0, 1)) = 1
    }
    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 vertex : SV_POSITION;
                float2 uv : TEXCOORD0;
            };
            v2f vert (appdata v) {
                v2f o;
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.uv = v.uv;
                return o;
            }
            sampler2D _MainTex;
            float _PixelInterval;
            float _PixelItensity;
            fixed4 frag (v2f i) : SV_Target {
                float2 th = i.uv / _PixelInterval;  // 按interval划分中，属于第几个像素
                float2 th_int = th - frac(th);      // 去小数，让采样的第几个纹素整数化，这就是失真UV关键
                th_int *= _PixelInterval;           // 再重新按第几个像素的uv坐标定位
                float2 use_uv = lerp(i.uv, th_int, _PixelItensity); // 应用像素化的强度
                return tex2D(_MainTex, use_uv);
            }
            ENDCG
        }
    }
}

按PixelSize方式

// jave.lin 2020.03.13 - 像素化风格的另一种参数控制方式
Shader "Custom/PixelStyle1PP" {
    Properties {
        _MainTex ("Texture", 2D) = "white" {}
        _PixelSize ("PixelSize", Range(1, 100)) = 1
    }
    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 vertex : SV_POSITION;
                float2 uv : TEXCOORD0;
            };
            v2f vert (appdata v) {
                v2f o;
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.uv = v.uv;
                return o;
            }
            sampler2D _MainTex;
            float4 _MainTex_TexelSize;
            float _PixelSize;
            fixed4 frag (v2f i) : SV_Target {
                float2 interval = _PixelSize * _MainTex_TexelSize.xy;
                float2 th = i.uv / interval;    // 按interval划分中，属于第几个像素
                float2 th_int = th - frac(th);  // 去小数，让采样的第几个纹素整数化，这就是失真UV关键
                th_int *= interval;             // 再重新按第几个像素的uv坐标定位
                return tex2D(_MainTex, th_int);
            }
            ENDCG
        }
    }
}

两种控制方式的区别

• PixelInterval：不管屏幕分辨率多少，纵横向的马赛克的数量都是1/PixelInterval个，PixelInterval=0.1就是1/0.1=10个。但是窗口屏幕不是正方形的话，马赛克尺寸会变形。
• PixelSize：不管屏幕的分辨率是多少，每个马赛克的大小都是PixelSize指定的大小，1就是无像素化。

Project

backup：UnityShader_PixelStyleTesting_2019.3.1f1