我如何规范化在 glsl 中绘制的圆，以便分辨率不会拉伸？

如何解决我如何规范化在 glsl 中绘制的圆，以便分辨率不会拉伸？

我正在尝试使用 glsl 在特定精灵周围创建一个圆圈。然而，分辨率是矩形 (800x600)，这会导致一个稍微拉伸的圆圈：

我已经尝试了答案 here，但我不知道如何将它们正确应用于我的特定着色器。我需要做什么

#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,1.0);
    }
    else {
        gl_FragColor = texture2D(uMainSampler,outTexCoord);
    }
}

解决方法

您必须考虑视口的纵横比。例如：

vec2 px = vec2(1.0/800.0,1.0/600.0);
float aspect = 800.0 / 600.0; 

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

或者，您可以以像素为单位计算距离：

vec2 resolution = vec2(800.0,600.0);
float radius = 100.0; // radius in pixel

float getDistance(vec2 pixelCoord,vec2 playerCoord) {
    return distance(pixelCoord*resolution,playerCoord);
}

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