如何使用GLSL着色器实现无纹理输入的矩形模糊效果

不需要依赖提前准备的纹理资源，有两种常用实现路径，可根据你要的模糊效果选择：

方案1：纯片元着色器SDF实现边缘模糊（无离屏渲染开销） #

如果你的需求是仅做矩形边缘的柔化模糊，和示例图效果一致，完全不需要任何纹理输入，直接通过有向距离场实时计算透明度即可：

• 顶点着色器中新增一个vec2类型的varying/out变量，将矩形的局部归一化坐标（以矩形中心为原点，范围可映射到[-0.5, 0.5]区间）传递到片元着色器
• 片元着色器中实现矩形SDF计算函数，通过当前片元到矩形边界的距离计算模糊过渡的alpha值

代码示例：

// 顶点着色器
#version 330 core
layout (location = 0) in vec2 aPos;
out vec2 vLocalPos;
uniform mat4 projection;
uniform mat4 model;
void main() {
    vLocalPos = aPos; // 假设aPos是矩形的局部坐标，范围为[-0.5, -0.5]到[0.5, 0.5]
    gl_Position = projection * model * vec4(aPos, 0.0, 1.0);
}

// 片元着色器
#version 330 core
in vec2 vLocalPos;
out vec4 FragColor;
uniform vec3 rectColor = vec3(0.8, 0.2, 0.2); // 矩形填充色
uniform float blurRadius = 0.06; // 模糊半径，值越大模糊范围越宽

// 矩形SDF计算函数
float sdBox(vec2 p, vec2 halfSize) {
    vec2 d = abs(p) - halfSize;
    return length(max(d, 0.0)) + min(max(d.x, d.y), 0.0);
}

void main() {
    float dist = sdBox(vLocalPos, vec2(0.45, 0.45)); // 0.45是矩形半宽/半高，留空间做模糊
    float alpha = 1.0 - smoothstep(-blurRadius, blurRadius, dist);
    FragColor = vec4(rectColor, alpha);
}

方案2：离屏渲染转纹理后做高斯模糊（支持整体模糊效果） #

如果你需要对矩形做整体的高斯弥散模糊，不止是边缘柔化，可以自己生成纹理输入：

• 提前创建一个离屏帧缓冲（FBO），绑定一个和渲染区域尺寸匹配的空白纹理作为颜色附件
• 第一遍渲染：绑定FBO，正常绘制你的无纹理纯色矩形，此时矩形内容已经渲染到绑定的纹理中
• 第二遍渲染：解绑FBO，使用常规的高斯模糊着色器，传入第一步生成的纹理作为输入，绘制全屏quad输出最终模糊结果

调整高斯模糊的采样半径、sigma参数即可控制模糊强度，可实现任意程度的模糊效果。

最终实现效果参考：

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