Cocos Creator 3.8 后期效果 Shader 编写(2/2) 进阶篇

前言

在上一篇文章中,麒麟子给大家分享了如何在 Cocos Creator 3.8 中的自定义管线中,添加属于自己的后期效果 Shader。 但基于 BlitScreen 的方案,我们只能编写最简单后效 Shader,如果我们想要支持更多复杂的 Shader,比如模糊、景深等等效果,就需要配合代码才能实现。

今天麒麟子就用高斯模糊来演示如何编写一个多 Pass 的后效 Shader。

准备 Shader

高斯模糊的涉及到的内容比较多,什么正态分布、高斯函数、高斯卷积核。

如果对数学没兴趣,上面这些统统不用管。

简单来说,高斯模糊就是把图片上的每一个像素都用下面的流程处理一遍。

直白来说,就是一个简单的加权求和:采样目标像素的同时,再采样一些周围的像素;并且每一个像素给一个权重(权重和为1.0)。最终像素值 = 所有(像素 x 权重)的和。

如果想要效果好,就多迭代几次,迭代次数越多,画面越好,但性能开销越高。

我们创建一个 Cocos Shader 文件,命名为 “gaussian-blur.effect” 然后编写下面的内容。

CCEffect %{techniques:- passes:- vert: blur-hor-vsfrag: blur-fspass: blur-xdepthStencilState:depthTest: falsedepthWrite: false- vert: blur-vert-vsfrag: blur-fspass: blur-ydepthStencilState:depthTest: falsedepthWrite: false
}%CCProgram blur-hor-vs %{//...
}%
CCProgram blur-hor-vs %{//...
}%CCProgram blur-fs %{//...
}%//为了方便文章阅读
//完整 Shader 被放到了文末

可以看到,整个 Cocos Shader 只有两个 Pass,一个用来水平模糊,一个用来竖直模糊。

为了不影响阅读,完整 Shader 放在了文末。

注意:Cocos Creator 3.8.0 版本如果新增了后效 Shader,需要重启编辑器才能识别。后面版本中会优化这个流程。

编写属性组件

Cocos Creator 3.8 中,只需要在节点上添加对应的后期效果组件,就可以启动对应的后期效果。

自定义后期管线提供了一个 postProcess.PostProcessingSetting 组件类,我们可以通过继承它类来实现后效参数的可视化界面配置。

通过它自定义出来的后期效果 ,是完全可以达到和内置的后期效果一样的使用体验的。

新建一个 TS 脚本文件,起名为 “GaussianBlur.ts”,然后输入以下代码。

代码片段1:

import { _decorator, gfx, postProcess, Material, EffectAsset, renderer, rendering, Vec4 } from 'cc';
const { Format  } = gfxconst { ccclass, property, menu, executeInEditMode } = _decorator;@ccclass('GaussianBlur')
@menu('PostProcess/GaussianBlur')
@executeInEditMode
export class GaussianBlur extends postProcess.PostProcessSetting{@property(EffectAsset)_effectAsset: EffectAsset | undefined@property(EffectAsset)get effect () {return this._effectAsset;}set effect (v) {this._effectAsset = v;if(this._effectAsset == null){this._material = null;}else{if(this._material == null){this._material = new Material();}this._material.reset({effectAsset:this._effectAsset});}this.updateMaterial();}@propertyiterations = 3;@propertyget blurRadius(){return this._blurParams.x;}set blurRadius(v){this._blurParams.x = v;this.updateMaterial();}private _material:Material;public get material():Material{return this._material;}@propertyprivate _blurParams:Vec4 = new Vec4(1.0,0.0,0.0,0.0);public get blurParams():Vec4{return this._blurParams;}updateMaterial(){if(!this._material){return;}this._material.setProperty('blurParams', this.blurParams);}protected start(): void {if(this._effectAsset){this._material = new Material();this._material.initialize({effectAsset:this._effectAsset});this._material.setProperty('blurParams', this.blurParams);}}
}

接下来,我们就可以通过“添加组件“按钮,把 PostProcess/GansussianBlur 添加到后处理结点上了。

