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

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

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

游戏品质的提升不仅仅只限于模型的材质和特效渲染，游戏场景的渲染也是非常重要的，针对游戏场景的渲染，通常称为后处理渲染，也称为滤镜效果。后处理渲染用通俗的语言讲就是程序运行针对的是整个游戏场景每帧的渲染，并不急于将渲染的场景立刻显示出来，而是再用后处理Shader对渲染的场景图片做最后一次渲染处理，最终将其显示出来。这个生活中装修房子类似，先把整个房间刷成白色，这个时候还不能交付给户主，在此基础上再粉刷一遍涂料。笔者本人也独立开发过大型3D游戏引擎，针对场景的渲染做过一些后处理效果，比如Bloom，Blur，SSAO，PSSM等，场景经过滤镜渲染效果的场景截图如下：

在游戏产品中展示的滤镜效果如下:

经过后处理Shader渲染后的场景如梦如幻，效果非常好。下面把引擎中使用的滤镜Shader渲染介绍给读者。

全屏 Bloom 效果，有时候也叫 Glow 效果，中文一般叫做 “ 全屏泛光 ” 。首先介绍 Bloom 的实现原理，其实比较简单，首先我们需要设置一个我们要泛光的亮度阈值，第一遍处理时，我们需要对原场景图进行筛选，所有小于这个阈值的像素都被筛掉，所有大于该值的像素留下来，这样，我们就得到了一张只包含需要泛光部分的贴图，其余部分是黑色的；泛光效果是由衍射效果产生的，我们现实世界中看到的泛光效果，最亮的地方实际上是会向暗的地方扩散的，也就是说在亮的地方，边界是不明显的，所以我们就需要对泛光是部分，也就是我们上一步操作的结果图片进行模糊操作，达到光溢出的效果，最后，我们将处理过的图像和原图像进行叠加，就得到了最终的效果。其原理效果图如下:

创建“全屏泛光”渲染的步骤，(a)场景正常渲染(b)泛光光源的渲染是使用Blur创建的 (c) 把泛光纹理加入到正常渲染的场景图中 (d) 最后产生泛光效果。Bloom效果是针对场景渲染的，实现方式很多种，在Cocos2d-x引擎中Blur的模糊处理只做了垂直处理，按照这个思路实现的Bloom渲染代码如下所示：

#ifdef GL_ES
precision mediump float;
#endifvarying vec4 v_fragmentColor;
varying vec2 v_texCoord;uniform vec2 resolution;const float blurSize = 1.0/512.0;
const float intensity = 0.35;
void main()
{vec4 sum = vec4(0);vec2 texcoord = v_texCoord.xy;int j;int i;sum += texture2D(CC_Texture0, vec2(texcoord.x - 4.0*blurSize, texcoord.y)) * 0.05;sum += texture2D(CC_Texture0, vec2(texcoord.x - 3.0*blurSize, texcoord.y)) * 0.09;sum += texture2D(CC_Texture0, vec2(texcoord.x - 2.0*blurSize, texcoord.y)) * 0.12;sum += texture2D(CC_Texture0, vec2(texcoord.x - blurSize, texcoord.y)) * 0.15;sum += texture2D(CC_Texture0, vec2(texcoord.x, texcoord.y)) * 0.16;sum += texture2D(CC_Texture0, vec2(texcoord.x + blurSize, texcoord.y)) * 0.15;sum += texture2D(CC_Texture0, vec2(texcoord.x + 2.0*blurSize, texcoord.y)) * 0.12;sum += texture2D(CC_Texture0, vec2(texcoord.x + 3.0*blurSize, texcoord.y)) * 0.09;sum += texture2D(CC_Texture0, vec2(texcoord.x + 4.0*blurSize, texcoord.y)) * 0.05;// 垂直Blur,使用九个取样sum += texture2D(CC_Texture0, vec2(texcoord.x, texcoord.y - 4.0*blurSize)) * 0.05;sum += texture2D(CC_Texture0, vec2(texcoord.x, texcoord.y - 3.0*blurSize)) * 0.09;sum += texture2D(CC_Texture0, vec2(texcoord.x, texcoord.y - 2.0*blurSize)) * 0.12;sum += texture2D(CC_Texture0, vec2(texcoord.x, texcoord.y - blurSize)) * 0.15;sum += texture2D(CC_Texture0, vec2(texcoord.x, texcoord.y)) * 0.16;sum += texture2D(CC_Texture0, vec2(texcoord.x, texcoord.y + blurSize)) * 0.15;sum += texture2D(CC_Texture0, vec2(texcoord.x, texcoord.y + 2.0*blurSize)) * 0.12;sum += texture2D(CC_Texture0, vec2(texcoord.x, texcoord.y + 3.0*blurSize)) * 0.09;sum += texture2D(CC_Texture0, vec2(texcoord.x, texcoord.y + 4.0*blurSize)) * 0.05;//增加模糊强度gl_FragColor = sum*intensity + texture2D(CC_Texture0, texcoord); return;
}

