如何使用 GLSL 渲染圆形晕影答案

【问题标题】：How to render a circular vignette with GLSL如何使用 GLSL 渲染圆形晕影
【发布时间】：2018-10-11 23:22:33
【问题描述】：

我正在尝试使用 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;
}

【问题讨论】：

标签： glsl fragment-shader

【解决方案1】：

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

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

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

【讨论】：