可以看到,在 Inspector 面板上,它接受 3 个参数。

  • effect:用于指定用于这个后期效果的 Shader 文件
  • iterations:用于指定需要迭代多少次,迭代次数越多越模糊
  • blurRadius:采样临近像素时的偏移,偏移量越大越模糊

这个时候是没有任何效果的,因为还没有实现对应的渲染代码。

编写渲染代码

Cocos Creator 3.8 中的后处理管线是基于新版自定义管线的,而新版的自定义管线是基于 RenderGraph 架构的。

你可以简单地认为,我们想要实现的单个后处理效果,对应的就是渲染流程图上的一个节点。

后处理管线提供了 postProcess.SettingPass 给我们,用来编写自己的后处理渲染效果。(也可以叫,自定义后处理节点的资源和行为)。

接下来,我们来做真正的渲染实现。 我们需要继承自定义管线中的 postProcess.SettingPass 类,并实现并要的代码。

  • get setting:获取配置信息,对应的就是上面实现的界面组件
  • checkEnable:用于判断此后效是否开启
  • name:后效的名字,一般保持和类名一致即可
  • outputNames:最终输出的 RT 数组。(临时用的 RT 不用放在这里)
  • render:用于执行渲染流程

完整编码如下。

代码片段2:

export class GaussianBlurPass extends postProcess.SettingPass {get setting () { return this.getSetting(GaussianBlur); }checkEnable (camera: renderer.scene.Camera) {let enable = super.checkEnable(camera);if (postProcess.disablePostProcessForDebugView()) {enable = false;}return enable && this.setting.material != null;}name = 'GaussianBlurPass';outputNames = ['GaussianBlurMap'];public render (camera: renderer.scene.Camera, ppl: rendering.Pipeline): void {const setting = this.setting;if(!setting.material){return;}let passContext = this.context;passContext.material = setting.material;const cameraID = this.getCameraUniqueID(camera);const cameraName = `Camera${cameraID}`;const passViewport = passContext.passViewport;passContext.clearBlack();const format = Format.RGBA8;let input = this.lastPass!.slotName(camera, 0);for(let i = 0; i < setting.iterations; ++i){passContext.updatePassViewPort().addRenderPass(`blur-x`, `blur-x${cameraID}`).setPassInput(input, 'outputResultMap').addRasterView('GaussianBlurMap_TMP', format).blitScreen(0).version();passContext.updatePassViewPort().addRenderPass(`blur-y`, `blur-y${cameraID}`).setPassInput('GaussianBlurMap_TMP', 'outputResultMap').addRasterView(this.slotName(camera), format).blitScreen(1).version();input = this.slotName(camera);}}
}

接下来,我们主要看看 render 处理了哪些事情。

准备工作

每一个 SettingPass 就是一个绘制节点。而节点的数据,我们存在了 context 中。

render 函数会每帧执行,所以需要调用 context.clearBack() 来清理背景。

然后,我们要将材质设置给 context

模糊的处理,需要使用上一个处理流程结束后的画面内容。因此,我们使用 this.lastPass.slotName(camera,0); 来获取。

一切准备就绪后,就进入到了绘制环节。

绘制

这里,我们使用了 iterations 属性来控制总共要迭代的次数。迭代一次,绘制流程就会走一遍。

我们来看看,绘制流程中每一步操作的用途。

  • updatePassViewPort:这个函数用来指定相对分辨率大小,这个根据算法需求来指定就行。如果要保持和后台缓冲区一样大,传入 1.0 即可。

  • addRenderPass:这个函数用来告诉管线,需要执行一次绘制流程。

    • layout:对应的是 Cocos Shader 中的 Pass 名称
    • passName:助记名称,便于调试查看
  • setPassInput:如果有用到自定义管线中的 RT 资源(比如上一次执行的结果),则需要在这里指定,方便自定义管线对资源进行管理。

    • inputName: 自定义管线资源分配的资源名称
    • shaderName: 对应 Cocos Shader 中的 uniform Sampler2D 名称。
  • addRasterView:可以简单理解为,输出结果

    • name:输出的 RT 名称,便于后续流程复用
    • format:输出的 RT 格式,比如,RGBA8888、RGBA16F 等等
  • blitScreen:执行绘制

    • passIdx:Cocos Shader 中的 Pass 索引(这个在后面的版本中会优化一下,到时候,后处理流程可以不用传这个值)。
  • version:无实际意义,可以忽略。

