Convert gl_FragCoord range to fragment range

Question

I'm working with shaders so far, but I'm not sure how I can make my shader gl_FragCoord relative to the window. To be more clear, this is what I have:

and this is what I'm looking to achieve no matter where I place the fragment on the screen:

As you can see, the shader take the whole window as the refference canvas insted of the fragment. I'm playing with ranges and division based on resolution and fragment size/position, but couldn't figure it out.

The second image was compiled based on hardcoded data, need to find a general solution..

EDIT: This is my vert & frag glsl code:

#version 330 core
layout(location = 0) in vec2 position;

void main() {
    vec2 fp = vec2(position.x, position.y);
    gl_Position = vec4(position.x, position.y, 0.0, 1.0 );
};

$

#version 330 core
layout(location = 0) out vec4 color;

void main() {
    vec2 pos = gl_FragCoord.xy/vec2(800., 600.);

    float r = 0.4 / 2.0;
    float c = smoothstep(r, r - 0.01, distance(pos, vec2(0.5)));

    color = vec4(vec3(c) * vec3(0.0, 0.5,1.0), 1.0);

};

Answer 1

Your resolution is undoubtedly not actually 800 by 600, as the following shadertoy program gives the output you desire, with the only change being the proper resolution is used to divide. You also don't need to pass in coordinates at all, look at this explanation of gl_FragCoord

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    vec2 pos = gl_FragCoord.xy/ iResolution.xy;

    float r = 0.4 / 2.0;
    float c = smoothstep(r, r - 0.01, distance(pos, vec2(0.5)));

    fragColor = vec4(vec3(c) * vec3(0.0, 0.5,1.0), 1.0);
}

Test it out here

EDIT:

You appear to be hinting that you are actually using 400 x 300 resolution, if that is the case, my answer is 100% correct, to fix your problem divide by 400 and 300 instead of 800 and 600!

so instead of

vec2 pos = gl_FragCoord.xy/vec2(800., 600.);

do this

vec2 pos = gl_FragCoord.xy/vec2(400., 300.);

Or if your resolution is different do this where resolution_x and resolution_y are the values for your actual resolution...

vec2 pos = gl_FragCoord.xy/vec2([resolution_x]., [resolution_y].);

If you want this to work with all resolutions you will still need to pass the resolution to the shader.

I recommend changing your shader to this and passing a resolution uniform in.

#version 330 core
layout(location = 0) out vec4 color;
uniform vec2 screenResolution

void main() {
    vec2 pos = gl_FragCoord.xy/screenResolution.xy;

    float r = 0.4 / 2.0;
    float c = smoothstep(r, r - 0.01, distance(pos, vec2(0.5)));

    color = vec4(vec3(c) * vec3(0.0, 0.5,1.0), 1.0);

};

Answer 2

We use the built-in gl_FragCoord value, which gives us the (x, y) coordinates (in pixels) of the current fragment in the frame buffer. We divide this by the resolution width and height (e.g. 800, 600) to get values between 0.0 and 1.0.

gl_FragCoord.xy / resolution.xy

Note that gl_FragCoord value uses a lower left origin, so (32, 10) would mean 32 pixels to the right, 10 pixels up from the bottom. However, since our circle is symmetrical and located at center, we do not need to worry about this difference in our specific demo.

We subtract (0.5, 0.5) so that we can determine the length from center, rather than lower-left (the origin).

//determine center
vec2 position = (gl_FragCoord.xy / resolution.xy) - vec2(0.5);  

We will use GLSL's built-in length() method to determine the length from the center point. Fragments at the center will have a length of zero (i.e. black), and it will increase as we move outward (i.e. into white/gray). We can test the shader so far:

//our screen resolution, set from Java whenever the display is resized
uniform vec2 resolution;

//"in" attributes from our vertex shader
varying vec4 vColor;

    void main() {

        //determine origin
        vec2 position = (gl_FragCoord.xy / resolution.xy) - vec2(0.5);

        //determine the vector length of the center position and using step function for drawing circle
        float circle = step(length(position),0.5);

        //show our length for debugging
        gl_FragColor = vec4( vec3(length), 1.0 );
    }

https://github.com/mattdesl/lwjgl-basics/wiki/ShaderLesson3

https://thebookofshaders.com/07/