超级实用的后期效果框架-KylinsPostEffects

先向各位说声抱歉,由于种种原因,麒麟子的各种媒体号基本上断更一年了。

试完地址

http://gameview.creator-star.cn/kylins/kylins_post_effects/index.html

获取方式

https://store.cocos.com/app/detail/3333

写在前面

随着Cocos Creator v3.3的发布,可玩性大大增加,不管是今天分享的后期效果,还是接下来打重启的Shader效果实现,都比之前的版本顺畅很多。

更关键的是,随着越来越多的开发者转向Cocos Creator来制作他们的3D项目,也使得Cocos Creator相关的3D源码、教程、素材需求爆涨。

麒麟子决定利用业余时间,和大家一起撸一些实用而有趣的东西,虽然个人的力量并不能为庞大的Cocos生态带来过多的影响,但如果大家一起来做这样的事,那么结果就又是另一番景象了。

之前麒麟子写过一套框架,但使用很不方便。最近麒麟子就在想,能不能实现一套,不依赖prefab不污染场景节点树简单调用几个参数就能使用的后期效果解决方案。经过一个多星期的设计与编码,终于把它弄出来了,希望大家能够喜欢。

开发环境

  1. 引擎版本:Cocos Creator 3.3.2
  2. 编程语言:TypeScript

特色功能

  1. 支持原生 H5 小游戏 平台
  2. 无需修改引擎管线
  3. 对场景节点树零污染,只需复制到resources目录,简单调用API即可使用
  4. GLOW(单个物体发光)
  5. DISTORTION(屏幕扭曲,空间扰动)
  6. BLOOM(全屏柔光)
  7. LUT(颜色查找表后期较色)
  8. 良好的架构设计 增加新效果非常容易,且不会影响已存在的效果

动图演示

如下图所示点击右上角 … 处即可查看

-以下为录制的GIF,具体的参数释义,在动图之后。

0.gif

1.gif

2.gif

3.gif

4.gif

5.gif

操作文档

DEMO 体验

  1. 下载后,去目录中找到zip包
  2. 解压到一个自己喜欢的目录
  3. 打开Cocos Dashboard (请确保已安装Cocos Creator 3.3.2版本编辑器)
  4. 点击导入 按钮,即可导入
  5. 打开项目
  6. 打开 assets/test/main 场景
  7. 点击Cocos Creator 上方的 预览按钮,即可体验

引入项目

  1. 下载后,去目录中找到zip包
  2. 解压到一个自己喜欢的目录
  3. 打开Cocos Dashboard (请确保已安装Cocos Creator 3.3.2版本编辑器)
  4. 点击创建 按钮,创建一个新的Cocos Creator 3.3.2项目
  5. 打开项目
  6. 将本源码目录中的assets/resources/kylins_post_effects拷贝到自己项目的 assets/resources 目录下
  7. 在适合的地方,参考本源码的TestApp.ts以及 SettingsUI.ts中的写法,开启后效和设置后效参数

开发文档

目录介绍

image.png

如图所示,框架资源放在了assets/resources/kylins_post_effects目录下,只需要拷贝kylins_post_effects目录到自己项目的assets/resources目录下,就算集成成功了

用代码开启后效

我直接上代码吧,简单、直接、易使用,不是吹出来的。

export class TestApp extends Component {
    start() {
        //获取主摄像相
        let mainCamera = find('Main Camera').getComponent(Camera);

        //设置需要的后效(由于每一个后效都会占用若干个RenderTexture,消耗显存,所以如果项目中有不需要的效果,则建议不要出现在列表中
        let efxList = [
            PEFX_GrapScene, //抓取主摄像机的内容,供所有后效使用  要确保它是第一个
            PEFX_Glow,
            PEFX_Distortion,
            PEFX_Bloom,
            PEFX_Lut,
            PEFX_Final //最后呈现到屏幕上 要确保它是最后一个
        ];

        PostEFXMgr.inst.setup(efxList, mainCamera, () => {
            //开启Glow效果
            PostEFXMgr.inst.setEfxEnable(PEFX_Glow.NAME,true);
            let glow = PostEFXMgr.inst.getPEFX(PEFX_Glow.NAME) as PEFX_Glow;
            //设置Glow效果参数
            //设置模糊范围 值越大,GLOW的溢出边缘越大, 建议不要大于6.0
            glow.blurRadius = 4.5;
            //设置混合强度 值越大越亮
            glow.blendIntensity = 1.5;


            //开启屏幕扰动效果
            PostEFXMgr.inst.setEfxEnable(PEFX_Distortion.NAME,true);
            let distortion = PostEFXMgr.inst.getPEFX(PEFX_Distortion.NAME) as PEFX_Distortion;
            //设置扰动强度,值越大扭动得越厉害
            distortion.intensity = 0.15;
            
            //开启BLOOM效果
            PostEFXMgr.inst.setEfxEnable(PEFX_Bloom.NAME,true);
            let bloom = PostEFXMgr.inst.getPEFX(PEFX_Bloom.NAME) as PEFX_Bloom;
            //设置全屏泛光亮阀值, 亮度大于此值的像素才会参与BLOOM效果。 如果为0,表示所有像素都会参与。
            bloom.luminanceThreshold = 0.4;
            //设置强度,通过luminanceThreshold测试的像素,在BLUR之前,做的一次缩放操作
            bloom.intensity = 1.5;
            //设置模糊范围 值越大,亮色部分的泛光越大
            bloom.blurRadius = 4.5;
            //与原图合成的时候的强度因子,越大越亮
            bloom.blendIntensity = 1.0;

            let lut = PostEFXMgr.inst.getPEFX(PEFX_Lut.NAME) as PEFX_Lut;
            //设置LUT样式
            lut.setLut(2);
        });
    }
}

