当前位置: 首页 > news >正文

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

简介

功能:图片实现扫光效果
引擎: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.lryc.cn/news/313532.html

相关文章:

  • 【C++杂货铺】详解string
  • 算法刷题day20:二分
  • 【Spring云原生】Spring Batch:海量数据高并发任务处理!数据处理纵享新丝滑!事务管理机制+并行处理+实例应用讲解
  • docker ubuntu20.04 安装教程
  • 防御保护----IPSEC VPPN实验
  • 音视频数字化(视频线缆与接口)
  • 爬虫实战——巴黎圣母院新闻【内附超详细教程,你上你也行】
  • mysql的语法总结2
  • 一度电竟然可以做这么多事情!
  • 【Go】golang值交换,指针
  • 共享WiFi软件哪家强?2024年共享wifi项目排名为你揭晓!
  • Hudi入门
  • LORA: LOW-RANK ADAPTATION OF LARGE LAN-GUAGE MODELS
  • 使用Pytorch导出自定义ONNX算子
  • unity-urp:视野雾
  • Spring Cloud Gateway介绍及入门配置
  • Thingsboard本地源码部署教程
  • 【MySQL 系列】MySQL 起步篇
  • C++的成员初始化列表
  • 为什么TikTok视频0播放?账号权重提高要重视
  • element---tree树形结构(返回的数据与官方的不一样)
  • Spring Boot工程集成验证码生成与验证功能教程
  • Bert Encoder和Transformer Encoder有什么不同
  • 外汇天眼:频繁交钱却无法出金,只因误入假冒HFM惨成冤大头!
  • Linux-信号3_sigaction、volatile与SIGCHLD
  • STM32 | STM32时钟分析、GPIO分析、寄存器地址查找、LED灯开发(第二天)
  • Python常用语法汇总(一):字符串、列表、字典操作
  • Token的奥秘--一起学习吧之token
  • FlinkCDC快速搭建实现数据监控
  • 应急布控球远程视频监控方案:视频监控平台EasyCVR+4G/5G应急布控球