噪声雷达

主要讲解 shader 片元代码部分 分五步

• 第一步 通过 rotate函数 设置 uv 的旋转
• 第二步 绘制圆
• 第三步 噪声函数处理
• 第四步 绘制雷达
• 第五步 取模

rotate函数 设置 uv 的旋转

void main(){
    // 1. uTime 是 uniforms 传递的时间值
    vec2 rotateVuv = rotate(vUv , -uTime ,vec2(0.5));
}

2. 绘制圆

void main(){
    // 1. uTime 是 uniforms 传递的时间值
    vec2 rotateVuv = rotate(vUv , -uTime ,vec2(0.5));
    // 2. 绘制圆
    float opcity = 1.0 - step(0.5 , distance(rotateVuv,vec2(0.5)));
    gl_FragColor = vec4(vec3(1.0),opcity);
}

3. 噪声函数处理出来

噪声函数 提供的

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;
        }        

void main(){ 
    // 1. uTime 是 uniforms 传递的时间值
    vec2 rotateVuv = rotate(vUv , -uTime ,vec2(0.5));
    
    // 2. 绘制圆
    float opcity = 1.0 - step(0.5 , distance(rotateVuv,vec2(0.5)));
    gl_FragColor = vec4(vec3(1.0),opcity);
    
    // 3. 吧 噪声函数处理出来
    float dis = length(v_position );
    dis = sin( dis + cnoise(vUv * 10.0) * 5.0 + uTime);
    
    // opcity * dis 可以得倒噪声的 变动
    gl_FragColor = vec4(vec3(1.0),opcity * dis);
}

4. 绘制雷达

• 可以看到我们这一步和前几步处理起来效果对不上 ， 所以我们需要第五步的操作

void main(){ 
    // 1. uTime 是 uniforms 传递的时间值
    vec2 rotateVuv = rotate(vUv , -uTime ,vec2(0.5));
    
    // 2. 绘制圆
    float opcity = 1.0 - step(0.5 , distance(rotateVuv,vec2(0.5)));
    gl_FragColor = vec4(vec3(1.0),opcity);
    
    // 3. 吧 噪声函数处理出来
    float dis = length(v_position );
    dis = sin( dis + cnoise(vUv * 10.0) * 5.0 + uTime);
    
    // 4. 绘制雷达 设置雷达的角度大小 
    float angle = atan(rotateVuv.x -0.5,rotateVuv.y - 0.5);
    float strength = (angle + 3.14) / 6.28 * 10.0 ; 
    
    // opcity * dis 可以得倒噪声的 变动
    gl_FragColor = vec4(vec3(1.0), strength + opcity * dis);
}

5. 取模 mod

• 这一步为了理解更清楚 我们细分为 几步来理解

void main(){ 
    // 1. uTime 是 uniforms 传递的时间值
    vec2 rotateVuv = rotate(vUv , -uTime ,vec2(0.5));
    
    // 2. 绘制圆
    float opcity = 1.0 - step(0.5 , distance(rotateVuv,vec2(0.5)));
    gl_FragColor = vec4(vec3(1.0),opcity);
    
    // 3. 吧 噪声函数处理出来
    float dis = length(v_position );
    dis = sin( dis + cnoise(vUv * 10.0) * 5.0 + uTime);
    
    // 4. 绘制雷达 设置雷达的角度大小 
    float angle = atan(rotateVuv.x -0.5,rotateVuv.y - 0.5);
    float strength = (angle + 3.14) / 6.28 * 10.0 ; 
    
    // 5. 取模 
    float st = 1. - step(0.05,mod(dis ,0.65));
    
    // 5.1 判断 st == 1.0 
    if(st == 1.0){
        gl_FragColor = vec4(vec3(1.0),opcity *  dis);
    }
}

5.1 判断 st == 1.0

5.2 判断 st != 1.0

void main(){ 
    // 1. uTime 是 uniforms 传递的时间值
    vec2 rotateVuv = rotate(vUv , -uTime ,vec2(0.5));
    
    // 2. 绘制圆
    float opcity = 1.0 - step(0.5 , distance(rotateVuv,vec2(0.5)));
    gl_FragColor = vec4(vec3(1.0),opcity);
    
    // 3. 吧 噪声函数处理出来
    float dis = length(v_position );
    dis = sin( dis + cnoise(vUv * 10.0) * 5.0 + uTime);
    
    // 4. 绘制雷达 设置雷达的角度大小 
    float angle = atan(rotateVuv.x -0.5,rotateVuv.y - 0.5);
    float strength = (angle + 3.14) / 6.28 * 10.0 ; 
    
    // 5. 取模 
    float st = 1. - step(0.05,mod(dis ,0.65));
    
    // 5.1 判断 st == 1.0 
    if(st == 1.0){
        gl_FragColor = vec4(vec3(1.0),opcity *  dis);
    }else{
        vec4 color = mix(vec4(1.0,1.0,0.0,opcity),vec4(1.0,1.0,1.0,0.0),strength + dis);
        gl_FragColor = color;
    }
}

最终效果