2D border using shader

jangjang Posts: 2Member

I am working on a shader that creates a white border around red objects. I am checking every diagonal pixel. If a current pixel is not red and one of diagonal pixels is red then making it white. To increase the size of the border I am checking further distanced diagonal pixles.
here is the shader code

shader_type canvas_item;

void fragment(){
    vec4 col = texture(SCREEN_TEXTURE, SCREEN_UV);
    COLOR = col;

    int size = 4;
    bool is_found = false;

    vec2 points[4] = {vec2(1.0, 1.0), vec2(-1.0, 1.0), vec2(-1.0, -1.0), vec2(1.0, -1.0)};
    for(int i = 1; i < size && !is_found; i++){
        for(int j = 0; j < 4; j++){
            vec2 pixel_off = float(i) * points[j];
            vec4 tex = texture(SCREEN_TEXTURE, SCREEN_UV + pixel_off * SCREEN_PIXEL_SIZE);

            if(tex.rgb == vec3(1.0, 0.0, 0.0) && col.rgb != vec3(1.0, 0.0, 0.0)){
                is_found = true;
                COLOR.rgb = vec3(1.0);

But I get some pixels off in border.

Check attachment for a project.


  • jangjang Posts: 2Member

    So, I am answering my own question. A thought just popped out and I reversed the loop. i.e. for(int i = size; i > 0 && !is_found; i--) and now it's working like a charm.

Leave a Comment

BoldItalicStrikethroughOrdered listUnordered list
Align leftAlign centerAlign rightToggle HTML viewToggle full pageToggle lights
Drop image/file