我如何标准化在 glsl 中绘制的圆圈，以使分辨率不会拉伸？

Question

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

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

#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);
    }
}

Answer 1

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

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