Maintain square aspect for texture in shader?

:information_source: Attention Topic was automatically imported from the old Question2Answer platform.
:bust_in_silhouette: Asked By rakkarage

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

enter image description here

The Book of Shaders

rakkarage | 2020-05-24 23:59

:bust_in_silhouette: Reply From: rakkarage
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;
}