cocos魔法阵shader

视频演示在这

go 复制代码
// Effect Syntax Guide: https://docs.cocos.com/creator/manual/zh/shader/index.html

// Effect Syntax Guide: https://docs.cocos.com/creator/manual/zh/shader/index.html

// Effect Syntax Guide: https://docs.cocos.com/creator/manual/zh/shader/index.html

// Effect Syntax Guide: https://docs.cocos.com/creator/manual/zh/shader/index.html

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:
        lightColor: { value: [1.0, 0.0, 0.0, 1.0], editor: { type: color } }
        lightIntensity: { value: 3.0, editor: { slide: true, range: [1, 10] } }
        glowsize: { value: 0.0, editor: { slide: true, range: [0, 10] } }
        pulseSpeed: { value: 2.0, editor: { slide: true, range: [0, 5] } }
        isBlinking: { value: 0, editor: { type: boolean } }
}%

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>
  #include <cc-global> // 添加cc_time支持
  in vec2 uv;

  uniform sampler2D mainTexture;
  uniform UBO {

    vec4 lightColor;
    float lightIntensity;
    float pulseSpeed;
    float time;
    float isBlinking;

    float glowsize;
  };


  vec4 frag () {
    // 旋转设置
    // 图片旋转
    // 1. 旋转
    // 1. 旋转
    // 1. 旋转
    float angle = cc_time.x * 2.0;
    vec2 center = vec2(0.5);
    vec2 uvCentered = uv - center;
    float cosA = cos(angle);
    float sinA = sin(angle);
    mat2 rotation = mat2(cosA, -sinA, sinA, cosA);
    vec2 rotatedUV = (rotation * uvCentered) + center;
    
    // 2. 采样纹理
    vec4 texColor = texture(cc_spriteTexture, rotatedUV);
    
    // 如果没有颜色就不处理(完全透明)
    if (texColor.a < 0.01) return vec4(0.0);
    
    // 3. 计算发光效果
    
    // 3.1 计算距离中心位置(用于明暗变化)
    float dist = length(uvCentered);
    
    // 3.2 使用时间控制动画
    float t = cc_time.x;
    
    // 3.3 整体脉冲:所有部分随脉搏变亮变暗 ★ 提高基础亮度
    float basePulse;
    if (isBlinking > 0.5) {
      // 闪烁模式 ★ 提高亮部
      basePulse = sin(t * pulseSpeed) > 0.0 ? 1.0 : 0.4;  // 0.8→1.0,0.2→0.4
    } else {
      // 呼吸模式 ★ 提高整体亮度
      basePulse = sin(t * pulseSpeed) * 0.3 + 0.8;  // 0.7→0.8
    }
    
    // 3.4 环状方向性明暗变化 ★ 提高亮度
    float angleFromCenter = atan(uvCentered.y, uvCentered.x);
    float ringWave = sin(angleFromCenter * 4.0 + t * pulseSpeed) * 0.5 + 0.7;  // 0.6→0.7
    
    // 3.5 径向波纹理(由外向内收缩)
    float radialWave = 1.0 - mod(t * pulseSpeed * 0.5 + dist, 1.0);
    radialWave = pow(radialWave, 2.0) * 1.2;  // ★ 增强
    
    // 综合所有明暗变化 ★ 提高乘数
    float brightness = basePulse * mix(1.0, ringWave, 0.4) * mix(1.0, radialWave, 0.6);
    brightness = brightness * lightIntensity * 0.35;  // 0.2→0.35 ★★★ 提高
    
    // ★★★ 提高亮度范围
    brightness = clamp(brightness, 0.5, 2.5);  // 0.2→0.5,1.2→2.5
    
    // 4. 计算颜色
    
    // 4.1 使用alpha值控制颜色效果
    float colorMix = texColor.a;
    
    vec3 outputColor;
    if (isBlinking > 0.5) {
      outputColor = lightColor.rgb * (1.0 + basePulse * 0.5);  // 0.8→1.0,0.4→0.5 ★ 提高
    } else {
      outputColor = lightColor.rgb * brightness * 1.2;  // ★ 额外乘数
    }
    
    // 4.2 根据距离调整颜色饱和度 ★ 减少衰减
    float saturation = 1.0 - dist * 0.2;  // 0.3→0.2
    outputColor = mix(outputColor * 0.8, outputColor, saturation);  // 0.6→0.8
    
    // 4.3 边缘加亮 ★ 增强
    float edgeGlow = 1.0 - smoothstep(0.4, 0.5, dist);
    outputColor = mix(outputColor, outputColor * 1.4, edgeGlow * 0.4);  // 1.2→1.4,0.3→0.4
    
    // 4.4 用发光强度调整 ★ 提高系数
    outputColor = outputColor * glowsize * 1.5;  // 添加乘数
    
    // 4.5 ★ 添加中心区域加亮
    float centerBoost = 1.0 - smoothstep(0.0, 0.3, dist);
    outputColor = outputColor * (1.0 + centerBoost * 0.3);
    
    // 5. 合成输出
    
    float originalLuminance = (texColor.r + texColor.g + texColor.b) / 3.0;
    
    // ★★ 关键:取消乘法,改用加法或提高系数
    // 原方法:finalColor = outputColor * originalLuminance(会变暗)
    // 新方法:加法或更高乘法
    
    // 方案1:直接加法,保留原图白色
    vec3 finalColor1 = outputColor + texColor.rgb * 0.8;
    
    // 方案2:高系数的乘法
    vec3 finalColor2 = outputColor * (originalLuminance + 0.5) * 1.5;  // 提高系数
    
    // 选择更亮的方案
    vec3 finalColor = max(finalColor1, finalColor2);
    
    // ★ 添加额外光效
    float extraGlow = pow(texColor.a, 1.2) * brightness * 0.6;
    finalColor += lightColor.rgb * extraGlow;
    
    // 透明度:完全保留原始透明度
    float finalAlpha = texColor.a;
    
    // ★★ 最终亮度增强
    finalColor = finalColor * (1.0 + brightness * 0.2);
    
    // ★ 提高颜色最大值限制
    finalColor = min(finalColor, vec3(2.5, 2.5, 2.5));  // 提高上限
    
    return vec4(finalColor, finalAlpha);


  }


}%
相关推荐
weixin_409383121 天前
cocos抛物线掉落装备 游戏中的抛物线应用x²=-2py 开口向下
游戏·cocos·抛物线
weixin_409383122 天前
cocos 按钮光环shader
shader·cocos
两水先木示2 天前
【Unity】对指定物体进行描边——模板测试法
unity·游戏引擎·shader·外描边
avi91114 天前
Unity毛玻璃渲染模糊渲染Shader数学入门
unity·aigc·图形学·shader·hlsl
怪力左手12 天前
renderdoc使用
shader·glsl·render
Huanzhi_Lin23 天前
图形渲染管线流程笔记
笔记·图形渲染·shader·glsl
CreasyChan24 天前
ShaderLab 基本结构详解
shader
CreasyChan25 天前
Unity Shader 入门指南
unity·c#·游戏引擎·shader
dzj20211 个月前
Unity的旁门左道用法(科学计算):用shader调用GPU做k线MA5的计算——DuckDB + Compute Shader
unity·金融·gpu·shader·量化·compute shader