OpenGL技术问题:如何渲染纹理区域外的内容
问题:圆角边框片段着色器无法渲染纹理边界外区域
我正在实现一款可为纹理添加圆角与边框的片段着色器,用于窗口管理器实现带边框的圆角窗口。当前片段着色器代码如下:
const GLchar surface_fragment_src_rgba[] = "precision mediump float;\n" "varying vec2 v_texcoord;\n" "uniform sampler2D tex;\n" "\n" "uniform vec2 half_size;\n" "uniform vec2 position;\n" "uniform float alpha;\n" "uniform float radius;\n" "uniform float half_border_thickness;\n" "uniform vec4 border_color;\n" "\n" "float RectSDF(vec2 p, vec2 b, float r) {\n" " vec2 d = abs(p) - b + vec2(r);\n" " return min(max(d.x, d.y), 0.0) + length(max(d, 0.0)) - r;\n" "}\n" "\n" "void main() {\n" " vec2 center = gl_FragCoord.xy - position - half_size;\n" " float dist = RectSDF(center, half_size + half_border_thickness, radius - half_border_thickness);\n" "\n" " vec4 tex_color = texture2D(tex, v_texcoord) * alpha;\n" " vec4 from_color = border_color;\n" " vec4 to_color = vec4(0.0);\n" " if (half_border_thickness > 0.0) {\n" " if (dist < 0.0) {\n" " to_color = tex_color;\n" " }\n" " dist = abs(dist) - half_border_thickness;\n" " } else {\n" " from_color = tex_color;\n" " }\n" "\n" " float blend_amount = smoothstep(-1.0, 1.0, dist);\n" " gl_FragColor = mix(from_color, to_color, blend_amount);\n" "}\n";;
我在Shadertoy上制作了验证原型,确认着色器逻辑本身符合预期,但实际渲染窗口时,纹理原始边界外的区域无法被正确渲染(表现为边框在纹理边缘处断裂)。求问如何实现完整的窗口区域加边框渲染?
另外,如果当前的实现方式存在优化空间,也欢迎指出。最初我用单独的着色器渲染边框,但为了实现抗锯齿圆角的边框混合效果,我认为必须获取纹理颜色信息,所以改成了当前的实现方式。
内容的提问来源于stack exchange,提问作者willmckinnon
相关产品推荐
相关产品推荐

