cocos 流光shader类似闪电
·

图片导入后 取消图片sprite frame中的packable
这个是加了噪声 通过脚本控制噪声大小 位置
import { _decorator, Component, Node, Sprite } from 'cc';
const { ccclass, property } = _decorator;
@ccclass('NewComponent')
export class NewComponent extends Component {
q:number=0;
qo:number=0;
qoo:number=0;
start() {
}
update(deltaTime: number) {
const me=this.node.getComponent(Sprite);
this.q=(this.q+0.1)%19;
this.qoo=(this.qoo+0.001)%0.2;
const time = Date.now();
this.qo=(this.qo-0.007+1.4)%1.4;
//console.log(this.q);
me.material.setProperty('twistAmount',this.qoo);
me.material.setProperty('glowSpread',this.qo);
me.material.setProperty('waveFrequency', this.q);
}
}
// Effect Syntax Guide: https://docs.cocos.com/creator/manual/zh/shader/index.html
// Copyright (c) 2017-2020 Xiamen Yaji Software Co., Ltd.
// Copyright (c) 2017-2020 Xiamen Yaji Software Co., Ltd.
// Copyright (c) 2017-2020 Xiamen Yaji Software Co., Ltd.
// Copyright (c) 2017-2020 Xiamen Yaji Software Co., Ltd.
// Effect Syntax Guide: https://docs.cocos.com/creator/manual/zh/shader/index.html
// Copyright (c) 2017-2020 Xiamen Yaji Software Co., Ltd.
// Effect Syntax Guide: https://docs.cocos.com/creator/manual/zh/shader/index.html
// Copyright (c) 2017-2020 Xiamen Yaji Software Co., Ltd.
// 最简兼容版光柱Shader
/** glow-simple.effect **/
// Copyright (c) 2017-2020 Xiamen Yaji Software Co., Ltd.
// Copyright (c) 2017-2020 Xiamen Yaji Software Co., Ltd.
// Copyright (c) 2017-2020 Xiamen Yaji Software Co., Ltd.
// Copyright (c) 2017-2020 Xiamen Yaji Software Co., Ltd.
// Effect Syntax Guide: https://docs.cocos.com/creator/manual/zh/shader/index.html
// Copyright (c) 2017-2020 Xiamen Yaji Software Co., Ltd.
// Effect Syntax Guide: https://docs.cocos.com/creator/manual/zh/shader/index.html
// Copyright (c) 2017-2020 Xiamen Yaji Software Co., Ltd.
// 最简兼容版光柱Shader
/** glow-simple.effect **/
CCEffect %{
techniques:
- name: glow
passes:
- vert: vs:vert
frag: fs:frag
blendState:
targets:
- blend: true
blendSrc: src_alpha
blendDst: one_minus_src_alpha
depthStencilState:
depthTest: false
depthWrite: false
rasterizerState:
cullMode: none
properties:
glowColor: { value: [1.0, 0.8, 0.3, 1.0], editor: { type: color } }
glowSpread: { value: 0.04, editor: { range: [0.0, 4, 0.005] } }
glow: { value: 0.03, editor: { range: [0.01,0.1,0.01] } }
twistAmount: { value: 0.1, editor: { range: [0.0, 0.5, 0.01] } }
waveFrequency: { value: 10.0, editor: { range: [1.0, 20.0, 0.1] } }
waveSpeed: { value: 2.0, editor: { range: [0.0, 5.0, 0.1] } }
noiseIntensity: { value: 0.05, editor: { range: [0.0, 0.2, 0.01] } }
glowIntensity: { value: 0.04, editor: { range: [0.0, 4, 0.005] } }
}%
CCProgram vs %{
precision highp float;
#include <cc-global>
#if USE_LOCAL
#include <builtin/uniforms/cc-local>
#endif
in vec3 a_position;
in vec2 a_texCoord;
out vec2 uv;
#if USE_LOCAL
in vec4 a_color;
out vec4 v_color;
#endif
vec4 vert() {
vec4 pos = vec4(a_position, 1);
#if USE_LOCAL
pos = cc_matWorld * pos;
v_color = a_color;
#endif
pos = cc_matViewProj * pos;
uv = a_texCoord;
return pos;
}
}%
CCProgram fs %{
precision highp float;
#include <sprite-texture>
in vec2 uv;
uniform UBO {
vec4 glowColor; // 发光颜色
float glowSpread; // 发光最大半径(基于 UV 坐标体系)
float glowIntensity;
float glow;
float twistAmount; // 扭曲强度
float waveFrequency; // 波形频率
float waveSpeed; // 波速
float noiseIntensity; // 噪声强度
float time; // 时间变量
};
// 简单的噪声函数
float noise(vec2 p) {
return fract(sin(dot(p, vec2(12.9898, 78.233))) * 43758.5453);
}
// 平滑噪声
float smoothNoise(vec2 p) {
vec2 i = floor(p);
vec2 f = fract(p);
float a = noise(i);
float b = noise(i + vec2(1.0, 0.0));
float c = noise(i + vec2(0.0, 1.0));
float d = noise(i + vec2(1.0, 1.0));
vec2 u = f * f * (3.0 - 2.0 * f);
return mix(a, b, u.x) + (c - a) * u.y * (1.0 - u.x) + (d - b) * u.x * u.y;
}
vec4 frag () {
vec4 o = texture(cc_spriteTexture, uv);
vec4 original = o;
// 固定光柱位置
float beamPos = mod(glowSpread - 0.3, 3.0);
// 添加扭曲效果
vec2 distortedUV = uv;
// 1. 正弦波扭曲
float wave = sin(uv.y * waveFrequency + time * waveSpeed) * twistAmount;
distortedUV.x += wave;
// 2. 噪声扭曲
float noiseValue = smoothNoise(vec2(uv.y * 10.0 + time, time * 0.5));
distortedUV.x += (noiseValue - 0.5) * noiseIntensity;
// 3. 螺旋扭曲(可选)
float angle = uv.y * 6.28318 * 2.0 + time * 1.5;
distortedUV.x += cos(angle) * twistAmount * 0.3;
distortedUV.y += sin(angle) * twistAmount * 0.1;
// 计算到扭曲后光柱的距离
float dist = abs(distortedUV.x - beamPos);
if (dist < glow) {
// 计算光柱强度
float strength = 1.0 - dist / glow;
// 根据扭曲程度调整颜色
float twistFactor = abs(wave) * 2.0;
vec3 twistColor = mix(glowColor.rgb, vec3(1.0, 0.5, 0.2), twistFactor);
// 应用发光效果
o.rgb = original.rgb + twistColor * strength * glowIntensity;
// 扭曲区域透明度更高
o.a = max(original.a, strength * (1.0 - twistFactor * 0.3));
}
return o;
}
}%
更多推荐
所有评论(0)