添加到管线

如果只是写好了上面的代码,不进行添加,也是不会生效的。

我们在文件末尾加上下面代码。

代码片段3:

let builder = rendering.getCustomPipeline('Custom') as postProcess.PostProcessBuilder;
if (builder) {builder.insertPass(new GaussianBlurPass(),postProcess.BlitScreenPass);
}

首先,我们获取到了 Custom 管线,然后把我们新写的效果添加进去。

回到编辑器中,调节参数,就可以看到我们新写的模糊效果生效咯。

后处理管线源码浅析

为了方便大家理解后处理的渲染流程,麒麟子简单说明一些关键的源码。

代码集

后效相关的类,大多都在 postProcess 下,建议先从 “cc” 引入 postProcess,再使用。

RT 管理

开启后处理管线后,开启了后处理管线效果的摄像机,会自动生成 RT,并设置它的 targetTexture

后效管线基于 RenderGraph 管线架构, Cocos 引擎中使用的 RenderGraph 是基于数据驱动的,会每帧收集需要的 RT 资源,并做统一管理。 因此不需要自己再手工新建 RT。

后效执行顺序

后处理效果的执行,不是按界面添加的顺序来的,而是按照处于数组中的顺序来的。我们通过源码可以看到它的内部顺序如下:

  // pipeline relatedthis.addPass(new HBAOPass());this.addPass(new ToneMappingPass());// user post-processingthis.addPass(new TAAPass());this.addPass(new FxaaPass());this.addPass(new ColorGradingPass());this.addPass(new BlitScreenPass());this.addPass(new BloomPass());// final outputthis.addPass(new FSRPass()); // fsr should be finalthis.addPass(forwardFinal);

后处理效果在渲染时,管线会遍历这个数组,依次执行可用的后处理效果。

for (let i = 0; i < passes.length; i++) {const pass = passes[i];if (!pass.checkEnable(camera)) {continue;}if (i === (passes.length - 1)) {passContext.isFinalPass = true;}pass.lastPass = lastPass;pass.render(camera, ppl);lastPass = pass;
}

**源码位置:**engine/cocos/rendering/post-process/post-process-builder.ts

后效注意事项

自定义后效添加

在将自己定义的后效 Shader 添加到管线中时,需要注意几个问题:

  1. 必须添加在 ForwardFinal 之前,否则没有效果。所以 builder.addPass 不建议使用
  2. 使用 builder.insterPass 添加新的后效时,如果新后效与旧的后效重名,会先移除旧的后效
  3. builder.insterPass 会将新的后效插入到第二个参数类型指定的后效后面,通常情况下,建议使用 postProcess.BlitScreenPass

效果

  1. TAA+FXAA+FSR 同时开启,才能达到很好的抗锯齿效果,因为 TAA 主要负责动态(帧间)抗锯齿,但会让画面略微变糊,FXAA 主要负责边缘抗锯齿,而 FSR 可以让糊了的画面变清晰。
  2. ColorGrading 是最划算的后期效果,能够快速提升项目画面颜值
  3. 不要过渡依赖 HBAO,因为中低端机跑不动。场景优先使用光照图烘焙出 AO。这样即使HBAO 关闭的情况下,效果依然不会差。
  4. Bloom 的阈值调小,强度调低,可实现全屏泛光,柔和画面。 Bloom 的阈值调大,强度调高,可实现亮部像素曝光效果。

内存

  1. 虽然 RenderGraph会自动管理和复用 RT,但是 后效依然会对内存有所消耗,可自行测试当所需后效开启后,上涨了多少内存。
  2. 内存开销受分辨率决定,请以实机测试为准。
  3. 可以通过 shadingScale 来降低分辨率,从而减少内存和减少渲染开销,提升性能的目的。这个值可以根据当前实际分辨率与设定的机型可用的最大后效分辨率来决定。

