美文网首页
Cocos Creator Shader Effect 系列 -

Cocos Creator Shader Effect 系列 -

作者: 天煞魔猎手 | 来源:发表于2020-01-13 23:38 被阅读0次

    本章为大家带来点光特效。

    2d-sprite-point-light.gif

    一、点光原理

    点光的原理其实很简单:

    1. 画圆
    2. 圆心高亮(透明度=1.0),圆边缘不亮(透明度=0.0)
    3. 在原图像上方叠加圆

    如果你已经有实现过本系列之前的几个效果:

    那么,相信你现在已经可以针对这个原理自行实现了,先不看文章试试吧~

    二、实现步骤

    首先,我们抽象一下点光的一些基础属性:

    uniform PointLight {
        // 点光颜色
        vec4 centerColor;
    
        // 点光起点坐标
        vec2 centerPoint;
    
        // 点光半径
        float radius;
      }
    

    以上,这几个属性应该很好理解。现在我们可以来按照原理步骤去实现了

    第一步:画圆,其实在我们定好这个UBO之后,相当于已经完成了,因为已经有圆心坐标和半径了。

    2.1 圆心高亮,圆边缘不亮

    主要是判断点(uv_0)距离圆心多远,是否在圆内

    2.1.1 计算当前 uv 到扩散起点的距离:

    float dis = distance(v_uv0, centerPoint);
    

    ps: distance(vec2, vec2) 函数是OpenGL内置函数,用于计算两点间距离

    2.1.2 判断是否在圆内可以这样子来(不用if

    float alpha = step(dis, radius);
    
    • 当点在圆外的时候,意味着,radius < dis,即 alpha = 0.0,即圆外透明度为0.0
    • 当点在圆内的时候,意味着,radius > dis,即 alpha = 1.0,即圆内透明度为1.0

    现在我们已经可以得出圆内透明度是1.0 ,圆边缘、圆外透明度是0.0的结果了。

    2.1.3 圆心高亮

    其实就是一个透明度从中心点1.0 到圆边缘 0.0 的渐变过程

    // 加入从中心往外渐变的效果
    alpha = 1.0 - (dis / radius);
    

    2.1.4 圆内点光颜色

    vec4 lightColor = centerColor * alpha;
    

    2.2 混合原图像和点光颜色

    Cocos Creator Shader Effect 系列 - 6 - 内发光特效 文中,我们有提及过颜色混合的规则,本次我们依旧采用相同的混合模式

    // 要在图案上方,叠加一个点光,将两者颜色混合起来,那么最终选择的混合模式如下:
    //
    // (点光)color_src: GL_SRC_ALPHA
    // (原图像)color_dest: GL_ONE
    // 
    // 即最终颜色如下:
    // color_src * GL_SRC_ALPHA + color_dest * GL_ONE
    gl_FragColor = gl_FragColor * gl_FragColor.a + lightColor;
    

    2.3 裁剪透明区域上的点光

    在 2.1.2 步骤之前或者之后,我们只需要在判断一下原uv的透明度是否为几乎透明,如果为透明,那么我们就可以实现裁减掉透明区域上的点光了

    alpha *= step(0.01, gl_FragColor.a);
    

    三、总结

    实际上,现在我们裁剪的方式有两步:

    1. 只要点光(圆内)的部分
    2. 只要非透明区域的部分

    为了让这些裁剪方式可以有不同组合,我在实际代码中通过 bool 变量去控制是否采用,完整代码在我的 Github 仓库Gitee 仓库 中可以找到。

    3.1 原理延伸

    在上面的裁剪方式中,我们如果将

    只要点光(圆内)的部分

    这句话抽象成:

    只要限定区域内的部分

    那么我们其实可以实现很多同样原理的不同效果。

    比如,假设我们的限定区域为一个平行四边形,那么我们就可以做出一个扫光效果了。原理大同小异!

    2d-sprite-flash-light.gif

    当然,如果我们更加宏观一点看,其实这些都是在 在原图案上方叠加新图案 的效果。希望能引发你对原理的思考~

    3.2 补充

    点光和扫光特效的完整代码都在我的 Github 仓库Gitee 仓库 中了,由于原理过于相似,扫光我就不会再写文章去说明过程了,当然,在代码中我也补充了完整的注释,希望这些注释能帮助你对原理的理解。

    OK,本章完,原创不易,如果我的文章对你起到帮助,不妨支持一下我吧

    Pay

    下一篇:

    上一篇:

    相关文章

      网友评论

          本文标题:Cocos Creator Shader Effect 系列 -

          本文链接:https://www.haomeiwen.com/subject/vtqgoctx.html