利用分格的方法制作更多有趣的特效：像素化和popup mask

不管是绘制halftone图形，还是制作TriangularBillboard，都离不开一个环节，那就是格子的划分。

在格子的基础上，还可以发展出许多有趣的效果，最常见的就是像素化。

关于格子划分的问题，观看上一章：绘制halftone动画，实现星之卡比新星同盟切屏效果

首先增加两个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);

    

 在绘制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这个范围中有不同内容就会导致线条出现。

十分忧伤的，这个问题目前还没有找到解决办法：（

 

希望观看更多效果，去

https://sakuraplus.github.io/make-terrain-with-google-elevation/webplayerAllMat/webplayer.html

作为摄像机特效也可以使用

https://sakuraplus.github.io/make-terrain-with-google-elevation/webplayerCam/webplayerCam.html

 

在slideshow Effects 中，使用了一种取巧的方法，导致这种特效只能使用上下、左右对称的贴图作为mask。

获取更多特效，Buy me a coffee： http://u3d.as/1jVq