cocos creator 3.7.2使用shader实现图片扫光特效

news/2024/4/13 10:44:32/文章来源:https://blog.csdn.net/Silent_F/article/details/136538585

简介

功能:图片实现扫光效果
引擎:cocos Creator 3.7.2
开发语言:ts

完整版链接

链接https://lengmo714.top/284d90f4.html

效果图

在这里插入图片描述

shader代码

// Copyright (c) 2017-2020 Xiamen Yaji Software Co., Ltd.
CCEffect %{techniques:- passes:- vert: sprite-vs:vertfrag: sprite-fs:fragdepthStencilState:depthTest: falsedepthWrite: falseblendState:targets:- blend: trueblendSrc: src_alphablendDst: one_minus_src_alphablendDstAlpha: one_minus_src_alpharasterizerState:cullMode: noneproperties:alphaThreshold: { value: 0.5 }# 自定义lightColor: { value: [1.0, 1.0, 0.0, 1.0], editor: {type: color,tooltip: "光束颜色" }}lightCenterPoint: { value: [0.2, 0.2], editor: { tooltip: "光束中心点坐标" }}lightAngle: { value: 36.0, editor: { tooltip: "光束倾斜角度" }}lightWidth: { value: 0.2, editor: { tooltip: "光束宽度" }}enableGradient: { value: 1.0, editor: { tooltip: "是否启用光束渐变。0:不启用,非0:启用" }}cropAlpha: { value: 1.0, editor: { tooltip: "是否裁剪透明区域上的光。0:不启用,非0:启用" }}enableFog: { value: 0.0, editor: { tooltip: "是否启用迷雾效果。0:不启用,非0:启用" }}
}%CCProgram sprite-vs %{precision highp float;#include <builtin/uniforms/cc-global>#if USE_LOCAL#include <builtin/uniforms/cc-local>#endifin vec3 a_position;in vec2 a_texCoord;in vec4 a_color;out vec4 color;out vec2 uv0;vec4 vert () {vec4 pos = vec4(a_position, 1);#if USE_PIXEL_ALIGNMENTpos = cc_matView * pos;pos.xyz = floor(pos.xyz);pos = cc_matProj * pos;#elsepos = cc_matViewProj * pos;#endifuv0 = a_texCoord;color = a_color;return pos;}
}%CCProgram sprite-fs %{precision highp float;#include <builtin/internal/embedded-alpha>#include <builtin/internal/alpha-test>in vec4 color;#if USE_TEXTUREin vec2 uv0;#pragma builtin(local)layout(set = 2, binding = 11) uniform sampler2D cc_spriteTexture;#endif#if ENABLE_LIGHTuniform Light {// 光束颜色vec4 lightColor;// 光束中心点坐标vec2 lightCenterPoint;// 光束倾斜角度float lightAngle;// 光束宽度float lightWidth;// 启用光束渐变// ps:编辑器还不支持 bool 类型的样子,因此用float来定义float enableGradient;// 裁剪掉透明区域上的光// ps:编辑器还不支持 bool 类型的样子,因此用float来定义float cropAlpha;   // 是否启用迷雾效果// ps:编辑器还不支持 bool 类型的样子,因此用float来定义float enableFog;};/*** 添加光束颜色*/vec4 addLightColor(vec4 textureColor, vec4 lightColor, vec2 lightCenterPoint, float lightAngle, float lightWidth) {// 边界值处理,没有宽度就返回原始颜色if (lightWidth <= 0.0) {return textureColor;}// 计算当前 uv 到 光束 的距离float angleInRadians = radians(lightAngle);// 角度0与非0不同处理float dis = 0.0;if (mod(lightAngle, 180.0) != 0.0) {// 计算光束中心线下方与X轴交点的X坐标// 1.0 - lightCenterPoint.y 是将转换为OpenGL坐标系,下文的 1.0 - y 类似float lightOffsetX = lightCenterPoint.x - ((1.0 - lightCenterPoint.y) / tan(angleInRadians));// 以当前点画一条平行于X轴的线,假设此线和光束中心线相交的点为D点// 那么 D.y = uv0.y// D.x = lightOffsetX + D.y / tan(angle)float dx = lightOffsetX + (1.0 - uv0.y) / tan(angleInRadians);// D 到当前 uv0 的距离就是// dis = |uv0.x - D.x|float offsetDis = abs(uv0.x - dx);// 当前点到光束中心线的的垂直距离就好算了dis = sin(angleInRadians) * offsetDis;} else {dis = abs(uv0.y - lightCenterPoint.y);}float a = 1.0 ;// 裁剪掉透明区域上的点光if (bool(cropAlpha)) {a *= step(0.01, textureColor.a);}// 裁剪掉光束范围外的uv(迷雾效果)if (!bool(enableFog)) {a *= step(dis, lightWidth * 0.5);}// 加入从中心往外渐变的效果if (bool(enableGradient)) {a *= 1.0 - dis / (lightWidth * 0.5);}// 计算出扩散范围内,不同 uv 对应的实际扩散颜色值vec4 finalLightColor = lightColor * a;// 混合颜色:在原始图像颜色上叠加扩散颜色//return textureColor * textureColor.a + finalLightColor;#if ENABLE_ORIGINCOLORfinalLightColor = textureColor + textureColor * a;#elsefinalLightColor = textureColor + finalLightColor;finalLightColor.a = textureColor.a;#endifreturn finalLightColor;}#endifvec4 frag () {vec4 o = vec4(1, 1, 1, 1);#if USE_TEXTUREo *= CCSampleWithAlphaSeparated(cc_spriteTexture, uv0);#endifo *= color;ALPHA_TEST(o);#if ENABLE_LIGHTo = addLightColor(o, lightColor, lightCenterPoint, lightAngle, lightWidth);#endifreturn o;}
}%

