Cocos Creator Shader Effect 系列 - 7 - 点光/扫光特效

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

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

下一篇:

上一篇:

推荐阅读更多精彩内容