GLSL Fit Fragment Shader Mask Into Vertex Coordinates

Question

I have this smiley face mask in my fragment shader that takes up the entire window (1).

I passed in smaller coordinates to the vertex shader in an attempt to shrink the smiley face into a smaller box (2) (desired result).

However, the result is (3).

How can I make it so that the fragment shader fits into the coordinates I pass to the vertex shader so it looks like (2) and not (3)?

Below are the relevant pieces of code. Let me know if you require more code.

-- Vertex Shader --

#version 300 es
                           
layout(location=0) in vec3 vPosition;

void main() {
    gl_Position = vec4(vPosition, 1.0);
}

-- Fragment Shader --

#version 300 es
                               
precision mediump float;       

uniform float width;           
uniform float height;          

out vec4 fragColor;            

float Circle(vec2 uv, vec2 p, float r, float blur) {
    float d = length(uv - p);  
    return smoothstep(r, r-blur, d);
} 

void main() {                  
    vec2 uv = gl_FragCoord.xy / vec2(width, height);

    uv -= 0.5;                 
    uv.x *= width / height;
      
    float blur = 0.005;        
      
    float c = Circle(uv, vec2(0., 0.), 0.25, blur);
    c -= Circle(uv, vec2(-0.1, 0.1), 0.05, blur);
    c -= Circle(uv, vec2(0.1, 0.1), 0.05, blur);
    
    float mouth = Circle(uv, vec2(0., 0.), 0.15, blur);
    mouth -= Circle(uv, vec2(0., 0.05), 0.15, blur);
  
    c -= clamp(mouth, 0., 1.); 
  
    fragColor = vec4(vec3(1., 1., 0.) * c, 1.0);
}

Thanks!

edit 1:

Here are the two sets of coordinates being passed to the vertex shader before/after.

edit 2:

Thank you to Rabbid76 for the solution! Below shows the uv coordinates I ended up passing to the vertex shader.

    // location = 0
    GLfloat vertices[] = { 
        -0.8, -0.8, 0.0,
        -0.2, -0.8, 0.0,
        -0.2, -0.2, 0.0,
        -0.8, -0.2, 0.0
    };

    // location = 1
    GLfloat uv[] = { 
        0.0, 0.0,
        1.0, 0.0,
        1.0, 1.0,
        0.0, 1.0
    };

You must add a separate attribute for the uv coordinates. The uv coordinates are in range [0.0, 1.0] — Rabbid76

Rabbid76 Rabbid76 · Accepted Answer · 2020-12-28T17:45:00

Add an additional attribute for the uv coordinates. The attributes must be in the range [0.0, 1.0]. (0, 0 bottom left and (1, 1) top right. Pass the attribute form the vertex shader to the fragment shader:

#version 300 es
                           
layout(location=0) in vec3 vPosition;
layout(location=1) in vec2 vUV;

out vec2 uv;

void main() 
{
    uv = vUV;
    gl_Position = vec4(vPosition, 1.0);
}

Use the fragment shader input uv instead of vec2 uv = gl_FragCoord.xy / vec2(width, height);:

// [...]

in vec2 uv;

void main()
{
    // vec2 uv = gl_FragCoord.xy / vec2(width, height); DELETE

    // [...]
}

GLSL Fit Fragment Shader Mask Into Vertex Coordinates

1 Answers