如何使用 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));

请注意，如果您有一个矩形视口，其中宽度大于高度，那么当从视图转换坐标时，一个完美的圆会在左右挤压成椭圆形 space标准化设备 space.
您必须通过放大距离向量的 x 轴来抵消这种挤压。

如何使用 GLSL 渲染圆形晕影

How to render a circular vignette with GLSL

glsl

fragment-shader