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);
}
  • Tomcat and Megalomaniak replied to this.

  • Tomcat To place the code, you need ```.

    I've fixed the code formatting in OP.

    Goatfacekilla 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.

    Goatfacekilla 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.

          Goatfacekilla 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 ```.

              Tomcat To place the code, you need ```.

              I've fixed the code formatting in OP.

              Goatfacekilla 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.

              Goatfacekilla 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.

                    Thanks for your help, @Megalomaniak and Tomcat . 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);
}