【Unity Shader相关】曲线渐变

问题概述

解决问题遇到的一个复刻渐变图，原图就不放出来了（），主要是记录一下曲线渐变的思路，也算是再巩固一下lerp smoothstep的用法吧，直接放思路和效果：

实现思路

圆弧这部分我是求解圆心的思路做的，很笨的办法，但目前想到的也只有这个了hhh，直接复制的shader，格式在这我就不调整了：

// 计算以r为半径，(x1,y1) (x2,y2)的圆的圆心
            float2 CircleCenter0(float x1,float y1,float x2,float y2,float R)  {
                float c1 = (x2*x2 - x1*x1 + y2*y2 - y1*y1) / (2.0 *(x2 - x1));
                float c2 = (y2 - y1) / (x2 - x1);  //斜率
                float A = (c2*c2 + 1);
                float B = (2 * x1*c2 - 2 * c1*c2 - 2 * y1);
                float C = x1*x1 - 2 * x1*c1 + c1*c1 + y1*y1 - R*R;
                float y = (-B + sqrt(B*B - 4.0 * A*C)) / (2.0 * A);
                float x = c1 - c2 * y;
                return float2(x,y);

但由于实现的效果需要两边圆弧，所以这个求解圆心的我直接列了两个方法，其实也可以在方法里写个if，但我懒得写（），就这样吧：

接下来需要封装另一个，给x求出圆上y值得方法，笑死，这里我就想到了可以写个if了：

// 封装一个以(a,b)为圆心的圆,返回对应的y值
            float sphere(float x1,float y1,float x2,float y2,float x, float r,int a) {
                float2 circle = CircleCenter0(x1,y1,x2,y2,r);
                if(a==1){
                    circle = CircleCenter1(x1,y1,x2,y2,r);
                    return circle.y + pow((r*r - pow((x-circle.x),2.0)),1.0/2.0);
                }
                return circle.y - pow((r*r - pow((x-circle.x),2.0)),1.0/2.0);

            }

接下来就是普通的lerp和smoothstep叠叠乐拉：

设了四个可调参，调整圆弧大小：

最终效果：