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

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

2d-sprite-point-light.gif

一、点光原理

点光的原理其实很简单：

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

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

• Cocos Creator Shader Effect 系列 - 4 - 老照片特效
• Cocos Creator Shader Effect 系列 - 5 - 马赛克/像素化特效
• Cocos Creator Shader Effect 系列 - 6 - 内发光特效

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

二、实现步骤

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

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 系列 - 8 - 高斯模糊

上一篇：

• Cocos Creator Shader Effect 系列 - 6 - 内发光特效