Cocos Creator Shader Effect 系列 -
本章为大家带来点光特效。
2d-sprite-point-light.gif
一、点光原理
点光的原理其实很简单：
- 画圆
- 圆心高亮（透明度=1.0），圆边缘不亮（透明度=0.0）
- 在原图像上方叠加圆
如果你已经有实现过本系列之前的几个效果：
- 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);
三、总结
实际上，现在我们裁剪的方式有两步：
- 只要点光（圆内）的部分
- 只要非透明区域的部分
为了让这些裁剪方式可以有不同组合，我在实际代码中通过 bool 变量去控制是否采用，完整代码在我的 Github 仓库 或 Gitee 仓库 中可以找到。
3.1 原理延伸
在上面的裁剪方式中，我们如果将
只要点光（圆内）的部分
这句话抽象成：
只要限定区域内的部分
那么我们其实可以实现很多同样原理的不同效果。
比如，假设我们的限定区域为一个平行四边形，那么我们就可以做出一个扫光效果了。原理大同小异！
2d-sprite-flash-light.gif
当然，如果我们更加宏观一点看，其实这些都是在 在原图案上方叠加新图案 的效果。希望能引发你对原理的思考~
3.2 补充
点光和扫光特效的完整代码都在我的 Github 仓库 或 Gitee 仓库 中了，由于原理过于相似，扫光我就不会再写文章去说明过程了，当然，在代码中我也补充了完整的注释，希望这些注释能帮助你对原理的理解。
OK，本章完，原创不易，如果我的文章对你起到帮助，不妨支持一下我吧
Pay
下一篇：
上一篇：
