利用分格的方法制作更多有趣的特效:像素化和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