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);
        }




}

 

posted @ 2020-08-12 16:55  居家懒人  阅读(3235)  评论(0编辑  收藏  举报