前言
之前，我们使用 uv 坐标完成了一个圆的图像。今天，我们来给我们的圆添加一些特殊的图形效果。
模糊效果
我们使用smoothstep函数来实现我们的模糊效果。
smoothstep（平滑过渡函数）：
- smoothstep(edge1,edge2,x)
- 大于 edge2 返回 1，小于 edge1 返回 0，介于之间，返回 0-1 平滑过渡的值。
这里我们将 edge2 设置大一点，那么介于 0-1 之间平滑过渡的值便多一点，我们便可以得到我们的模糊效果了。
void mainImage(out vec4 fragColor,in vec2 fragCoord){
vec2 uv =fragCoord/iResolution.xy; //坐标除以画布大小得到归一化uv坐标
// uv 居中
uv=(uv*2.)-1.0;
uv.x*=iResolution.x/iResolution.y; // 修正uv坐标未自动适应画布比例的问题
float d=length(uv)-0.5; // 取一段距离
float c=0.; //存放值的变量
//模糊效果
c=smoothstep(0.,0.2,d ); //利用step函数得到值
fragColor=vec4(c,c,c,1.); // 输出
}
发光效果
我们想要得到一个发光圆的效果，首先得得到一个白色的圆。那么我们如何得到一个白色的圆呢？ 思路：我们是通过 uv 坐标的 length 去得到一个黑色的圆的。那我们取 length 的倒数，是不是就可以得到一个白色的圆了呢？
void mainImage(out vec4 fragColor,in vec2 fragCoord){
vec2 uv =fragCoord/iResolution.xy; //坐标除以画布大小得到归一化uv坐标
// uv 居中
uv=(uv*2.)-1.0;
uv.x*=iResolution.x/iResolution.y; // 修正uv坐标未自动适应画布比例的问题
float d=-1./(length(uv)-0.5); // 取一段距离
float c=0.; //存放值的变量
//模糊效果
c=smoothstep(0.,0.2,d ); //利用step函数得到值
// 发光效果
fragColor=vec4(vec3(c),1.); // 输出
}
我们现在已经得到白色的圆了，现在我们要让它发光。 如何让它发光呢？
思路：“我们让它白色和黑色交界的区间存在一个平滑过渡（即让它的值存在一部分介于 0-1 之间的部分）”，这里我们可以想到一个函数——反比例函数。它的图像为：
我们可以看到 d=0 时，1/d 很大，变成颜色就是白色，当 d=1 时，1/d=1,d>1 时，1/d 为白色和黑色之间的颜色。
//发光效果
void mainImage(out vec4 fragColor,in vec2 fragCoord){
vec2 uv =fragCoord/iResolution.xy; //坐标除以画布大小得到归一化uv坐标
// uv 居中
uv=(uv*2.)-1.0;
uv.x*=iResolution.x/iResolution.y; // 修正uv坐标未自动适应画布比例的问题
float d=(length(uv)); // 取uv坐标长度（这里不需要减去一段距离，因为减去一段距离之后便存在负数了）
float c=1./d; //存放值的变量
// 发光效果
fragColor=vec4(vec3(c),1.); // 输出
}
为了让我们的发光效果更明显，我们可以乘上一个小数。
//发光效果
void mainImage(out vec4 fragColor,in vec2 fragCoord){
vec2 uv =fragCoord/iResolution.xy; //坐标除以画布大小得到归一化uv坐标
// uv 居中
uv=(uv*2.)-1.0;
uv.x*=iResolution.x/iResolution.y; // 修正uv坐标未自动适应画布比例的问题
float d=(length(uv)); // 取uv坐标长度（这里不需要减去一段距离，因为减去一段距离之后便存在负数了）
float c=0.2/d; //存放值的变量
// 发光效果
fragColor=vec4(vec3(c),1.); // 输出
}
总结
我们今天分享就结束了，如有错误之处，欢迎大家留言之处。谢谢大家了。