DEMO面板

  1. 目前各种后期效果的默认参数,是基于当前DEMO场景而调整的,不同场景的参数可能会不一样。需要针对项目进行调节。
  2. 手调太痛苦,DEMO中的调节面板,不依赖于任何框架,只和PostEFXMgr相关,如果有需要,开发者可以将此面板集成到自己的项目中进行参数调试。
  3. 调好的参数,记下来,程序启动的时候进行设置即可。

如何新增自己的后效

  1. 阅读PEFX_Glow.ts,PEFX_Bloom.ts等源码
  2. 实现getRes函数,此函数返回的是此后效需要使用图片和材质路径,PostEFXMgr会在setup时进行统一加载
  3. 实现setupPasses函数,一个后效由一个或者 多个Pass构成
  4. 记得在调用PostEFXMgr.inst.setup的时候,将自己的后效也加入列表中

如何指定要Glow对象

  1. 找到kylins_post_effects/scripts/GlowObject.ts
  2. 将此组件挂到需要Glow的对象上
  3. 默认情况下GlowObject组件的allChildrenTRUE,表示会作用到所有子节点,如果不需要,请关闭掉

如何指定要Distortion(扰动)的对象

  1. 找到kylins_post_effects/scripts/DistortionObject.ts
  2. 将此组件挂到需要Distortion的对象上
  3. 默认情况下DistortionObject组件的allChildrenTRUE,表示会作用到所有子节点,如果不需要,请关闭掉

注意事项

  1. 此方案的实现手法借助了多摄像机实现,对layer有消耗,请参看Layer3D.ts目录
  2. 如果项目中有对layer进行使用,请将已占用掉的layer写到Layer3D.ts中,防止已占用的layer被用于后效渲染,导致不可知的渲染错误
  3. 由于要消耗layer,因此有可能layer不够用,当不够用的时候,会抛出异常。

联系作者

  • 微信公众号:麒麟子随笔 qilinzisuibi
  • 微信号: qilinzi6666
  • 微信群: 无(人太多了,装不下)
  • QQ群:727901932 (麒麟书院-Cocos3D,3000人大群)
  • 关于本框架的实现以及每一种效果的详解文章,将在麒麟子的私域流量圈发布,请大家加麒麟子微信 加QQ群 或者关注麒麟子微信公众号`,方便第一时间获取最新进展

image

11赞

麒麟子
官方布道师@Cocos
微信&电话: (+86) 18081177883
服务内容:引擎咨询、行业探讨、技术交流(渲染效果、性能优化、兼容性等)、反馈收集等

有需要的小伙伴加麒麟子微信 qilinzi6666 (四个6哦)

1赞

mask,麒麟子:ox:

大佬牛逼!

大佬厉害!

:cow: :beer: plus

牛皮!!!

大佬牛批!

大佬牛批!

大佬牛批Plus Pro Max Ultra Ultimate Privilege…

酷炫!!!

赞 

终于出来了 哈哈~等了好久

[.WebGL-0000338A00216280] GL_INVALID_OPERATION: Feedback loop formed between Framebuffer and active Texture.

在我的工程里插件引入后 绑定到节点上
打开效果就会报这个错 然后会黑屏 不知道是什么原因

看一下试玩链接,看试玩链接能否在你的电脑上跑

试玩链接没问题 我导入了你的那个火球 加了扰动 但是在PostEFXMgr里开启效果后 就会报这个错 然后就黑了 不开启的时候是这个截图的样子

这类项目问题,直接微信我就行。论坛聊这个效率低。

ok 我是想着也许别人有相同问题可能能找到答案 :joy:


目前受RT流程的影响,Main Camera不能渲染UI_3D这个Layer,大家去掉即可。

或者加上一句
mainCamera.visibility &= ~Layer3D.UI_3D.mask;
至于为什么会有影响,需要问引擎组大佬了。

差点看成了Laya3D.ts