【技术分享】Cocos Creator 2.1.1 实现背景高斯模糊效果

效果

实时预览页面

https://wheatup.github.io/blur-effect/


如图,这个功能其实比较常用,但是之前引擎没有比较好的实现方法

2.1.1更新以后,借助自带的材质和shader结合摄影机的 targetTexture 功能,实现起来就比较容易了,具体代码请参考:

https://github.com/wheatup/cocos-creator-blur-mask

自带中文注释,代码加起来不过200行,还是比较好懂的,模糊的shader参考了

https://github.com/ShawnZhang2015/ShaderHelper/blob/master/assets/shader/GaussBlurs.js

以后等材质更加成熟后,可以想加任何效果都可以。

你也可以手动替换 Blur.effect 中的代码来实现你想要的效果。

每帧进行渲染并没有发现明显的帧数降低,所以性能应该说得过去。


2019-05-09 更新

  • 修复手机无法正常显示的bug
  • 略微优化了性能

2019-05-10 更新

  • 现在不在Mask节点包围盒以内的背景将不会被模糊,局部打码不是梦。
  • 现在可以排除不需要渲染模糊的对象。
  • 大幅优化了性能。
  • 支持自定义渲染参数,可以指定模糊程度和亮度。
63赞

好东西,顶一个

顶一个

打call

摄影机的 targetTexture 功能做了什么具体的工作 ? 因为在上班没时间看 又想马上知道结果 哪位好心人说一下

主要是可以让特定摄影机渲染的图像直接应用到sprite身上,少了一步canvas截图然后转换UInt32Array到Texture2D的过程,极大提升了性能,还可以设定特定的渲染参数来渲染指定的某些元素。

:+1: 感谢分享

请问大佬,这个2.09版本下可以试吗?

2.0.9支持材质的话,应该可以用,具体我没试过,你可以试试看

1234

先Mark。

mark

Mark 一下

请问在移动端做过测试吗?性能怎样

目前iPhoneX测试
draw call+1
帧数60fps无变化

赞一个

Mark!

:dizzy_face:很久之前我把背景全部渲染在RenderTexture上,加了个模糊shader,每帧刷新,电脑风扇直接暴走了。

厉害了

膜拜大佬。

这个难道不是一个意思么