Cocos2d-x shader学习2：模糊(Blur)

最新推荐文章于 2019-11-04 17:02:42 发布

木子小新

最新推荐文章于 2019-11-04 17:02:42 发布

阅读量6.9k

点赞数

分类专栏： Cocos2d-x openGL 文章标签： cocos2d-x shader

本文链接：https://blog.youkuaiyun.com/liwenxin_at/article/details/50681325

版权

本文介绍了如何在Cocos2d-x 3.x中使用shader实现模糊效果，通过在片段着色器中获取像素点颜色并计算其周围像素的平均值，结合权重调整，达到轻微模糊的效果。代码示例展示了设置共享变量和计算过程，最后展示模糊前后对比。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

模糊效果在游戏中经常会用到，有的为了突出前景会把背景给模糊化，有的是因为一些技能需要模糊效果。模糊是shader中较为简单的一种应用。cocos2dx 3.x给的demo中，就有sprite的模糊的效果。

先说下这个模糊算法的大致思路，我们在片段着色器中可以得到当前像素点的颜色值，要想让这个颜色变得模糊，就要让它与它周围的像素点的颜色稍微接近一点，那么我们就需要拿到这个像素点周围的像素点的颜色值，我们把这些个像素点的值加起来取平均值，就得到了一个区域内的平均颜色。
如果直接使用这个颜色的话，最终的效果会变得很模糊，如果我们只是想稍微模糊一点的话，就要让这个平均值更接近于当前像素点原本的颜色，为此，我们取均值的时候对每个像素点增加了一个权重的定义，当前像素点的权重最高，依次向周围减弱，使得最后得到的均值的颜色更接近于当前像素点原始的颜色。

看代码：

#ifdef GL_ES
precision mediump float;
#endif

varying vec4 v_fragmentColor;
varying vec2 v_texCoord;

uniform vec2 resolution;//模糊对象的实际分辨率
uniform float blurRadius;//半径<