[Unity+shader]利用分格的方法制作更多有趣的特效：像素化和popup mask
不管是绘制halftone图形，还是制作TriangularBillboard，都离不开一个环节，那就是格子的划分。
在格子的基础上，还可以发展出许多有趣的效果，最常见的就是像素化。
首先增加两个property，用以控制在横向和纵向分格的数量。
Properties {
_MainTex ("Main Texture", 2D) = "white" {}
_Progress ("Progress", Range(0,1)) = 1.0
_SegmentX("Segment x", Float )=5
_SegmentY("Segment y", Float )=5
}
之后，在frag中，计算当前uv坐标所属的格子的中心位置，方法很简单，与前几章中使用的大同小异。对于将格子数量转换为每个格子在uv中所占的长度的计算，放在vert活著直接在脚本中算好传进来也都是可以的。
fixed4 frag(v2f i) : SV_Target {
float2 _Diameter=fixed2(1/ceil(_SegmentX),1/ceil(_SegmentY));
float2 center = float2(_Diameter.x*floor(i.uvORI.x/_Diameter.x), _Diameter.y*floor(i.uvORI.y/_Diameter.y));
center+=_Diameter/2;
return tex2D(_MainTex, center);
}
在计算出中心位置之后，直接返回中心的颜色，我们就可以得到一张对比强烈的像素图了。
如果需要颜色变化更柔和一点，同时采样中心点周围的几个坐标的颜色，并且按照你喜欢的方式为周围坐标的颜色加上权重即可。
float4 TexMain = tex2D(_MainTex, i.uvORI);
float4 TexPixel = tex2D(_MainTex, center)*0.4;
TexPixel += tex2D(_MainTex, center+fixed2( _Diameter.x/4,0))*0.15;
TexPixel += tex2D(_MainTex, center-fixed2( _Diameter.x/4,0))*0.15;
TexPixel += tex2D(_MainTex, center+fixed2(0, _Diameter.y/4))*0.15;
TexPixel += tex2D(_MainTex, center-fixed2(0, _Diameter.y/4))*0.15;
在最后，使用progress来控制显示原图还是像素化之后的图形，一个简单的像素化效果就完成了。
return lerp(TexMain,TexPixel,_Progress);
如果加上一个表示颜色数量的property，
_Color("num of color", Range(1,16) )=0
就可以制作出简单的色阶效果了。
_Color=floor(_Color);
if(_Color>1){
_Color=_Color*_Color;
TexPixel.rgb=floor( TexPixel.rgb*_Color)/_Color;
}
在绘制halftone 的章节中，我们已经试过了使用一个参数来控制半径在格子里画圆，那么，如果想要画一个不好用公式表示的复杂图形时，要怎么办呢？接下来我们试一下使用一个参数来控制多个mask贴图的缩放。
Shader "TUT/PixelatedPopupMask00" {
Properties {
_MainTex ("Main Texture", 2D) = "white" {}
_MainTexM ("Texture Mask", 2D) = "black" {}
_Scale ("Scale", Float) = 1.0
_SegmentX("Segment x", Float )=5
_SegmentY("Segment y", Float )=5
}
SubShader {
CGINCLUDE
#include "UnityCG.cginc"
sampler2D _MainTex;
sampler2D _MainTexM;
uniform half4 _MainTexM_ST;
uniform half4 _MainTex_ST;
float _SegmentX;
float _SegmentY;
float _Scale;
struct v2f {
float4 pos : SV_POSITION;
half2 uvORI: TEXCOORD2;//original
};
v2f vert(appdata_img v) {
v2f o;
o.pos = mul(UNITY_MATRIX_MVP, v.vertex);
o.uvORI=(v.texcoord-_MainTexM_ST.zw)*_MainTexM_ST.xy ;
return o;
}
fixed4 frag(v2f i) : SV_Target {
float2 _Diameter=fixed2(1/ceil(_SegmentX),1/ceil(_SegmentY));
float2 center = float2(_Diameter.x*floor(i.uvORI.x/_Diameter.x), _Diameter.y*floor(i.uvORI.y/_Diameter.y));
center+=_Diameter/2;
float2 _rd=_Scale*_Diameter/2;
fixed4 TexMain = tex2D(_MainTex, i.uvORI);
fixed2 uvMask=fixed2((i.uvORI.x-center.x),(i.uvORI.y-center.y));
uvMask=(uvMask+_rd)/(2*_rd);
uvMask=saturate(uvMask);
fixed4 TexMask= tex2D(_MainTexM,uvMask) ;
return lerp (TexMain, TexMask,TexMask.a);
}
ENDCG
Pass {
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
ENDCG
}
}
FallBack "Diffuse"
}
这里改用一个叫做scale的property来控制mask贴图的缩放，scale是1的时候，就让贴图刚好充满整个格子。然后，使用mask贴图的透明度来控制显示mainTex还是mask。如果用作mask的图不是设置为clamp的话，记得要将计算出的uvMask限制在0到1之间。
接下来我们看一下效果。
****以下是重点****
我们从头开始分析：（
为了让贴图在每格里绘制，我们计算出的uvMask是这样： 0～1，0～1，0～1，而不像平时的repeat那样，可以是0～1，1～2，2～3这样的值。
推测问题是unity中fragment shader并不是真正以像素为单位，以至于边界区域的像素对周边的uv进行了插值，于是绘制出一张非常狭窄的uv被镜像了的贴图所导致。希望路过的大佬能为我解惑呀！！
既然repeat可以这样做，那么我们首先来尝试计算每个格子在所有格子中的行列数，之后与每次计算出的uv相加，得出0～1，1～2，2～3。
fixed2 indexXY=fixed2(floor(i.uvORI.x/_Diameter.x),floor(i.uvORI.y/_Diameter.y));
之后在计算出的0～1之间的值上增加。不要忘了将mask设置为repeat。
uvMask+=indexXY;
是不是奇怪的线线奇迹般的消失了～然而事情并没有得到解决。当scale大于1，也就是每个格子里只能绘制出mask贴图的一部分时，这个方法就失效了，因为增加过的uv变成了0.1～0.9，1.1～1.9，2.1～2.9，只要mask贴图在0.9到1.1这个范围中有不同内容就会导致线条出现。
十分忧伤的，这个问题目前还没有找到解决办法：（
希望观看更多效果，去
Unity Web Player | SlideshowEffect作为摄像机特效也可以使用
Unity Web Player |SlideshowEffect CamEffect在slideshow Effects 中，使用了一种取巧的方法，导致这种特效只能使用上下、左右对称的贴图作为mask。
获取更多特效，Buy me a coffee： http://u3d.as/1jVq
本章使用到的资源在这里
sakuraplus/make-terrain-with-google-elevation
推荐阅读：
