【Simple Shader】UGUI圆形边缘羽化

C#

浏览数:160

2019-10-11

AD:资源代下载服务

写在前面,这个是在写ScrollView边缘羽化效果时,发现的一个写法,简单效果如下。

效果图

原理

为什么是圆形?我们先来看看两个公式。


两点的距离公式
圆的半径公式

是不是很是相似,我们只需要指定一个点为圆心,再计算出其他点与圆心的距离,这样我们边缘圆形羽化的效果是不是就出来了。
那么我们怎么定这个点呢?我们看看一个图片四个角的坐标位置。


图片中点的坐标

然后我们把点的范围定在-1到1即可。

实现

新建一个shader,然后我们需要在属性中添加三个属性:

_EclosionScale("Eclosion Scale",Range(0,5))=0//羽化的大小
_PointX("Point X",Range(0,1))=0.5//x坐标
_PointY("Point Y",Range(0,1))=0.5//y坐标

然后做透明设置,顶点函数不变,在片元函数中加入计算到圆心距离的计算即可。

//计算点到圆心的距离
float dx=i.uv.x-_PointX;
float dy=i.uv.y-_PointY;
float dstSq=pow(dx,2.0)+pow(dy,2.0);
float v=(dstSq/_EclosionScale);
col *= saturate(v);
return col;     

这个时候如果你看到的图片应该这样的


这个羽化是从内到外的,因为离得越近值就靠近0,0就是没有颜色嘛,我们只需要把这个v值改一下即可。

col *= saturate(1-v);

嗯,差不多就这样子。说的有点啰嗦了。

完整代码

作者:黒可乐