在这里插入图片描述
图片导入后 取消图片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;
  }
}%














Logo

北京人形旗下天工造物具身智能开源社区,聚焦具身天工与慧思开物两大平台

更多推荐