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_ES
precision mediump float;
#endif

varying 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效果如下所示：