我的童年乐趣,基本上,都是花在:小霸王游戏机、红白机、街机里,很多那种像素化的游戏。
今天在研究别的东西时,看到一些像素化的游戏,有想起,之前想要试试这个后处理效果的。今天就试试吧。
先上个图,下图是后处理的结果:
原图在这:
看看参数调整过程的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就是无像素化。