如何在片段着色器的圆角外部进行 Alpha 混合（透明度）？答案

【问题标题】：How to make alpha blending (transparency) at outside of rounded corner on fragment shader?如何在片段着色器的圆角外部进行 Alpha 混合（透明度）？
【发布时间】：2021-08-10 11:56:50
【问题描述】：

我想通过使用片段着色器来圆角并制作一些如下所示的代码。

vec2 size = vec2(320.0, 240.0);
vec2 location = vec2(160.0, 720.0);
float edgeSoftness  = 2.0;
float radius = 40.0;
float d = udRoundBox(gl_FragCoord.xy - location, size / 2.0, radius);
gl_FragColor = vec4(mix(texture2D(tex, coords.xy).rgb, vec3(0.0), smoothstep(0.0, 0.0,d)), 1.0);

结果是

圆角是我想要的，但背景颜色只是黑色。红色背景上有其他纹理，所以我希望黑色背景变成 alpha 混合，但我不知道如何制作。我知道我可以通过下面的代码摆脱圆角，但我不知道下一步该做什么。

vec4 outside = vec4(mix(texture2D(tex, coords.xy).rgb, vec3(0.0), 1.0 - smoothstep(0.0, 0.0,d)), 1.0)

你能帮忙吗？仅供参考，我已经添加了以下代码。

glEnable( GL_BLEND );
glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);

【问题讨论】：

标签： glsl shader rounded-corners

【解决方案1】：

我已经简单地解决了这个问题。只需在 alpha 值上添加 '1.0 - smoothstep-result'。

vec2 size = vec2(320.0, 240.0);
vec2 location = vec2(160.0, 720.0);
float edgeSoftness  = 2.0;
float radius = 40.0;
float d = udRoundBox(gl_FragCoord.xy - location, size / 2.0, radius);
float s = smoothstep(0.0, 0.0,d);
vec4 c = vec4(mix(texture2D(tex, coords.xy).rgb, vec3(0.0), s), 1.0 - s);
gl_FragColor = c;

【讨论】：