Maintain square aspect for texture in shader?

Question

I am using this mask texture in a transition shader.
Very simple just a float scale uniform to adjust it.
I am drawing the shader on a full screen ColorRect.

shader_type canvas_item;

uniform vec4 color: hint_color;
uniform sampler2D mask: hint_albedo;
uniform float scale = 2.0;

void fragment() {
    COLOR.rgb = color.rgb;
    COLOR.a = 1.0 - texture(mask, UV * scale).a;
}

The first version just scaled it in the corner...

shader_type canvas_item;

uniform vec4 color: hint_color;
uniform sampler2D mask: hint_albedo;
uniform float scale = 2.0;
const float pivot = 0.5;

void fragment() {
    COLOR.rgb = color.rgb;
    COLOR.a = 1.0 - texture(mask, (UV - pivot) * scale + pivot).a;
}

So i made this version which centers it, but i wanna keep the square aspect of the mask so it does not distort...

shader_type canvas_item;

uniform vec4 color: hint_color;
uniform sampler2D mask: hint_albedo;
uniform float scale = 2.0;
const float pivot = 0.5;

vec2 ratio(vec2 ps) {
    float x = ps.x;
    float y = ps.y;
    vec2 ratio = vec2(1, 1);
    if (x > y)
        ratio = vec2(1, y / x);
    else if (y > x)
        ratio = vec2(y / x, 1);
    return ratio;
}

void fragment() {
    COLOR.rgb = color.rgb;
    COLOR.a = 1.0 - texture(mask, (UV - pivot) * scale * ratio(SCREEN_PIXEL_SIZE) + pivot).a;
}

So i made this version which adjusts the scale based on the screen size...

But it doesn't really work!?

If you know what i am talking about gimme a hand please and thanks!

github.com/rakkarage/GodotMaskShader

Comments

https://thebookofshaders.com/15/

Answer 1

shader_type canvas_item;

uniform vec4 color: hint_color;
uniform sampler2D mask: hint_albedo;
uniform float scale = 2.0;
const float pivot = 0.5;

void fragment() {
    vec2 ps = SCREEN_PIXEL_SIZE;
    vec2 ratio = (ps.x > ps.y) ? vec2(ps.y / ps.x, 1) : vec2(1, ps.x / ps.y);
    float a = 1.0 - texture(mask, (UV - pivot) * scale * ratio + pivot).a;
    COLOR.a = (a < 0.5) ? 0.0 : color.a;
    COLOR.rgb = color.rgb;
}