Circle Blending Shader

This shader allows you to modify the color in 3 different cirlces, each with their setting for radius and desired color while also blending the three colors similar to a gradient effect. Fully commented so it might be easier to make changes of your own. Enjoy! 😉

Shader code

shader_type canvas_item;

uniform float inner_radius = 0.2; // Inner circle radius
uniform vec4 inner_color = vec4(1.0, 1.0, 0.0, 1.0); // Inner circle color (default red)

uniform float middle_radius = 0.4; // Middle circle radius
uniform vec4 middle_color = vec4(1.0, 0.5, 0.0, 1.0); // Middle circle color (default green)

uniform float outer_radius = 0.6; // Outer circle radius
uniform vec4 outer_color = vec4(1.0, 0.0, 0.0, 1.0); // Outer circle color (default blue)

void fragment() {
    // Get the original texture color at this pixel
    vec4 tex_color = texture(TEXTURE, UV);
    
    // Calculate the distance from the UV coordinate to the center (0.5, 0.5)
    float dist = distance(UV, vec2(0.5, 0.5));
    
    // Initialize the final color as the original texture color
    vec4 final_color = tex_color;

    // Apply blending based on distance
    if (dist <= inner_radius) {
        // Inside the inner circle, apply the inner color
        final_color = vec4(inner_color.rgb, tex_color.a); // Keep original alpha
    } else if (dist <= middle_radius) {
        // Blend between the inner and middle circles
        float blend_factor = (dist - inner_radius) / (middle_radius - inner_radius);
        final_color = mix(inner_color, middle_color, blend_factor);
        final_color.a = tex_color.a; // Preserve the original alpha
    } else if (dist <= outer_radius) {
        // Blend between the middle and outer circles
        float blend_factor = (dist - middle_radius) / (outer_radius - middle_radius);
        final_color = mix(middle_color, outer_color, blend_factor);
        final_color.a = tex_color.a; // Preserve the original alpha
    }

    // Outside the outer circle, preserve the original texture color
    COLOR = final_color;
}

Tags