UnityTips 之 暗角效果巧妙的圆角矩形制作

简介： 最近再学习的时候，接触到到了 Unity 暗角的shader实现逻辑，在里面看到了一个有意思的圆角效果实现方法，在此分享一下
版本： Unity2019.4.12f1

具体的实现思路

先求得 UV 到中心点（0.5，0.5）的距离，然后将其缩放到0-1的区间（可乘系数），下一步求得这个 二维向量的长度，这就得到了0-1的uv象限内所有点到 （0.5，0.5）的距离，对其进行power 便可以控制圆角的程度，power值越大越趋近于矩形， 然后将其进行平方之后进行 oneminus（用 1 减去）操作（反向黑白），然后加个 power 就可以控制其衰减程度

图解实现

• 我们使用两个ASE 的 relay 节点来预览 x 的值 与 y 值的 图片效果

1. 求 UV 象限内 所有点到 （0.5，0.5）的距离，使用 abs 函数使其结果范围都是 0 到 0.5

   
   
   使用 abs 求绝对值，使负数变正，来表示正确的距离

2. 对得到的 0 到 0.5 的结果进行 2 倍缩放，使其变为 0 到 1 的范围

   
   
   缩放距离结果为 0 - 1

3. 给缩放结果加一个钳制，确保当我将倍数放大时，结果被限制在 0 - 1 内

   
   
   限制倍乘后的输出范围为 0 - 1

4. 添加一个 power 来控制 0 到 1 的渐变锐化度，可以看到 我们的倍乘可以增加白色的范围，而我们的power 可以缩小黑色和白色之间的过渡范围

   
   
   调整倍乘和power的效果.gif

5. 求得每一点对应的向量长度，结果就会得到一个圆角矩形，倍乘越大黑色范围越小，power越大，形状越方

   
   
   倍乘和power对长度的影响

6. 四个角向内其实还是会有一点不均匀

   
   
   对角线的颜色较深，我们开方看一下会更明显

7. 做个平方然后 用 oneminuse 进行反向

   
   
   这里的黑白范围是被控制在 0 到 1 的

8. 最后结果加一个 power 来控制 和白渐变范围的大小

   
   
   最终控制

9. 最后个参数控制效果

   
   
   最后控制效果预览