Cocos2d-x 3.x 图形学渲染系列二十四

笔者介绍：姜雪伟，IT公司技术合伙人，IT高级讲师，CSDN社区专家，特邀编辑，畅销书作者，国家专利发明人;已出版书籍：《手把手教你架构3D游戏引擎》电子工业出版社和《Unity3D实战核心技术详解》电子工业出版社等。

CSDN视频网址：http://edu.csdn.net/lecturer/144

在使用相机进行拍摄照片使，为了突出当前的角色,相机自动会将远处的物体进行模糊处理也就是所说的Blur效果处理。cocos2d-x引擎提供了自己的Demo，在这里我们就不介绍了，我们自己重新实现一个关于Blur渲染的实例，在这里先说一下编写思路：在片段着色器中可以得到当前像素点的颜色值，要想让这个颜色变得模糊，就要让它与它周围的像素点的颜色稍微接近一点，那么我们就需要拿到这个像素点周围的像素点的颜色值，把这些个像素点的值加起来取平均值，就得到了一个区域内的平均颜色。
   如果直接使用这个颜色，最终的效果会变得很模糊，如果只是稍微模糊一点，就要让这个平均值更接近于当前像素点原本的颜色，为此，取均值时对每个像素点增加了一个权重的定义，当前像素点的权重最高，依次向周围减弱，使得最后得到的均值颜色更接近于当前像素点原始的颜色。在Cocos2d-x引擎中的Shader脚本实现如下所示：

#ifdef GL_ESprecision mediump float;#endifvarying vec4 v_fragmentColor;varying vec2 v_texCoord;//模糊对象的实际分辨率uniform vec2 resolution;//半径uniform float blurRadius;// 间隔的段数uniform float sampleNum;vec4 blur(vec2);void main(void){    vec4 col = blur(v_texCoord); //* v_fragmentColor.rgb;    gl_FragColor = vec4(col) * v_fragmentColor;}vec4 blur(vec2 p){    if (blurRadius > 0.0 && sampleNum >1.0)    {        vec4 col = vec4(0);        vec2 unit = 1.0 / resolution.xy;        float r = blurRadius;        float sampleStep = r / sampleNum;        float count = 0.0;//遍历一个矩形，当前的坐标中心点，遍历矩形中的每个像素点的颜色        for(float x = -r; x < r; x += sampleStep)        {            for(float y = -r; y < r; y += sampleStep)            {//权重，p点的权重最高，向四周依次减少                float weight = (r - abs(x)) * (r - abs(y));                col += texture2D(CC_Texture0, p + vec2(x * unit.x, y * unit.y)) * weight;                count += weight;            }        }//得到实际的模糊颜色的值        return col / count;    }    return texture2D(CC_Texture0, p);}

下面用Blur的Shader实现把当前角色进行模糊处理，实现的效果如下：

通常情况下，Bloom和Blur这些效果一起在场景中使用会得到更好的效果。在游戏中实现的Bloom和Blur效果如下所示：