性能

  1. 后效会多次读写帧缓存,对 GPU 带宽和像素填充率,纹理填充率要求高。 在中低端机型上很可能造成性能锐减。

  2. 做好高、中、低端机型管理 ,在不同档次的机型上,开启对应的后效组合,确保性能和效果的平衡。

  3. 许多单 Pass 的后效,可以合成一个。 比如 ColorGrading,FXAA,Vignette,FinalPass 可以合成一个。这样可以减少 BlitScreen 次数,提升性能。

  4. HBAO 能够极大地提升空间关系,但也是性能开销大户,谨慎使用。

写在最后

使用后处理效果能极大地提升画面质感,但也需要注意后处理效果带来的额外内存开销和填充率开销。

后效对低端机型很不友好,请做好在低端机上根据性能测试结果做好分档。

另外,后效的种类繁多,且根据具体的项目需求,又可以做特殊优化。因此引擎只能内置常见的后效供大家使用,更多后效果需求,还得开发者们自己来。

希望今天的分享能够对大家有帮助,谢谢大家!

附1:完整源码

新建一个 TS 脚本,将代码片段1代码片段2代码片段3 复制到这个脚本中即可。

附2:完整 Shader

新建一个 Cocos Shader 文件,将下面 Shader 代码复制到文件中即可。

CCEffect %{techniques:- passes:- vert: blur-hor-vsfrag: blur-fspass: blur-xdepthStencilState:depthTest: falsedepthWrite: false- vert: blur-vert-vsfrag: blur-fspass: blur-ydepthStencilState:depthTest: falsedepthWrite: false
}%CCProgram blur-hor-vs %{precision highp float;#include <legacy/input-standard>#include <builtin/uniforms/cc-global>#include <common/common-define>uniform MyConstants {vec4 blurParams;};out vec2 v_uv;out vec2 v_uv1;out vec2 v_uv2;out vec2 v_uv3;out vec2 v_uv4;void main () {StandardVertInput In;CCVertInput(In);CC_HANDLE_GET_CLIP_FLIP(In.position.xy);gl_Position = In.position;gl_Position.y = gl_Position.y;v_uv = a_texCoord;vec2 texelSize = cc_nativeSize.zw;float blurOffsetX = blurParams.x * texelSize.x;v_uv1 = v_uv + vec2(blurOffsetX * 1.0, 0.0);v_uv2 = v_uv - vec2(blurOffsetX * 1.0, 0.0);v_uv3 = v_uv + vec2(blurOffsetX * 2.0, 0.0);v_uv4 = v_uv - vec2(blurOffsetX * 2.0, 0.0);}
}%CCProgram blur-vert-vs %{precision highp float;#include <legacy/input-standard>#include <builtin/uniforms/cc-global>#include <common/common-define>uniform MyConstants {vec4 blurParams;};out vec2 v_uv;out vec2 v_uv1;out vec2 v_uv2;out vec2 v_uv3;out vec2 v_uv4;void main () {StandardVertInput In;CCVertInput(In);CC_HANDLE_GET_CLIP_FLIP(In.position.xy);gl_Position = In.position;gl_Position.y = gl_Position.y;v_uv = a_texCoord;vec2 texelSize = cc_nativeSize.zw;float blurOffsetY = blurParams.x * texelSize.y;v_uv1 = v_uv + vec2(0.0, blurOffsetY * 1.0);v_uv2 = v_uv - vec2(0.0, blurOffsetY * 1.0);v_uv3 = v_uv + vec2(0.0, blurOffsetY * 2.0);v_uv4 = v_uv - vec2(0.0, blurOffsetY * 2.0);}
}%CCProgram blur-fs %{precision highp float;#include <builtin/uniforms/cc-global>in vec2 v_uv;in vec2 v_uv1;in vec2 v_uv2;in vec2 v_uv3;in vec2 v_uv4;#pragma rate outputResultMap passuniform sampler2D outputResultMap;layout(location = 0) out vec4 fragColor;void main () {vec3 weights = vec3(0.4026,0.2442,0.0545);vec3 sum = texture(outputResultMap, v_uv).rgb * weights.x;sum += texture(outputResultMap, v_uv1).rgb * weights.y;sum += texture(outputResultMap, v_uv2).rgb * weights.y;sum += texture(outputResultMap, v_uv3).rgb * weights.z;sum += texture(outputResultMap, v_uv4).rgb * weights.z;fragColor = vec4(sum, 1.0);}
}%

