【THREE.ShaderMaterial】THREE脉冲圈实现（shader借鉴shadertoy）

效果预览：

1.shadertoy中具体glsl

shadertoy传送地址

  vec3 hsb2rgb(in vec3 c)
                {
                    vec3 rgb = clamp(abs(mod(c.x*6.0+vec3(0.0,4.0,2.0),6.0)-3.0)-1.0,0.0,1.0 );
                    rgb = rgb*rgb*(3.0-2.0*rgb);
                    return c.z * mix( vec3(1.0), rgb, c.y);
 }

   void mainImage( out vec4 fragColor, in vec2 fragCoord )
                {   
                    vec2 p = (2.0 * fragCoord.xy - iResolution.xy) / min(iResolution.y, iResolution.x);
                    float r = length(p) * 0.9;
                    vec3 color = hsb2rgb(vec3(0.24, 0.7, 0.4));
                    
                    float a = pow(r, 2.0);
                    float b = sin(r * 0.8 - 1.6);
                    float c = sin(r - 0.010);
                    float s = sin(a - iTime * 3.0 + b) * c;
                    
                    color *= abs(1.0 / (s * 10.8)) - 0.01;
                    fragColor = vec4(color, 1.);
  }

2.THREE中glsl

        varying vec2 vUv;
        uniform float u_time;
        uniform float u_opacity;
        uniform vec3 u_color;
        void main() {
            // Normalized pixel coordinates (from 0 to 1)
            vec2 uv = vUv;
            vec2 p = 2.0*vec2(uv.x,uv.y) - vec2(1., 1.) ;   
            float r = length(p) * 2.;
            float a = pow(r, 2.0);
            float b = sin(r * 0.8 - 1.6);
            float c = sin(r - 0.010);
            float s = sin(a - u_time * 3.0 + b) * c;
            vec3 color = u_color;新加的
            color *= abs(1.0 / (s * 30.)) - 0.01;
            gl_FragColor = vec4(color, .6*u_opacity);
        }

3 不同的地方

3.1

shadertoy中

vec2 p = (2.0*fragCoord.xy-iResolution.xy)/iResolution.y;

three中这里的uv坐标是0-1的，原点是左下角
归一化到-1-1之间，原点换到中心位置

vec2 p = 2.0*vec2(uv.x,uv.y) - vec2(1., 1.) ;

具体参考下面优秀博客：

Shadertoy 的坐标转换

3.2

这里因为shadertoy是做了个颜色转换
shadertoy中

vec3 color = hsb2rgb(vec3(0.24, 0.7, 0.4));

three中

vec3 color = u_color;three中直接传uniform颜色值进来

见下博客解释：
https://zhuanlan.zhihu.com/p/35973705