Cocos Creator 3D后期效果解决方案-KylinsPostEffects
2021/11/9 6:12:59
本文主要是介绍Cocos Creator 3D后期效果解决方案-KylinsPostEffects,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
获取方式
- 本框架已上架Cocos Store,请打开store.cocos.com并搜索kylins即可
- 点击文末
阅读原文
即可跳转到对应页面
写在前面
之前麒麟子写过一套框架,但使用很不方便。最近麒麟子就在想,能不能实现一套,不依赖prefab
、不污染场景节点树
、简单调用几个参数
就能使用的后期效果解决方案
。经过一个多星期的设计与编码,终于把它弄出来了,希望大家能够喜欢。
开发环境
- 引擎版本:
Cocos Creator 3.3.2
- 编程语言:
TypeScript
特色功能
- 支持
原生
H5
小游戏
平台 无需修改引擎管线
对场景节点树零污染
,只需复制到resources
目录,简单调用API即可使用GLOW
(单个物体发光)DISTORTION
(屏幕扭曲,空间扰动)BLOOM
(全屏柔光)LUT
(颜色查找表后期较色)良好的架构设计
增加新效果非常容易,且不会影响已存在的效果
动图演示
如下图所示点击右上角 … 处即可查看
-以下为录制的GIF,具体的参数释义,在动图之后。
操作文档
DEMO 体验
- 下载后,去目录中找到zip包
- 解压到一个自己喜欢的目录
- 打开Cocos Dashboard (请确保已安装Cocos Creator 3.3.2版本编辑器)
- 点击
导入
按钮,即可导入 - 打开项目
- 打开 assets/test/main 场景
- 点击Cocos Creator 上方的 预览按钮,即可体验
引入项目
- 下载后,去目录中找到zip包
- 解压到一个自己喜欢的目录
- 打开Cocos Dashboard (请确保已安装Cocos Creator 3.3.2版本编辑器)
- 点击
创建
按钮,创建一个新的Cocos Creator 3.3.2项目 - 打开项目
- 将本源码目录中的
assets/resources/kylins_post_effects
拷贝到自己项目的assets/resources
目录下 - 在适合的地方,参考本源码的
TestApp.ts
以及SettingsUI.ts
中的写法,开启后效和设置后效参数
开发文档
目录介绍
如图所示,框架资源放在了
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面板
- 目前各种后期效果的默认参数,是基于当前DEMO场景而调整的,不同场景的参数可能会不一样。需要针对项目进行调节。
- 手调太痛苦,DEMO中的调节面板,不依赖于任何框架,只和PostEFXMgr相关,如果有需要,开发者可以将此面板集成到自己的项目中进行参数调试。
- 调好的参数,记下来,程序启动的时候进行设置即可。
如何新增自己的后效
- 阅读
PEFX_Glow.ts
,PEFX_Bloom.ts
等源码 - 实现getRes函数,此函数返回的是此后效需要使用图片和材质路径,
PostEFXMgr
会在setup
时进行统一加载 - 实现setupPasses函数,一个后效由一个或者 多个Pass构成
- 记得在调用PostEFXMgr.inst.setup的时候,将自己的后效也加入列表中
如何指定要Glow对象
- 找到
kylins_post_effects/scripts/GlowObject.ts
- 将此组件挂到需要
Glow
的对象上 - 默认情况下
GlowObject
组件的allChildren
为TRUE
,表示会作用到所有子节点,如果不需要,请关闭掉
如何指定要Distortion(扰动)的对象
- 找到
kylins_post_effects/scripts/DistortionObject.ts
- 将此组件挂到需要
Distortion
的对象上 - 默认情况下
DistortionObject
组件的allChildren
为TRUE
,表示会作用到所有子节点,如果不需要,请关闭掉
注意事项
- 此方案的实现手法借助了多摄像机实现,对layer有消耗,请参看Layer3D.ts目录
- 如果项目中有对layer进行使用,请将已占用掉的layer写到
Layer3D.ts
中,防止已占用的layer被用于后效渲染,导致不可知的渲染错误 - 由于要消耗layer,因此有可能layer不够用,当不够用的时候,会抛出异常。
联系作者
- 微信公众号:麒麟子随笔 qilinzisuibi
- 微信号: qilinzi6666
- 微信群: 无(人太多了,装不下)
- QQ群:727901932 (麒麟书院-Cocos3D,3000人大群)
- 关于本框架的实现以及每一种效果的详解文章,将在麒麟子的私域流量圈发布,请大家
加麒麟子微信
加QQ群或者
关注麒麟子微信公众号`,方便第一时间获取最新进展
版权声明
麒麟子熬夜写的,希望大家能够喜欢
这篇关于Cocos Creator 3D后期效果解决方案-KylinsPostEffects的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-15PingCAP 黄东旭参与 CCF 秀湖会议,共探开源教育未来
- 2024-05-13PingCAP 戴涛:构建面向未来的金融核心系统
- 2024-05-09flutter3.x_macos桌面os实战
- 2024-05-09Rust中的并发性:Sync 和 Send Traits
- 2024-05-08使用Ollama和OpenWebUI在CPU上玩转Meta Llama3-8B
- 2024-05-08完工标准(DoD)与验收条件(AC)究竟有什么不同?
- 2024-05-084万 star 的 NocoDB 在 sealos 上一键起,轻松把数据库编程智能表格
- 2024-05-08Mac 版Stable Diffusion WebUI的安装
- 2024-05-08解锁CodeGeeX智能问答中3项独有的隐藏技能
- 2024-05-08RAG算法优化+新增代码仓库支持,CodeGeeX的@repo功能效果提升