threejs-shader-平面扩散波-demo

扩散波-demo

下载demo
边缘透明度渐变来处理锯齿问题。
处理前：

function diffusion() {
    const width = 20;
    const color = "#5588aa";
    // 创建box 
    const geometry = new THREE.PlaneBufferGeometry(width, width, 1, 1);
    const vertexShader = `  
    varying vec2 vUv;
    void main() { 
        vUv = uv;
        gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
    }`;
    const fragmentShader = `
    varying vec2 vUv;
    uniform vec3 uColor;
    uniform float uOpacity;
    uniform float uSpeed; 
    uniform float uSge;
    uniform float time;
    float PI = 3.14159265;
    float drawCircle(float index, float range) {
        float opacity = 1.0;
        if (index >= 1.0 - range) {
            opacity = 1.0 - (index - (1.0 - range)) / range;
        } else if(index <= range) {
            opacity = index / range;
        } 
        return opacity;
    }
    float distanceTo(vec2 src, vec2 dst) {
        float dx = src.x - dst.x;
        float dy = src.y - dst.y;
        float dv = dx * dx + dy * dy;
        return sqrt(dv);
    } 
    void main() { 
        float iTime = -time * uSpeed;
        float opacity = 0.0;
        float len = distanceTo(vec2(0.5, 0.5), vec2(vUv.x, vUv.y)); 

        float size = 1.0 / uSge;
        vec2 range = vec2(0.65, 0.75);
        float index = mod(iTime + len, size); 
        // 中心圆 
        vec2 cRadius = vec2(0.06, 0.12); 
        
        if (index < size && len <= 0.5) {   
            float i = sin(index / size * PI); 

            // 处理边缘锯齿
            if (i >= range.x && i <= range.y){
                // 归一
                float t = (i - range.x) / (range.y - range.x);
                // 边缘锯齿范围
                float r = 0.3;
                opacity = drawCircle(t, r);
                
            }
            // 渐变
            opacity *=  1.0 - len / 0.5;
        }; 
        
        gl_FragColor = vec4(uColor, uOpacity * opacity);
    }`;
    const material = new THREE.ShaderMaterial({
        uniforms: {
            uColor: { value: new THREE.Color(color) },
            uOpacity: { value: 1 },
            uSpeed: { value: 0.05 },
            uSge: { value: 8 },
            uRadius: { value: width / 2 }, 
            time: time
        }, 
        transparent: true,
        vertexShader: vertexShader,
        fragmentShader: fragmentShader
    });
    const mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);
}

对可视化相关感兴趣的小伙伴可以加QQ群：1082834010