Cocos Creator 3.8.x 制作模糊效果(比如游戏弹窗需要的模糊效果)

接着上一个讨论的话题,关于3.8.x的后效,今天来分享自定义后效来制作模糊效果,并将他应用到弹窗中做背景,话不多说开整。

一:最终效果

首先咱们来看官网自定义后效怎么搞的,从它的实例开始:自定义后效

二:定义PostProcessSettings给节点提供资源(通过编辑器修改参数的方式) 

首先自定义后效pass,需要一个组件用来我们可以修改具体的参数,传入具体的数据,就要用到postProcess.PostProcessSetting这个类:

import { _decorator, gfx, postProcess, Material, EffectAsset, renderer, rendering, Vec4, Camera, CachedArray, Sprite } from 'cc';
const { Format } = gfxconst { ccclass, property, menu, executeInEditMode } = _decorator;/*** * 就是一个普通的组件 自定义后处理节点的资源和行为* */
@ccclass('GaussianBlur')
@menu('PostProcess/GaussianBlur')
@executeInEditMode
export class GaussianBlur extends postProcess.PostProcessSetting {/** 3d场景的摄像机 */@property(Camera)mainCamera: Camera = null;/* 需要把后效产生的图片输出到特定的Sprite上 */@property(Sprite)preview: Sprite = null;/** 模糊材质 */@property(EffectAsset)_effectAsset: EffectAsset | undefined@property(EffectAsset)get effect() {return this._effectAsset;}set effect(v) {/** 根据传入的模糊效果shader创建一个材质 当然你也可以在编辑器中拖入一个已经绑定模糊shader的材质 */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);}}
}

 三:定义接收输入定向输出的节点 SettingPass

既然是自定义管线,你做的效果总得有一个流入流出的节点吧,就相当于blender里面的材质节点,虚幻的蓝图,你当前的效果是需要依赖上一个流程中的输入才可以正常工作的,当然你处理完了还要将处理的结果返回到渲染管线当中去利用,再处理等等操作。所以现在需要定义一个这样一个节点,反应在cocos中就是SettingPass类:我们定义自己的SettingPass类

import { Camera, RenderTexture, SpriteFrame, Texture2D, UITransform, Vec2, Vec3, gfx, postProcess, renderer, rendering } from "cc";
import { GaussianBlur } from "./GaussianBlur";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'];private _blurPreview(camera: renderer.scene.Camera) {const setting = this.setting;let w, h;[w, h] = [camera.window.width, camera.window.height];let frame = new SpriteFrame();let texture = new RenderTexture();texture.initialize({name: "s",w

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

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

相关文章

搭建Zabbix监控系统

简介 在企业网络运维过程中,管理员必须随时关注各服务器和网络的运行状况,以便及时发现问题.尽可能减少故障的发生。当网络中的设备,服务器等数量较多时,为了更加方便、快捷地获得各种监控信息,通常会借助于一些集中监测软件。 一…

FISCO BCOS区块链平台上的智能合约压力测试指南

引言 在当今的分布式系统中,区块链技术因其去中心化、安全性和透明性而备受关注。随着区块链应用的不断扩展,对其性能和稳定性的要求也越来越高。因此,对区块链网络进行压力测试显得尤为重要。 目录 引言 1. 配置FISCO BCOS节点 2. 安装和…

Windows安装MySQL详细教程

1.1 下载MySQL压缩包 官网下载链接[点击跳转] 按图中选择,然后点击【Download】 点击图中箭头所指方向直接下载 1.2 解压下载好的压缩包后找到【bin】文件夹,并记下文件路径(下文将以路径 D:\mysql-8.0.36-winx64\bin 为例) 1.…

【Python】成功解决TypeError: ‘int‘ object is not iterable

【Python】成功解决TypeError: ‘int’ object is not iterable 🌈 个人主页:高斯小哥 🔥 高质量专栏:Matplotlib之旅:零基础精通数据可视化、Python基础【高质量合集】、PyTorch零基础入门教程👈 希望得到…

SmartX 携手 openGauss 社区发布联合方案评测与性能最佳实践 | 附优化方法与测试数据

近日,北京志凌海纳科技有限公司(以下简称 “SmartX”)携手 openGauss 社区完成了 openGauss 数据库基于 SmartX 超融合平台(SMTX OS)和 SmartX 分布式存储平台(SMTX ZBS)的性能测试和调优。 结…

Python-sklearn-LinearRegression

目录 1 手动实现/使用sklearn实现线性回归训练 1.1 单特征线性回归(One Feature) 1.2 多特征线性回归(Multiple Features) 1.3 多项式线性回归(Polynomial) 1 手动实现/使用sklearn实现线性回归训练 1…

flowable的java class task,也叫服务任务

源码地址12级程序猿-新年正当红/flowable-ui和服务任务 启动flowable-ui-app 浏览器输入下面的地址 http://localhost:8080/flowable-ui/#/ 在服务任务这里设置java类的路径 com.dmg.flowabledemo.task.MyServiceTask 当请假任务完成之后,自动触发这个服务任务…

