How do i use a shader to draw a circle when the aspect ratio isn't 1:1?

Phaser 3
1

i’m attempting to use glsl to create a circle around a particular sprite. however, the resolution is rectangular (800x600) which leads to a slightly stretched circle:

image
image813×613 1.71 KB

i’ve seen people talk about normalizing vectors, but i can’t figure out how to apply them to my code. how to i get a proper circle regardless of aspect ratio

#define SHADER_NAME SPOTLIGHT_FS
precision highp float;

uniform sampler2D uMainSampler;
varying vec2 outTexCoord;
// coord is the non-normalized position if the sprite that the circle follows
uniform vec2 coord;
vec2 px = vec2(1.0/800.0, 1.0/600.0);

float getDistance(vec2 pixelCoord, vec2 playerCoord) {
    // pixelCoord is normalized, but playerCoord is passed in as-is
    return distance(pixelCoord, playerCoord*px);
}

void main( void )
{
    if (getDistance(outTexCoord, coord) > 0.125) {
        gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);
    }
    else {
        gl_FragColor = texture2D(uMainSampler, outTexCoord);
    }
}
2

What if you just set both to 1.0/600?

3

if i do that, it offsets the circle.

a friend ended up helping. you can normalize both vectors the same way with

vec2 px = vec2(1.0/600.0);
vec2 newCoord = outTexCoord * vec2(800.0/600.0, 1.0);

and then just passing newCoord to getDistance in place of outTexCoord