游戏蛮牛学习群(纯技术交流,不闲聊):159852603
游戏蛮牛 手机端
开启辅助访问
 找回密码
 注册帐号

扫一扫,访问微社区

首页   >   博客   >   sakuraplus

利用分格的方法制作更多有趣的特效:像素化

2018-11-9 21:24
不管是绘制halftone图形,还是制作TriangularBillboard,都离不开一个环节,那就是格子的划分。
在格子的基础上,还可以发展出许多有趣的效果,最常见的就是像素化。
关于格子划分的问题,观看上一章:Unity+shader实现星之卡比新星同盟切屏效果2
http://www.manew.com/blog-300495-44703.html

首先增加两个property,用以控制在横向和纵向分格的数量。

[code]phpcode:

	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活着直接在脚本中算好传进来也都是可以的。

[code]phpcode:

		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);
			}
 
在计算出中心位置之后,直接返回中心的颜色,我们就可以得到一张对比强烈的像素图了。


如果需要颜色变化更柔和一点,同时采样中心点周围的几个坐标的颜色,并且按照你喜欢的方式为周围坐标的颜色加上权重即可。

[code]phpcode:

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来控制显示原图还是像素化之后的图形,一个简单的像素化效果就完成了。              

[code]phpcode:

return lerp(TexMain,TexPixel,_Progress);

    


希望观看更多效果,去
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 中的Popup Mask特效。
获取更多特效,Buy me a coffee: http://u3d.as/1jVq

0 0

评论 (0 个评论)

facelist doodle 涂鸦板

您需要登录后才可以评论 登录 | 注册帐号

标签

阅读排行

评论排行

推荐博客

最新博客

关闭

站长推荐 上一条 /1 下一条

返回顶部