如何在片段着色器中实现圆角外部的Alpha混合（透明度效果）

你现在的问题核心是没有正确利用alpha通道控制圆角外部区域的透明度，反而把外部颜色混合成了黑色，导致下方的红色背景无法透出来。既然已经启用了GL_BLEND和正确的混合函数，只需要调整片段着色器里的gl_FragColor的alpha值即可，下面是具体的解决方案：

修改后的完整片段着色器代码 #

vec2 size = vec2(320.0, 240.0);
vec2 location = vec2(160.0, 720.0);
float edgeSoftness = 2.0;
float radius = 40.0;

// 获取圆角矩形的有符号距离：d < 0 表示在圆角内部，d > 0 表示在外部
float d = udRoundBox(gl_FragCoord.xy - location, size / 2.0, radius);

// 计算透明度：内部完全不透明(alpha=1)，外部完全透明(alpha=0)，边缘通过edgeSoftness实现平滑过渡
float alpha = 1.0 - smoothstep(0.0, edgeSoftness, d);

// 采样纹理并应用透明度，同时保留纹理自身的alpha通道
vec4 texColor = texture2D(tex, coords.xy);
gl_FragColor = vec4(texColor.rgb, texColor.a * alpha);

关键修改点解释 #

1. 修复smoothstep的参数
   你之前写的smoothstep(0.0, 0.0, d)是无效的（两个边界值相同，函数直接返回0），改为smoothstep(0.0, edgeSoftness, d)后：

   • 当d < 0（圆角内部）：smoothstep返回0，alpha = 1.0 - 0 = 1，片段完全不透明
   • 当0 ≤ d ≤ edgeSoftness（边缘过渡区）：smoothstep返回0到1之间的渐变值，alpha从1平滑降到0，实现柔化边缘
   • 当d > edgeSoftness（圆角外部）：smoothstep返回1，alpha = 0，片段完全透明

2. 直接控制alpha通道而非混合黑色
   不需要把外部颜色混合成黑色，而是通过将alpha设为0，让GPU的混合功能自动丢弃这部分片段的颜色，直接显示下方的红色背景。同时保留纹理自身的alpha（texColor.a * alpha），如果你的纹理本身有透明区域，也能正常叠加。

3. 保留原有混合设置
   你已经启用的混合代码是正确的，不需要修改：

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

额外补充 #

如果你的udRoundBox函数还没有正确实现，这里提供标准的圆角矩形有符号距离场函数：

float udRoundBox(vec2 p, vec2 b, float r) {
    vec2 q = abs(p) - b + r;
    return length(max(q, 0.0)) + min(max(q.x, q.y), 0.0) - r;
}

另外注意检查location的坐标是否合理（比如y=720可能超出屏幕范围），根据实际渲染区域调整即可。

内容的提问来源于stack exchange，提问作者user3144987