关于麒麟子

深耕游戏引擎与游戏开发15年,每一滴干货都源自商业项目实践。

用技术资源赋能行业商机,提供实用解决方案、项目分析、技术指导与干货教程!

欢迎私信!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/84401.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Gitee+Jenkins(docker版)自动推送并部署Springboot项目到远程服务器

如果要参考gitlab配置请参考GitlabWebhook自动推送并更新Springboot项目 Gitlab的配置部分 环境介绍 Jenkins服务器(Centos7.6): docker安装的jenkins,参考Jenkins(docker安装)部署Springboot项目JDK1.8Maven3.6.3 注意docker安装的jenkins,而且是较新的版本,所以jenkins容器…

Tomcat的介绍和安装配置、eclipse中动态web项目的创建和运行、使用IDEA创建web项目并运行

一、Tomcat的介绍和安装配置 安装tomcat&#xff1a; 环境变量的配置&#xff1a; 配置之后重启cmd&#xff0c;执行startup命令&#xff0c;启动tomcat 在localhost:8080&#xff0c;能进入tomcat主界面&#xff0c;说明配置成功 二、eclipse中动态web项目的创建和运行 tomca…

竞赛项目 深度学习疲劳驾驶检测 opencv python

文章目录 0 前言1 课题背景2 实现目标3 当前市面上疲劳驾驶检测的方法4 相关数据集5 基于头部姿态的驾驶疲劳检测5.1 如何确定疲劳状态5.2 算法步骤5.3 打瞌睡判断 6 基于CNN与SVM的疲劳检测方法6.1 网络结构6.2 疲劳图像分类训练6.3 训练结果 7 最后 0 前言 &#x1f525; 优…

06微服务间的通信方式

一句话导读 微服务设计的一个挑战就是服务间的通信问题&#xff0c;服务间通信理论上可以归结为进程间通信&#xff0c;进程可以是同一个机器上的&#xff0c;也可以是不同机器的。服务可以使用同步请求响应机制通信&#xff0c;也可以使用异步的基于消息中间件间的通信机制。同…

Ansible的安装和配置

安装和配置 Ansible 安装所需的软件包 创建名为 /home/greg/ansible/inventory 的静态清单文件&#xff0c;以满足以下要求&#xff1a; 172.25.250.9 是 dev 主机组的成员 172.25.250.10 是 test 主机组的成员 172.25.250.11 和 172.25.250.12 是 prod 主机组的成员 172.2…

halo --- 上传图片服务器错误

文章目录 问题定位过程1、查看日志 报错的是数据库操作异常2、再次上传一张小一点的图片3、检查nginx的配置文件 原因解决 问题 上传图片时&#xff0c;报错服务器错误&#xff08;包括上传附件、博客文章插入图片、上传相册&#xff09; 定位过程 1、查看日志 报错的是数据库…

Element组件浅尝辄止4:Button组件

Button按钮组件&#xff1a;用途太广泛了&#xff0c;几乎参与到了日常开发中的方方面面 1.如何使用&#xff1f;How? //使用type、plain、round和circle属性来定义 Button 的样式。<el-row><el-button>默认按钮</el-button><el-button type"primar…

企业微信 企业内部开发 学习笔记

官方文档 文档 术语介绍 引入pom <dependency><groupId>com.github.binarywang</groupId><artifactId>wx-java-cp-spring-boot-starter</artifactId><version>4.5.3.B</version></dependency>核心代码 推送消息 final WxCp…

【Spring专题】Spring底层核心原理解析

目录 前言阅读导航前置知识Q1&#xff1a;你能描述一下JVM对象创建过程吗&#xff1f;Q2&#xff1a;Spring的特性是什么&#xff1f;前置知识总结 课程内容一、Spring容器的启动二、一般流程推测2.1 扫描2.2 IOC2.3 AOP 2.4 小结三、【扫描】过程简单推测四、【IOC】过程简单推…

