Loading...
墨滴

麒麟子

2021/11/04  阅读:25  主题:默认主题

KylinsPostEffects

获取方式

  1. 本框架已上架Cocos Store,请打开store.cocos.com并搜索kylins即可
  2. 点击文末阅读原文即可跳转到对应页面

写在前面

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

开发环境

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

特色功能

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

动图演示

如下图所示点击右上角 ... 处即可查看 asdf.jpg

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

0.gif
0.gif
1.gif
1.gif
2.gif
2.gif
3.gif
3.gif
4.gif
4.gif
5.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
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. 调好的参数,记下来,程序启动的时候进行设置即可。 55667.png

如何新增自己的后效

  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群或者关注麒麟子微信公众号`,方便第一时间获取最新进展

版权声明

麒麟子熬夜写的,希望大家能够喜欢

麒麟子

2021/11/04  阅读:25  主题:默认主题

作者介绍

麒麟子

Cocos布道师