本章为大家带来点光特效。
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下一篇:
上一篇:
网友评论