使用Bloom实现的效果对模型的渲染如下图:

Cocos2d-x 3.x 图形学渲染系列二十三相关推荐

Cocos2d-x 3.x 图形学渲染系列二
笔者介绍:姜雪伟,IT公司技术合伙人,IT高级讲师,CSDN社区专家,特邀编辑,畅销书作者,国家专利发明人,已出版书籍:<手把手教你架构3D游戏引擎>电子工业出版社和<Unity3 ...
Reflex WMS入门系列二十三：几个库存相关的报表
Reflex WMS入门系列二十三:几个库存相关的报表 Reflex WMS系统作为一个主流的仓库管理软件系统,自然需要对仓库里的库存有多个角度的报表功能.比如常见的slow-moving, agin ...
Cocos2d-x 3.x 图形学渲染系列十二
笔者介绍:姜雪伟,IT公司技术合伙人,IT高级讲师,CSDN社区专家,特邀编辑,畅销书作者,国家专利发明人;已出版书籍:<手把手教你架构3D游戏引擎>电子工业出版社和<Unity3D ...
Cocos2d-x 3.x 图形学渲染系列七
笔者介绍:姜雪伟,IT公司技术合伙人,IT高级讲师,CSDN社区专家,特邀编辑,畅销书作者,国家专利发明人; 已出版书籍:<手把手教你架构3D游戏引擎>电子工业出版社和<Unity ...
Cocos2d-x 3.x 图形学渲染系列十三
笔者介绍:姜雪伟,IT公司技术合伙人,IT高级讲师,CSDN社区专家,特邀编辑,畅销书作者,国家专利发明人;已出版书籍:<手把手教你架构3D游戏引擎>电子工业出版社和<Unity3D ...
cocos2d-x 3.x 图形学渲染系列六
笔者介绍:姜雪伟,IT公司技术合伙人,IT高级讲师,CSDN社区专家,特邀编辑,畅销书作者,国家专利发明人,已出版书籍:<手把手教你架构3D游戏引擎>电子工业出版社和<Unity3 ...
Cocos2d-x 3.x 图形学渲染系列总结
笔者介绍:姜雪伟,IT公司技术合伙人,IT高级讲师,CSDN社区专家,特邀编辑,畅销书作者,国家专利发明人;已出版书籍:<手把手教你架构3D游戏引擎>电子工业出版社和<Unity3D ...
电气器件系列二十三：压差开关
简介压差开关是一种特殊的控制开关,它是依据相互部件间的压力差值并依靠电信号进行信息传递控制开关闭合或打开的一类开关. 总的来说就是利用两条管道的压差来发出电讯号,当系列液管二端的压差升高(或降低)而 ...
BizTalk开发系列(二十三) BizTalk性能指标参考
更多内容请查看:BizTalk动手实验系列目录 BizTalk 开发系列 BizTalk项目目前比较少,使用的客户也不多.大多只知道BizTalk是一个不错 ...

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

Cocos2d-x 3.x 图形学渲染系列二十三相关推荐

最新文章

热门文章