为绘制的元素和片段着色器的片段颜色添加模糊度

Question

我目前正在尝试通过将 3 个 blob 相互融合来实现一种动画渐变，其中每个 blob 都是单独设置动画的。您可以在最后找到所需结果的图像。

我已经能够使用以下片段着色器创建和动画 3 blobs/circles：

uniform vec2 resolution;
uniform vec3 blobs[3];
uniform vec3 colors[3];

vec3 draw_circle(vec2 position, vec3 color, float size) {
    float circle = sqrt(pow(position.x, 2.0) + pow(position.y, 2.0));
    circle = smoothstep(size, size + 0.003, 1.0 - circle);

    return color * circle;
}

void main() {
    vec2 coord = gl_FragCoord.xy / resolution;
    vec3 canvas = vec3(0);

    for (int i = 0; i < 3; i++) {
        vec3 circle = draw_circle(coord - blobs[i].xy / resolution, colors[i], blobs[i].z);
        canvas += circle;
    }

    gl_FragColor = vec4(canvas, 1.0);
}

我该如何调整我的着色器和相应的圆圈才能达到您在最后一张图片中看到的这种模糊效果？我需要不同的方法吗？

我有什么

我想要的

Answer 1

使用smoothstep从圆心向外模糊圆：

vec3 draw_circle(vec2 position, vec3 color, float size) {
    float circle = length(position.xy);
    
    //circle = smoothstep(size, size + 0.003, 1.0-circle);
    circle = 1.0-smoothstep(0.0, size, circle);

    return color * circle;
}

为绘制的元素和片段着色器的片段颜色添加模糊度

Add blurriness to drawn elements and frag color of fragment shader

javascript

three.js

glsl

webgl

fragment-shader