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

Question

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

我已经能够使用以下片段着色器创建和动画 3 个斑点/圆圈：

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