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

扫一扫,访问微社区

首页   >   博客   >   sakuraplus

Unity+shader实现星之卡比新星同盟切屏效果(2)

2018-10-22 17:56
标签:shader

上一话中,我们画出了一个在一定程度上可以调节的halftone图形。

故事说到这里,大家可能会想,这个跟直接使用一张贴图作为遮罩有什么不同呢?

答案是,没什么不同,确实,目前为止的效果是完全可以使用一张遮罩实现的。使用遮罩甚至还能达成更多花哨的效果,但遮罩也有它所不能完成的事情,这就是下面要讲的主题。


现在的效果还是跟预期的不太一样,图案只是在平移,而并没有圆点一个个弹出的感觉。




于是我们修改一下格子划分的方法,让格子的位置不再跟随position变化。

[code]phpcode:
fixed indexOfGrid=floor((i.uvORI.x)/diameterW);//num of grids between uv and PosW 
posCenter.x=(indexOfGrid+0.5)*diameterW;     
fixed modOffset=frac(indexOfGrid*_rotOffset)*_Diameter;
posCenter.y=(floor((i.uvORI.y-modOffset)/diameterH)+ 0.5)*diameterH+modOffset;
  


然后再改变一下计算圆点半径的方法,让其根据uv和position 的关系变化。这里计算前后格子中的半径时,需要改用压缩过的diameter,不然就会出现不太对劲的效果。

[code]as3code:
 _rd=0.5*(_Position-posCenter.x)/_Num;//radius of the current grid 
 float _rdNext=_rd+0.5*diameterW/_Num;
 float _rdPrev=_rd-0.5*diameterW/_Num;

由于划分格子的方法已经发生了变化,原本的if(indexOfGrid>=1)的时候,直接输出textureB已经无效了,实际上,判断的条件应该是圆点半径小于0


接下来,需要一个表明角度的property,来让图形按照一个方向移动,而不是只能从左到右。

[code]as3code:
_Rotation("Rotation", Range(0,360)) = 0.0


旋转角度的算法,在很多地方都可以找到。这里直接转换计算halftone时使用的uv坐标,而textureA和B的uv不受影响。由于各个顶点之间的uv变化是线性的,这一转化可以放在vert函数中完成。

[code]as3code:
 o.uvORI.xy=v.texcoord; fixed2 offsetXY=fixed2(0.5,0.5); 
 float Rot = _Rotation * (3.1415926f/180.0f);
 float s = sin(Rot); 
 float c = cos(Rot); 
 float2x2 rMatrix = float2x2(c, -s, s, c); 
 rMatrix *= 0.5; 
 rMatrix += 0.5; 
 rMatrix = rMatrix * 2 - 1; 
 o.uvORI.xy = mul(o.uvORI.xy-offsetXY, rMatrix)+offsetXY;


这个_Rotation换成弧度角也是完全可以的。 _Rotation("Rotation",  Range(0,6.283)) = 0.0 ,到时候就不需要进行乘PI再除180的计算。


现在看一下 示例场景,里面的halftone切图的效果基本完成了。

接下来会讲讲剩下的mask旋转缩放,内容比较简单,下一话就可以完成。


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


Buy me a coffee: http://u3d.as/1jVq

所以说这个code标签为什么不管用???

0 0

评论 (0 个评论)

facelist doodle 涂鸦板

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

标签

阅读排行

评论排行

推荐博客

最新博客

关闭

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

返回顶部