Search code examples
javascriptthree.jsglslwebglfragment-shader

Add blurriness to drawn elements and frag color of fragment shader

I'm currently trying to achieve an animated kind of gradient by melting 3 blobs with each other where each blob is separately animated. You can find an image of the desired result in the end.

I have been able to create and animated 3 blobs/circles using the following fragment shader:

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

How do I have to adjust my shader and the respective circles to achieve this kind of blurriness you can see in the last image? Do I need a different approach?

What I Have
Result

What I Want
Goal

Solution

  • Use smoothstep to blur the circle from the center to the outside:

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