GLSL——绘制平面图形（二）

最新推荐文章于 2024-09-09 12:32:35 发布

@Yober

最新推荐文章于 2024-09-09 12:32:35 发布

阅读量726

点赞数 2

分类专栏： glsl shader c++ 文章标签：图形渲染 c++ 着色器

本文链接：https://blog.csdn.net/m0_67555362/article/details/124822184

版权

glsl 同时被 3 个专栏收录

6 篇文章 4 订阅

订阅专栏

shader

6 篇文章 2 订阅

订阅专栏

c++

5 篇文章 0 订阅

订阅专栏

画smoothstep的平滑曲线

在常用内建函数与应用中介绍了smoothstep函数，那么如何画这个函数的曲线呢？

方法1：利用smoothstep函数获取方程，然后点到方程上的距离划线

varying mediump vec2 texCoord0;

void main()
{
    precision mediump float;
    vec3 lineColor = vec3(0, 1., 0.);
    vec3 backColor  = vec3(0.);
    float lineWidth = 0.02;
    
    //获取smoothstep的方程
    float pct = smoothstep(0., 1., texCoord0.x);
    if (length(texCoord0.y - pct) < lineWidth)
    {
        gl_FragColor = vec4(lineColor, 1.);
    }
    else
    {
        gl_FragColor = vec4(backColor, 1.);
    }
}

效果图：

此方法缺点：有锯齿

方法2：利用smoothstep函数获取曲线方程，然后利用smoothstep函数对曲线进行平滑抗锯齿处理

varying mediump vec2 texCoord0;

void main()
{
    precision mediump float;
    vec3 lineColor = vec3(0, 1., 0.);
    vec3 backColor  = vec3(0.);
    float lineWidth = 0.02;
    float blur = 0.015;
    
    //获取smoothstep的方程
    float pct = smoothstep(0., 1., texCoord0.x);
    float pctL = smoothstep(lineWidth, lineWidth - blur, length(texCoord0.y - pct));
    gl_FragColor = vec4(lineColor, pctL);
}

效果图：

画三角形

在上一篇中，我们利用两点式画了一条直线，那么我们如何画一个三角形呢？

思路：

三角形是由三条直线组成，要想画一个三角形，首先需要确定三角形的三个顶点，然后对任意两点进行连线，最后对三角形内部着色

第一步，描画三个三角形的顶点：

varying mediump vec2 texCoord0;

void main()
{
    precision mediump float;
    //定义三角形背景/边线/内部和定点的颜色
    vec3 backColor = vec3(1.);
    vec3 lineColor = vec3(0., 1., 0.);
    vec3 TAreaColor = vec3(1., 0., 0.);
    vec3 pointColor = vec3(0., 0., 1.);
    
    //定义三个顶点
    vec2 pointA = vec2(0.5, 0.8);
    vec2 pointB = vec2(0.1, 0.2);
    vec2 pointC = vec2(0.9, 0.2);
    float radio = 0.02;
    float blur = 0.005;
    
    
    //画三个顶点
    float dA = length(texCoord0 - pointA);
    float pctA = smoothstep(radio, radio - blur, dA);
    
    float dB = length(texCoord0 - pointB);
    float pctB = smoothstep(radio, radio - blur, dB);
    
    float dC = length(texCoord0 - pointC);
    float pctC = smoothstep(radio, radio - blur, dC);
    
    float pctSum = pctA + pctB + pctC;
    gl_FragColor = vec4(pointColor, pctSum);
}

效果图：

第二步，描画三条直线：

//画直线AB
    float Kab = (pointB.y - pointA.y) / (pointB.x - pointA.x);
    float Bab = pointB.y - Kab * pointB.x;
    float Dab = abs(Kab * texCoord0.x - texCoord0.y + Bab) / sqrt(1. + Kab * Kab);
    float pctAB = smoothstep(lineWidth, lineWidth - blur, Dab);
    
    //画直线BC
    float Kbc = (pointB.y - pointC.y) / (pointB.x - pointC.x);
    float Bbc = pointC.y - Kbc * pointC.x;
    float Dbc = abs(Kbc * texCoord0.x - texCoord0.y + Bbc) / sqrt(1. + Kbc * Kbc);
    float pctBC = smoothstep(lineWidth, lineWidth - blur, Dbc);
    
    //画直线AC
    float Kac = (pointA.y - pointC.y) / (pointA.x - pointC.x);
    float Bac = pointA.y - Kac * pointA.x;
    float Dac = abs(Kac * texCoord0.x - texCoord0.y + Bac) / sqrt(1. + Kac * Kac);
    float pctAC = smoothstep(lineWidth, lineWidth - blur, Dac);
    
    float pctSumLine = pctAB + pctBC + pctAC;
     //截断超出三角形区域的直线
    if (texCoord0.y < pointA.y && 
        texCoord0.y > pointB.y && 
        texCoord0.x > pointB.x && 
        texCoord0.x < pointC.x)
    {
        gl_FragColor = vec4(lineColor, pctSumLine);
    }

