【Simple Shader】UGUI圆形边缘羽化

写在前面，这个是在写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);

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

完整代码