shader画圆利用smoothstep函数抗锯齿

当前环境opengl es 2.0,  不用ebo情况下， 直接6个顶点组成两个三角形，拼接成一个正方形，

fragment shader代码里判断所有片元距离中心点之间的距离，大于半径的片元输出透明度为0，gl_FragColor = vec4(0,0,0,0.0)，

小于等于半径内的颜色为白色，gl_FragColor = vec4(1.0,1.0,1.0,0.0)，到此为止绘制出的白色圆圈锯齿非常明显

 

 图中叠了3层圆圈。

 

如果给圆圈的边界外扩比如5个像素，在这5个像素内，白色透明度从0% 到 100%，这是在运行会发现边界锯齿感好了很多，几乎没有的感觉

 

 ，核心思想就是给圆圈的边缘预留一段区间，在此区间进行边缘和边缘外界颜色、透明度的渐变，可以自己写自己写划算公式，但更方便是使用smoothstep方法进行区间比列换算，

    smoothstep(x,y,a) = [0, 1] ，总是返回[0, 1]区间之类的数, 纯数学领域范围的应用，其实就是初中数学区间比例换算么 区间[a, b] 与区间[m, n]之间的换算方法。

 

附上最近写的 动态水波纹fragment shader代码：

所谓的动态就是 cpu 里好比起了一个定时器，实时的计算当前正在扩大的圆的半径，把这个半径值传递给gpu ，gpu实时去给每个片元计算当前是在圈内还是圈外

//
//  
//  Created by JD on 2020/6/12
//
//

#ifdef GL_ES
precision highp float;
#endif

uniform vec2 center;

uniform float currentRadius;  //当前逐渐扩大的半径
uniform float alphaChangeVal; //c++端是让其随时间递增，此处时被当作被减去的值而得到最终的透明度
uniform float solidRadius;    //中间的不变实心半径




/*
    表现需求：
    
    1，圆圈越变越大  ok
    2，圆圈默认从中心点往外透明度渐变    ok
    3，随时间的推移，圆圈变大的同时整体越变越透明 alphaChangeVal    ok

*/
void main(void)
{


    vec2 distanceVec = gl_FragCoord.xy - center.xy;
    float fragToCenterLength = sqrt(pow(distanceVec.x, 2) + pow(distanceVec.y, 2));

    // float min = 0;
    // float max = currentRadius;
    
    //110 255 170
    float redColor = 0.43;
    float greenColor = 1.0;
    float blueColor = 0.67;

    
    //平滑过度距离插值区间
    float smoothStepLength = 1.5;



    /* 
    期望的边界是理论最远边界currentRadius，但圆圈的边缘部分为了抗锯齿，需要平滑过度透明度，所以额外加上被用来做为平滑过度的一个距离区间1.5
    由此联想到当圆形扩散到最大半径值时，为了保证外边缘抗锯齿,
    那么圆形最大半径就要比外界设置的理论值再增长1.5，所以需要给外界的矩形大小增加1.5，
    或者不改变外界矩形，而是改变圆圈的最大理论值，让其减去1.5

    为方便处理我采用了后者，不麻烦外界参与这种平滑过度计算范围加减，直接在当前shader内处理；
    采用后者的话，最终采用了平滑过渡的圆圈会比采用前者的半径小1.5，不过这种视觉上的差异可以在此项目中忽略。



    */
    


        if(solidRadius > 0 && fragToCenterLength <= solidRadius - smoothStepLength)
        { //内圈
            gl_FragColor= vec4(redColor,greenColor,blueColor,1);
        }
        else if(solidRadius > 0 && fragToCenterLength <= solidRadius)
        {  //内圈边缘过度区间  [alpha=1 , 中间圆环当前统一动态alpha值:alphaChangeVal]
            float ratio = smoothstep(solidRadius - smoothStepLength, solidRadius, fragToCenterLength);

            float alpha = 1 - alphaChangeVal;
            gl_FragColor= vec4(redColor,greenColor,blueColor, ratio * (alpha - 1) +  1);
            
        }else if(fragToCenterLength <= currentRadius - smoothStepLength)
        { 
            //外环
            float alpha = 1 - alphaChangeVal;
            //外环中心点往外透明度 不使用渐变
            gl_FragColor = vec4(redColor,greenColor,blueColor,alpha);

        }
        else if(fragToCenterLength <= currentRadius)
        { //外圈过度区间 [alphaChangeVal, 0]
            float ratio = smoothstep(currentRadius - smoothStepLength, currentRadius, fragToCenterLength);
            float alpha = 1 - alphaChangeVal;
            gl_FragColor = vec4(redColor,greenColor,blueColor,(ratio - 1) * ( 0 - alpha));
        }
        else
        {//外圈以外
            gl_FragColor = vec4(0,0,0,0.0);
        }




}

 

标签：1.5,抗锯齿,透明度,float,区间,shader,半径,画圆,圆圈
来源： https://www.cnblogs.com/JD85/p/13491571.html