效果图：

第三步，三角形区域着色

    //三角形内部着色
    float LineAB = Kab * texCoord0.x + Bab;
    float LineAC = Kac * texCoord0.x + Bac;
    float LineBC = Kbc * texCoord0.x + Bbc;
    
    if (texCoord0.y < LineAB && texCoord0.y > LineBC && texCoord0.y < LineAC)
    {
        gl_FragColor = vec4(TAreaColor, 1.);
    }
    else
    {
        gl_FragColor = vec4(backColor, 1.);
    }

效果图：

完整代码如下：

varying mediump vec2 texCoord0;

void main()
{
    precision mediump float;
    //定义三角形背景/边线/内部和定点的颜色
    vec3 backColor = vec3(0.);
    vec3 lineColor = vec3(0., 1., 0.);
    vec3 TAreaColor = vec3(1., 0., 0.);
    vec3 pointColor = vec3(0., 0., 1.);
    
    //定义三个顶点
    vec2 pointA = vec2(0.5, 0.8);
    vec2 pointB = vec2(0.1, 0.2);
    vec2 pointC = vec2(0.9, 0.2);
    float lineWidth = 0.01;
    float radio = 0.02;
    float blur = 0.005;
    
    
    //画三个顶点
    float dA = length(texCoord0 - pointA);
    float pctA = smoothstep(radio, radio - blur, dA);
    
    float dB = length(texCoord0 - pointB);
    float pctB = smoothstep(radio, radio - blur, dB);
    
    float dC = length(texCoord0 - pointC);
    float pctC = smoothstep(radio, radio - blur, dC);
    
    float pctSum = pctA + pctB + pctC;
    gl_FragColor = vec4(pointColor, pctSum);
    
    //画直线AB
    float Kab = (pointB.y - pointA.y) / (pointB.x - pointA.x);
    float Bab = pointB.y - Kab * pointB.x;
    float Dab = abs(Kab * texCoord0.x - texCoord0.y + Bab) / sqrt(1. + Kab * Kab);
    float pctAB = smoothstep(lineWidth, lineWidth - blur, Dab);
    
    //画直线BC
    float Kbc = (pointB.y - pointC.y) / (pointB.x - pointC.x);
    float Bbc = pointC.y - Kbc * pointC.x;
    float Dbc = abs(Kbc * texCoord0.x - texCoord0.y + Bbc) / sqrt(1. + Kbc * Kbc);
    float pctBC = smoothstep(lineWidth, lineWidth - blur, Dbc);
    
    //画直线AC
    float Kac = (pointA.y - pointC.y) / (pointA.x - pointC.x);
    float Bac = pointA.y - Kac * pointA.x;
    float Dac = abs(Kac * texCoord0.x - texCoord0.y + Bac) / sqrt(1. + Kac * Kac);
    float pctAC = smoothstep(lineWidth, lineWidth - blur, Dac);
    
    float pctSumLine = pctAB + pctBC + pctAC;
     //截断超出三角形区域的直线
    if (texCoord0.y < pointA.y && 
        texCoord0.y > pointB.y && 
        texCoord0.x > pointB.x && 
        texCoord0.x < pointC.x)
    {
        gl_FragColor = vec4(lineColor, pctSumLine);
    }
    
    //三角形内部着色
    float LineAB = Kab * texCoord0.x + Bab;
    float LineAC = Kac * texCoord0.x + Bac;
    float LineBC = Kbc * texCoord0.x + Bbc;
    
    if (texCoord0.y < LineAB && texCoord0.y > LineBC && texCoord0.y < LineAC)
    {
        gl_FragColor = vec4(TAreaColor, 1.);
    }
    else
    {
        gl_FragColor = vec4(backColor, 1.);
    }
}

写这玩楞累到吐！