使用方法

  • 手动创建一个材质
  • 将上面shader代码于材质进行绑定
  • 在ts脚本代码中控制扫光的移动

ts代码

import { _decorator, CCFloat, Component, Node, Sprite, Material, Vec2 } from 'cc';
const { ccclass, property } = _decorator;@ccclass('NewComponent')
export class NewComponent extends Component {@property(Sprite)sprite !: Sprite;@property({ type: CCFloat, tooltip: "光束宽度" })lightWidth = 0.03;@property({ type: CCFloat, tooltip: "时间" })LoopTime = 1.0;@property({ type: CCFloat, tooltip: "TimeInterval" })TimeInterval = 2.0;/**记录时间 */private time: number = 0;/**精灵上的材质 */private material: Material = null!;private startPos = 0;private moveLength = 0;private Speed = 0;private dttime = 0;start() {this.time = 0;this.dttime = 0;this.material = this.sprite.getMaterial(0);this.startPos = -this.lightWidth / 2;this.moveLength = this.lightWidth + 1;this.Speed = this.moveLength / this.LoopTime / 2;this.time = this.startPos;}update(dt: number) {this.time += dt * this.Speed;this.dttime += dt;this.material.setProperty("lightCenterPoint", new Vec2(this.time, this.time));          //设置材质对应的属性if (this.dttime > this.LoopTime + this.TimeInterval) {this.time = this.startPos;this.dttime = 0;}}
}

完整demo

demo下载地址

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

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

相关文章

探索数据结构:单链表的实战指南

✨✨ 欢迎大家来到贝蒂大讲堂✨✨ &#x1f388;&#x1f388;养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; 所属专栏&#xff1a;数据结构与算法 贝蒂的主页&#xff1a;Betty‘s blog 前言 在上一章节中我们讲解了数据结构中的顺序表&#xff0c;知道了顺序…

腾讯云服务器运行yum检测超级慢问题

公司使用腾讯云服务器。最近买的几台服务器使用yum命令安装或 更新软件特别慢。如下图&#xff1a; 从图中看出网络速度极慢。 大约要等5-10分钟检测和更新配置完毕&#xff0c;进入到软件下载界面下载软件速度就快了。 琢磨了一下&#xff0c;连接慢并不是连接不上。查看yum…

【工具】Raycast – Mac提效工具

引入 以前看到同事们锁屏的时候&#xff0c;不知按了什么键&#xff0c;直接调出这个框&#xff0c;然后输入lock屏幕就锁了。 跟我习惯的按Mac开机键不大一样。个人觉得还是蛮炫酷的&#xff5e; 调研 但是由于之前比较繁忙&#xff0c;这件事其实都忘的差不多了&#xff0…

便捷在线导入:完整Axure元件库集合,让你的设计更高效!

Axure元件库包含基本的工具组件&#xff0c;可以使原型绘制节省大量的重复工作&#xff0c;保持整个设计页面的一致性和标准化&#xff0c;同时显得专业。Axure元件库就像我们日常生活中的门把手、自行车踏板和桌子上的螺丝钉&#xff0c;需要组装才能使用。作为一名成熟的产品…

Jmeter接口测试之常用断言

在接口测试中&#xff0c;我们需要检查请求处理结果是否正确。当请求的响应状态码为200&#xff0c;是否表时接口功能正常呢&#xff1f;显然是不正确的。 响应状态为200&#xff0c;只能表明服务处理了你的请求&#xff0c;同时进行了结果返回&#xff1b;但并不能代表处理的…

Redis常用指令,jedis与持久化

1.redis常用指令 第一个是key的常用指令&#xff0c;第二个是数据库的常用指令 前面的那些指令都是针对某一个数据类型操作的&#xff0c;现在的都是对所有的操作的 1.key常用指令 key应该设计哪些操作 key是一个字符串&#xff0c;通过key获取redis中保存的数据 对于key…

数字人ai直播软件突破AI大模型技术,改变未来科技格局!

数字人AI直播软件在AI大模型技术上的突破&#xff0c;将不可避免地改变未来科技格局。这一突破让人们看到了AI技术的无限可能性&#xff0c;并为未来的科技发展打开了新的大门。 AI大模型技术是近年来人工智能领域的一个热点&#xff0c;它通过构建庞大、复杂的神经网络模型&a…

99.qt qml-单例程序实现

在之前讲过: 58.qt quick-qml系统托盘实现https://nuoqian.blog.csdn.net/article/details/121855993 由于,该示例只是简单讲解了系统托盘实现,并没有实现单例程序,所以多次打开后就会出现多个exe出现的可能,本章出一章QML单例程序实现, 多次打开始终只显示出第一个打开…

Docker-完整项目的部署(保姆级教学)

目录 1 手动部署(白雪版) 1.1 创建网络 1.2 MySQL的部署 1.2.1 准备 1.2.2 部署 1.3 Java项目的部署 1.3.1 准备 1.3.1.1 将Java项目打成jar包 1.3.1.2 编写Dockerfile文件 1.3.2 部署 1.3.2.1 将jar包、Dockerfile文件放在linux同一个文件夹下 1.3.2.2 构建镜像 …

BUUCTF-DASBOOK1

[第一章][1.3.5 案例解析][极客大挑战 2019]Http 1 1.启动靶机 2.查看源代码&#xff0c;发现有链接 3.点击链接&#xff0c;跳转页面有提示&#xff0c;意思是&#xff1a;它并不来自于https:/Sycsecret.buuoj.cn 打开hackbar&#xff0c;如图所示&#xff0c;然后执行 4.得到…

docker搭建dashdot

Dashdot 是一个指标收集工具&#xff0c;用于报告 Kubernetes 集群中的资源使用情况。假设你想要使用 Docker 来搭建 Dashdot&#xff0c;你需要制作或获取一个 Dashdot 的 Docker 镜像&#xff0c;然后可以通过 Docker CLI 命令或者使用 Docker Compose 来配置和运行这个容器。…

TCP包头

TCP包头: 1.序号:发送端发送数据包的编号 2.确认号:已经确认接收到的数据的编号(只有当ACK为1时,确认号才有用) TCP为什么安全可靠: 1.在通信前建立三次握手连接 SYN SYNACK ACK SYN是TCP包头的一个字段 tcp.port 端口号 抓包数据 2.在通信过程中通过序…

数据结构八大算法详解

一、直接插入排序 直接插入排序的核心思想就是&#xff1a;将数组中的所有元素依次跟前面已经排好的元素相比较&#xff0c;如果选择的元素比已排序的元素小&#xff0c;则交换&#xff0c;直到全部元素都比较过。 因此&#xff0c;从上面的描述中我们可以发现&#xff0c;直接…

奖励建模(Reward Modeling)实现人类对智能体的反馈

奖励建模&#xff08;Reward Modeling&#xff09;是强化学习中的一个重要概念和技术&#xff0c;它主要用于训练智能体&#xff08;如AI机器人或大型语言模型&#xff09;如何更有效地学习和遵循人类期望的行为。在强化学习环境中&#xff0c;智能体通过尝试不同的行为获得环境…

【外汇天眼】外汇投资策略:区间突破交易系统

RangeBreak系统介绍 RangeBreak区间突破交易系统被市场广泛用于日内交易&#xff0c;曾经连续多年在《美国期货杂志》盈利交易系统排行榜中位居前十。 目前该交易系统也仍旧被很多专业机构和个人投资者所推崇。 交易者可根据自己的交易习惯和性格特点进行改进&#xff0c;并不…

深入分析Android运行时环境ART:原理、特点与优化策略

摘要 随着移动互联网的快速发展&#xff0c;智能手机的性能和功能日益强大&#xff0c;其中Android操作系统因其开放性和灵活性而占据主导地位。Android运行时环境&#xff08;ART&#xff09;作为执行应用程序代码的关键组件&#xff0c;在系统性能和用户体验方面起着至关重要…

Docker创建nacos容器

1.创建数据库tq_nacos,sql文件可以从 下面地址中下载nacos安装包&#xff0c;解压后获取到sql文件nacos-mysql.sql https://github.com/alibaba/nacos/releases/tag/1.1.4 2.拉取镜像&#xff0c;创建简单容器 docker search nacosdocker pull nacos/nacos-serverdocker run…

Android使用WebView打开内嵌H5网页

Android打开外部网页链接请参考上一篇文章 https://public.blog.csdn.net/article/details/136384559 继上篇&#xff0c;新建assets文章夹&#xff0c;将H5的网页资源放到此文件夹下 把H5的资源文件都拷进来 这个时候&#xff0c;将添加打开本地网页的代码&#xff1a; //打…

3.8 动态规划 背包问题

一.01背包 46. 携带研究材料&#xff08;第六期模拟笔试&#xff09; (kamacoder.com) 代码随想录 (programmercarl.com) 携带研究材料: 时间限制&#xff1a;5.000S 空间限制&#xff1a;128MB 题目描述: 小明是一位科学家&#xff0c;他需要参加一场重要的国际科学大会…