Texture upside down and mirrored

Question

Forgive me, I'm new to shaders. I copied a shader from Shadertoy and used the guide: https://docs.godotengine.org/en/stable/tutorials/shaders/converting_glsl_to_godot_shaders.html

to convert it for Godot. It achieves the pixel blur effect I wanted, but the image is upside down and mirrored. It also moves the image down and to the left over time and it's zoomed in. I would like to learn more about GLSL and shader language in general, so the more help and explanation you can give the better. Pretend I'm a 5-year-old. Thanks very much in advance!
Here's the original code:

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    float t = mod(iTime, 3.0);
    
	vec2 uv = fragCoord.xy / iResolution.xy;
    
    float _Speed = 15.0;
    
    float res = floor((pow(t,1.4)) * _Speed) * 2.0 + 0.01;
    
    uv *= iResolution.xy / res;
    uv = floor(uv);
    uv /= iResolution.xy / res;
    
    uv += res * 0.002;
    vec4 texture = texture(iChannel0, uv);
	fragColor = texture * clamp(1.4 - t, 0.0, 1.0);
}

and here's my conversion:

shader_type canvas_item;


void fragment()
{
    float t = mod(TIME, 3.0);
    
	vec2 uv = FRAGCOORD.xy / (1.0 / SCREEN_PIXEL_SIZE).xy;
    
    float _Speed = 15.0;
    
    float res = floor((pow(t,1.4)) * _Speed) * 2.0 + 0.01;
    
    uv *= (1.0 / SCREEN_PIXEL_SIZE).xy / res;
    uv = floor(uv);
    uv /= (1.0 / SCREEN_PIXEL_SIZE).xy / res;
    
    uv += res * 0.002;
    vec4 texture = texture(TEXTURE, uv);
	COLOR = texture * clamp(1.4 - t, 0.0, 1.0);
}

Ryurik

Answer 1

To place the code, you need ```.

I've fixed the code formatting in OP.

It also moves the image down and to the left over time

That likely has something to do with the time and speed uniforms/variables in the shader.

and it's zoomed in.

Scaling/zooming you would achieve by multiplying or dividing your coordinate values(resolution, uv etc.). Moving/translating would be via addition/subtraction.

Familial

Answer 2

It achieves the pixel blur effect I wanted, but the image is upside down and mirrored.

They are supposed to be mirrored according to the documentation.

Coordinates¶

fragCoord behaves the same as gl_FragCoord in GLSL and FRAGCOORD in Godot.

Coordinates¶

gl_FragCoord in GLSL and FRAGCOORD in the Godot shading language use the same coordinate system. If using UV in Godot, the y-coordinate will be flipped upside down.

To place the code, you need ```.

Harhay

Answer 3

Thanks for your help, Priscian and . I fixed the code. Removing the uv += res * 0.0002 line stopped the movement, and adding the line uv.y = 1.0 - uv.y fixed the y-mirroring. Looks just like the Mario World transition blur.

shader_type canvas_item;

uniform float time_to_reset = 3.0;

void fragment()
{
    float t = mod(TIME, time_to_reset);
    

	vec2 uv = FRAGCOORD.xy / (1.0 / SCREEN_PIXEL_SIZE).xy;
    uv = uv;
    float _Speed = 15.0;
    

    float res = floor((pow(t,1.4)) * _Speed) * 2.0 + 0.01;

    uv *= (1.0 / SCREEN_PIXEL_SIZE).xy / res;
    uv = floor(uv);
    uv /= (1.0 / SCREEN_PIXEL_SIZE).xy / res;
	uv.y = 1.0 - uv.y;

    

//    uv += res * 0.000;
    vec4 tex = texture(TEXTURE, uv);
	COLOR = tex * clamp(1.4 - t, 0.0, 1.0);
}

Ryurik