Android开发社招面试总结,Android程序员面试必备的知识点

导语 学历永远是横在我们进人大厂的一道门槛,好像无论怎么努力,总能被那些985,211 按在地上摩擦! 不仅要被“他们”看不起,在HR挑选简历,学历这块就直接被刷下去了,连证明自己的机会也没有,学…

关于Java并发多线程的一点思考

写在开头 在过去的2023年双11活动中,天猫的累计访问人次达到了8亿,京东超60个品牌销售破10亿,直播观看人数3.0亿人次,订单支付频率1分钟之内可达百万级峰值,这样的瞬间高并发活动,给服务端带来的冲击可想而…

HplusAdmin ASP.NET基本权限管理系统

HplusAdmin 介绍 一套ASP.NET WebForm(不用控件) hplusasp.netsqlserver 基本权限管理系统 http://hplus.baocaige.top 暂不开源,需要的滴滴或者留下邮箱!!! 账号 普通账号 账号:user 密码:Aa123456普…

swagger在java中的基本使用

自动生成接口文档&#xff0c;和在线接口测试的框架。 导入依赖 <!-- knife4j对swagger进行一个封装--><dependency><groupId>com.github.xiaoymin</groupId><artifactId>knife4j-spring-boot-starter</artifactId><versi…

阻塞队列、生产者消费者模型、阻塞队列的模拟实现等干货

文章目录 &#x1f490;生产者消费者模型&#x1f490;模拟实现阻塞队列&#x1f4a1;注意点一&#x1f4a1;注意点二 阻塞队列是一种“特殊”的数据结构&#xff0c;但是也遵循队列的“先进先出”特性&#xff0c;它的特殊在于&#xff1a; 阻塞队列的两个特性&#xff1a; 1…

【C++入门】引用

目录 6.引用 6.1引用概念 6.2引用的写法 6.3引用的特性 6.4常引用 6.5引用的使用场景 6.5.1引用做参数 6.5.2引用做返回值❗❗ &#x1f387;值做返回值 &#x1f387;引用做返回值 &#x1f387;引用在顺序表做返回值 6.5.3传值、传引用效率比较(参数&#xff0…

【OpenGL的着色器03】内置变量和函数(gl_Position等)

目录 一、说明 二、着色器的变量 2.1 着色器变量 2.2 着色器内置变量 三、最常见内置变量使用范例 3.1 常见着色器变量 3.2 示例1&#xff1a; gl_PointSize 3.3 示例2&#xff1a;gl_Position 3.4 gl_FragColor 3.5 渲染点片元坐标gl_PointCoord 3.6 gl_PointCoo…

Android Gradle开发与应用 (三) : Groovy语法概念与闭包

1. Groovy介绍 Groovy是一种基于Java平台的动态编程语言&#xff0c;与Java是完全兼容&#xff0c;除此之外有很多的语法糖来方便我们开发。Groovy代码能够直接运行在Java虚拟机&#xff08;JVM&#xff09;上&#xff0c;也可以被编译成Java字节码文件。 以下是Groovy的一些…

图像处理与视觉感知---期末复习重点(1)

文章目录 一、概述二、图像处理基础2.1 视觉感知要素2.2 像素间的一些基本关系2.2.1 相邻像素2.2.2 连通性2.2.3 距离度量 2.3 基本坐标变换2.4 空间变换与灰度值 一、概述 1. 图像的概念及分类。  图像是用各种观测系统以不同形式和手段观测客观世界而获得的、可以直接或间接…

nodejs版本管理工具nvm安装和环境变量配置

1、下载nvm.exe https://github.com/coreybutler/nvm-windows/releases2、安装 1.在D盘根目录新建一个dev文件夹&#xff0c;在dev里面再新建一个nodejs。 2.双击下载好的nvm.exe 修改文件路径&#xff0c;且路径中不能有中文 3.安装完成后在D:\dev\nvm打开settings.txt&…

kerberos学习系列一:原理

1、简介 Kerberos 一词来源于古希腊神话中的 Cerberus —— 守护地狱之门的三头犬。 Kerberos 是一种基于加密 Ticket 的身份认证协议。Kerberos 主要由三个部分组成&#xff1a;Key Distribution Center (即KDC)、Client 和 Service。 优势&#xff1a; 密码无需进行网络传…

Docker数据卷篇

1. 数据卷&#xff08;容器数据管理&#xff09; 引言&#xff1a;在之前的nginx案例中&#xff0c;修改nginx的html页面时&#xff0c;需要进入nginx内部。并且因为没有编辑器&#xff0c;修改文件也很麻烦。 这就是因为容器与数据&#xff08;容器内文件&#xff09;耦合带…

Scrapy与分布式开发(3):Scrapy核心组件与运行机制

Scrapy核心组件与运行机制 引言 这一章开始讲解Scrapy核心组件的功能与作用&#xff0c;通过流程图了解整体的运行机制&#xff0c;然后了解它的安装与项目创建&#xff0c;为后续实战做好准备。 Scrapy定义 Scrapy是一个为了爬取网站数据、提取结构性数据而编写的应用框架…