分布式 - 消息队列Kafka:Kafka生产者架构和配置参数

文章目录 1. kafka 生产者发送消息整体架构2. Kafka 生产者重要参数配置01. acks02. 消息传递时间03. linger.ms04. buffer.memory05. batch.size06. max.in.flight.requests.per.connection07. compression.type08. max.request.size09. receive.buffer.bytes和 send.buffer.b…

uniapp 微信小程序 封装公共的请求js(api版本)

一、新建api文件夹 在项目目录下创建api文件夹&#xff0c;内放files跟index.js文件夹&#xff0c;files文件夹内放每个页面对应的js请求接口 1、index.js /*** api接口的统一出口*/ const api {}; const requireComponent require.context(./files, false, /\.js$/) requi…

ssm亚盛汽车配件销售业绩管理统源码和论文PPT

ssm亚盛汽车配件销售业绩管理统源码和论文PPT007 开发工具&#xff1a;idea 数据库mysql5.7(mysql5.7最佳) 数据库链接工具&#xff1a;navcat,小海豚等 开发技术&#xff1a;java ssm tomcat8.5 研究的意义 汽车配件销售类企业近年来得到长足发展,在市场份额不断扩大同时…

『PostgreSQL』在 PostgreSQL中创建只读权限和读写权限的账号

&#x1f4e3;读完这篇文章里你能收获到 理解在 PostgreSQL 数据库中创建账号的重要性以及如何进行账号管理掌握在 PostgreSQL 中创建具有只读权限和读写权限的账号的步骤和方法学会使用 SQL 命令来创建账号、为账号分配适当的权限以及控制账号对数据库的访问级别了解如何确保…

HBase-写流程

写流程顺序正如API编写顺序&#xff0c;首先创建HBase的重量级连接 &#xff08;1&#xff09;读取本地缓存中的Meta表信息&#xff1b;&#xff08;第一次启动客户端为空&#xff09; &#xff08;2&#xff09;向ZK发起读取Meta表所在位置的请求&#xff1b; &#xff08;…

MySQL 建表 及其 表的约束类型

目录 步骤&#xff1a; 1、选择数据库(mydb--自定义数据库) 2、建立班级表 3、建立学生表 4、增加约束删除约束 增添约束&#xff1a; 删除约束&#xff1a; 以班级表和学生表为例说明表的约束类型 步骤&#xff1a; 1、选择数据库(mydb--自定义数据库) 2、建立班级表 …

【图像去噪的扩散滤波】基于线性扩散滤波、边缘增强线性和非线性各向异性滤波的图像去噪研究(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

SQL SERVER ip地址改别名

SQL server在使用链接服务器时必须使用别名&#xff0c;使用ip地址就会把192.188.0.2这种点也解析出来 解决方案&#xff1a; 1、物理机ip 192.168.0.66 虚拟机ip 192.168.0.115 2、在虚拟机上找到 C:\Windows\System32\drivers\etc 下的 &#xff08;我选中的文件&a…

maven Jar包反向install到本地仓库

maven Jar包反向install到本地仓库 需求实现 需求 项目打包时报错&#xff0c;缺少一个jar包。 但是在maven仓库都找不到此jar包&#xff0c;其他人提供了这个jar包。 需要把这个jar包install到本地仓库&#xff0c;使项目能正常打包运行。 实现 使用git bash命令执行以下脚…

24聊城大学823软件工程考研

1.软件发展有几个阶段&#xff1f;各有何特征&#xff1f; ①程序设计阶段 硬件特征&#xff1a;价格贵、存储容量小、运行可靠性差。 软件特征&#xff1a;只有程序、程序设计概念&#xff0c;不重视程序设计方法。 ②程序系统阶段。 硬件特征&#xff1a;速度、容量及工作可…

Redis的RDB持久化

Redis是一个键值对数据库服务器&#xff0c;服务器中通常包含着任意个非空数据库&#xff0c;而每个非空数据库中又可以包含任意个键值对&#xff0c;为了方便起见&#xff0c;我们将服务器中的非空数据库以及它们的键值对统称为数据库状态。 举个例子&#xff0c;下图展示了一…