如何使用GLSL渲染圆形小插图

Question

我正在尝试使用GLSL实现圆形装饰图案，但是当纹理为矩形时，结果为椭圆形。不管纹理大小如何，使它成为正方形的正确方法是什么？输入的纹理大小（分辨率）可以是矩形或正方形。 我使用 discard 方法尝试了一种解决方案，但这不符合我的要求，因为我需要使用 smoothstep 来获得渐变边缘。

当前结果：

GLSL着色器：

varying vec2 v_texcoord;
uniform sampler2D u_texture;
uniform vec2 u_resolution;

vec4 applyVignette(vec4 color)
{
    vec2 position = (gl_FragCoord.xy / u_resolution) - vec2(0.5);           
    float dist = length(position);

    float radius = 0.5;
    float softness = 0.02;
    float vignette = smoothstep(radius, radius - softness, dist);

    color.rgb = color.rgb - (1.0 - vignette);

    return color;
}

void main()
{
    vec4 color = texture2D(u_texture, v_texcoord);
    color = applyVignette(color);
    gl_FragColor = color;
}

Answer 1

在计算到圆形视图中心点的距离时，必须尊重纵横比：

float dist = length(position * vec2(u_resolution.x/u_resolution.y, 1.0));

请注意，如果您有一个矩形视口，其宽度大于高度，那么当将坐标从视图空间转换为归一化设备空间时，在其左右两侧将一个完美的圆挤压成一个椭圆。 br /> 您必须通过按比例缩放距离向量的x轴来抵消这种挤压。