Three.js-着色器（glsl内置函数）_HM-hhxx！的博客-CSDN博客Threejs中着色器（glsl内置函数）的介绍及使用，利用内置函数实现各种图形及效果。https://blog.csdn.net/damadashen/article/details/125807156?spm=1001.2014.3001.5501
接上一篇，继续使用着色器及内置函数实现各种图形及效果。
目录
1. 绘制圆
2.绘制圆环
3.靶子环
4.波浪环
5. 根据角度显示视图（atan（））
6.根据角度实现螺旋渐变
7.实现雷达扫射效果
8. 光芒四射效果
9. 使用噪声算法实现各种效果
10.噪声算法二-cnoise（）的使用
11. 混合颜色
1. 绘制圆1）白色圆
float strength = 1.0 - step(0.5,distance(vUv,vec2(0.5))+0.25) ;
gl_FragColor =vec4(strength,strength,strength,1);实现效果：
2）黑色圆
float strength = step(0.5,distance(vUv,vec2(0.5))+0.25) ;
gl_FragColor =vec4(strength,strength,strength,1);
float strength = step(0.5,distance(vUv,vec2(0.5))+0.35) ;
strength *= (1.0 - step(0.5,distance(vUv,vec2(0.5))+0.25)) ;
gl_FragColor =vec4(strength,strength,strength,1);实现效果：
float strength = step(0.1,abs(distance(vUv,vec2(0.5))-0.25)) ;
gl_FragColor =vec4(strength,strength,strength,1);实现效果：
vec2 waveUv = vec2(
vUv.x,
vUv.y+sin(vUv.x*30.0)*0.1
);
float strength = 1.0 - step(0.01,abs(distance(waveUv,vec2(0.5))-0.25)) ;
gl_FragColor =vec4(strength,strength,strength,1);
实现效果：
反正切函数
float angle = atan(vUv.x,vUv.y);
float strength = angle;
gl_FragColor =vec4(strength,strength,strength,1);实现效果：
float angle = atan(vUv.x-0.5,vUv.y-0.5);
float strength = (angle+3.14)/6.28;
gl_FragColor =vec4(strength,strength,strength,1);实现效果：
vec2 rotateUv = rotate(vUv,-uTime*5.0,vec2(0.5));
float alpha = 1.0 - step(0.5,distance(vUv,vec2(0.5)));
float angle = atan(rotateUv.x-0.5,rotateUv.y-0.5);
float strength = (angle+3.14)/6.28;
gl_FragColor =vec4(strength,strength,strength,alpha);实现效果：
float angle = atan(vUv.x-0.5,vUv.y-0.5)/(2.0*PI);
float strength = sin(angle*100.0);
gl_FragColor =vec4(strength,strength,strength,1);实现效果：
在fragment.glsl文件的main（）函数前对噪声算法进行声明：
// 噪声函数
float noise (in vec2 _st) {
vec2 i = floor(_st);
vec2 f = fract(_st);
// Four corners in 2D of a tile
float a = random(i);
float b = random(i + vec2(1.0, 0.0));
float c = random(i + vec2(0.0, 1.0));
float d = random(i + vec2(1.0, 1.0));
vec2 u = f * f * (3.0 - 2.0 * f);
return mix(a, b, u.x) +
(c - a)* u.y * (1.0 - u.x) +
(d - b) * u.x * u.y;
}原始noise（）使用
float strength = noise(vUv);
gl_FragColor =vec4(strength,strength,strength,1);
实现效果：
1）实现细碎黑白花效果
在main（）函数中调用noise（）进行实现：
float strength = step(0.5,noise(vUv * 100.0)) ;
gl_FragColor =vec4(strength,strength,strength,1);实现效果：
在main（）函数前对cnoise（）进行声明：
// Classic Perlin 2D Noise
// by Stefan Gustavson
//
vec4 permute(vec4 x)
{
return mod(((x*34.0)+1.0)*x, 289.0);
}
vec2 fade(vec2 t)
{
return t*t*t*(t*(t*6.0-15.0)+10.0);
}
float cnoise(vec2 P)
{
vec4 Pi = floor(P.xyxy) + vec4(0.0, 0.0, 1.0, 1.0);
vec4 Pf = fract(P.xyxy) - vec4(0.0, 0.0, 1.0, 1.0);
Pi = mod(Pi, 289.0); // To avoid truncation effects in permutation
vec4 ix = Pi.xzxz;
vec4 iy = Pi.yyww;
vec4 fx = Pf.xzxz;
vec4 fy = Pf.yyww;
vec4 i = permute(permute(ix) + iy);
vec4 gx = 2.0 * fract(i * 0.0243902439) - 1.0; // 1/41 = 0.024...
vec4 gy = abs(gx) - 0.5;
vec4 tx = floor(gx + 0.5);
gx = gx - tx;
vec2 g00 = vec2(gx.x,gy.x);
vec2 g10 = vec2(gx.y,gy.y);
vec2 g01 = vec2(gx.z,gy.z);
vec2 g11 = vec2(gx.w,gy.w);
vec4 norm = 1.79284291400159 - 0.85373472095314 * vec4(dot(g00, g00), dot(g01, g01), dot(g10, g10), dot(g11, g11));
g00 *= norm.x;
g01 *= norm.y;
g10 *= norm.z;
g11 *= norm.w;
float n00 = dot(g00, vec2(fx.x, fy.x));
float n10 = dot(g10, vec2(fx.y, fy.y));
float n01 = dot(g01, vec2(fx.z, fy.z));
float n11 = dot(g11, vec2(fx.w, fy.w));
vec2 fade_xy = fade(Pf.xy);
vec2 n_x = mix(vec2(n00, n01), vec2(n10, n11), fade_xy.x);
float n_xy = mix(n_x.x, n_x.y, fade_xy.y);
return 2.3 * n_xy;
}1）通过时间设置变化波形
float strength = step(uScale,cnoise(vUv * 10.0+uTime)) ;
gl_FragColor =vec4(strength,strength,strength,1);
实现效果：
2）实现发光路径
float strength =1.0 - abs(cnoise(vUv * 10.0)) ;
gl_FragColor =vec4(strength,strength,strength,1);
实现效果：
3）利用时间实现波纹效果
float strength = sin(cnoise(vUv * 10.0)*5.0+uTime) ;
gl_FragColor =vec4(strength,strength,strength,1);
实现效果：
vec3 purpleColor = vec3(1.0, 0.0, 1.0);
vec3 greenColor = vec3(1.0, 1.0, 1.0);
vec3 uvColor = vec3(vUv,1.0);
float strength = step(0.9,sin(cnoise(vUv * 10.0)*20.0)) ;
vec3 mixColor = mix(greenColor,uvColor,strength);
gl_FragColor =vec4(mixColor,1.0);实现效果：
