百度上搜了一下貌似没搜到实现这个功能的教程,那我来填补一下这块缺失嗷。
要实现filled效果首先就是需要能够通过计算来判断你的amount改变时,图片那部分需要隐藏起来,那部分需要展示出来。因此,水平垂直方向的filled只要考虑uv的x轴或者y轴就可以,可是360度的filled要考虑的事情就很多了。
总所周知,一个图的uv坐标是这样的
圆形的中心点的坐标就是(0.5,0.5)。
上下左右的坐标就是:(0.5,1)(0.5,0)(0,0.5)(1,0.5)
那我们先拿右点:A(1,0.5)边坐标作为filled功能的起始点。
通过中心点和起始点可以先确定一个向量
然后取uv上每个点和中心点做向量OX来和向量OA做点乘。就能得出OX和OA之间的夹角,角度最大的时候(180度)点乘结果为-1,角度最小(0度)值为1。
所以先做一个这样的shader:
变量amount是一个range(-1,1)的值,如果当前像素和OA的点乘结果大于amount,则alpha值设为0,如果小于amount就显示出来。