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




已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页