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

Question

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

我已经能够使用以下片段着色器创建 3 个 Blob /圆圈并对其进行动画处理:

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