canvas+webgl实现信号发送雷达波动画效果代码-html代码-BFW代码库

canvas+webgl实现信号发送雷达波动画效果代码

代码语言：html

所属分类：动画

代码描述：canvas+webgl实现信号发送雷达波动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <STYLE>
        body {
        margin: 0;
        overflow: hidden;
        background: black;
    }
    canvas {
        display: block;
        width: 100%;
        height: 100%;
    }
    </STYLE>

</head>

<body>
    <canvas id="PulseCanvas"></canvas>

    <script>
        const vertexShaderSource = `#version 300 es
    in vec4 aVertexPosition;
    void main() { gl_Position = aVertexPosition; }
    `;
    
    const fragmentShaderSource = `#version 300 es
    precision highp float;
    out vec4 fragColor;
    uniform float uTime;
    uniform vec2 uResolution;
    
    vec3 hsv2rgb(vec3 c) {
        vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
        vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);
        return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);
    }
    
    float random(vec2 st) {
        return fract(sin(dot(st.xy, vec2(12.9898, 78.233))) * 43758.5453123);
    }
    
    void main() {
        vec2 uv = (gl_FragCoord.xy - 0.5 * uResolution.xy) / uResolution.y;
        float t = uTime * 0.5;
        float angle = t * 2.0;
        mat2 rotation = mat2(cos(angle), -sin(angle), sin(angle), cos(angle));
        uv = rotation * uv;
    
        vec2 p = uv * 8.0;
        float a = atan(p.y, p.x);
        float r = length(p);
        float d = r - t + sin(a * 5.0 + t * 2.0) * 0.1;
        float f = smoothstep(0.0, 0.5, sin(d * 10.0 - t * 5.0));
        float pulse = sin(t * 40.0) * 0.5 + 0.5;
        f *= pulse;
    
        vec3 col = vec3(0.0);
        for (int i = 0; i < 10; i++) {
            vec2 particlePos = vec2(random(vec2(float(i), t)), random(vec2(t, float(i)))) * 2.0 - 1.0;
            float dist = length(uv - particlePos);
            float particleSize = 0.05 + 0.05 * sin(t * 10.0 + float(i) * 10.0);
            float particleIntensity = smoothstep(particleSize, 0.0, dist);
            vec3 particleColor = hsv2rgb(vec3(float(i) * 0.1 + t * 0.1, 1.0, particleIntensity));
            col += particleColor * particleIntensity;
        }
    
        col = mix(col, hsv2rgb(vec3(f * sin(a * 3.0 + t), f * cos(a * 2.0 + t), f * sin(a * 4.0 + t))), 0.5);
        col *= (1.0 + sin(r * 10.0 - t * 5.0) * 0.5);
        col = mix(col, vec3(0.0), smoothstep(1.0, 2.0, r));
        fragColor = vec4(col, 1.0);
    }
    `;
    
    function createShader(gl, type, source) {
        const shader = gl.createShader(type);
        gl.shaderSource(shader, source);
        gl.compileShader(shader);
        if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
            console.error(&.........完整代码请登录后点击上方下载按钮下载查看