小编blo*_*est的帖子

使用片段着色器在2d多边形上绘制边框

我有一些简单的多边形(少于20个顶点)在一个简单的xy平面上渲染平面,使用GL_TRIANGLES和一个平面颜色,一个2d模拟.

我想为这些多边形添加可变厚度和不同颜色的边框.我有一些使用相同顶点和glLineWidth/GL_LINE_LOOP实现的东西,它起作用,但是是另一个渲染过程并重复所有顶点变换.

我想我应该能够使用gl_FragCoord和顶点数据和/或纹理坐标在片段着色器中完成此操作,但我不确定,我的天真尝试显然是不正确的.

我想象下面的东西.

uniform vec2 scale;  // viewport h/w
uniform float line_width;
uniform vec4 fill_color;
uniform vec4 border_color;

varying vec4 vertex; // in world coords

void main()
{
    if (distance_from_edge(gl_FragCoord, vertex, scale) < line_width)
    {
        // we're close to the edge the polygon, so we're the border.
        gl_FragColor = border_color;
    }
    else
    {
        gl_FragColor = fill_color;
    }
}
Run Code Online (Sandbox Code Playgroud)

我想弄清楚的部分是distance_from_edge函数 - 如何计算?使用gl_FragCoord是错误的方法 - 我应该使用某种纹理映射吗?

作为一个实验,我尝试用缩放将顶点转换为像素空间,然后以像素为单位计算它与gl_FragCoord之间的距离,但这会产生我并不真正理解的奇怪结果.另外我需要到边缘的距离,而不是顶点,但我不知道如何得到它.

有任何想法吗?

编辑:根据尼科尔的回应,我的问题变成:

假设我有一个三角形,其中3个角顶点标记为边缘顶点,并且中间的一个顶点标记为非边缘(因此总共渲染了3个三角形),那么如何在片段着色器中插值以绘制给定边框厚度?我假设我将边缘标志传递给片段着色器,以及所需的线条粗细,并进行一些插值计算以计算边缘与非边缘顶点之间的距离,并将颜色阈值设置为适当的边界/填充?

opengl-es glsl vertex-shader fragment-shader opengl-es-2.0

21
推荐指数
1
解决办法
2万
查看次数