Cocos Shader 颜色渐变效果

最新推荐文章于 2025-03-30 07:45:00 发布

清木Moyu

最新推荐文章于 2025-03-30 07:45:00 发布

阅读量2.6k

点赞数 1

分类专栏： Cocos Shader 文章标签： shader cocos

本文链接：https://blog.youkuaiyun.com/sun124608666/article/details/118929751

版权

Cocos Shader 专栏收录该内容

3 篇文章

订阅专栏

美术设计了个渐变的文字，发现cocos creater里没有这个效果，所以用shader实现

效果：

代码如下

CCEffect %{
  techniques:
  - passes:
    - vert: vs
      frag: fs
      blendState:
        targets:
        - blend: true
      rasterizerState:
        cullMode: none
      properties:
        texture: { value: white }
        alphaThreshold: { value: 0.5 }
        angle: { 
          value: 0.0,
          editor: { tooltip: "角度", range: [0.0, 360.0] }
        }
        offset: { 
          value: 0.0,
          editor: { tooltip: "偏移" }
        }
        uvRatio: { 
          value: 1.0,
          editor: { tooltip: "比例" }
        }
        beginColor: { 
          value: [1, 1, 1, 1],
          editor: { type: color, tooltip: "初始颜色" }
        }
        endColor: { 
          value: [1, 1, 1, 1],
          editor: { type: color, tooltip: "结束颜色" }
        }
}%


CCProgram vs %{
  precision highp float;

  #include <cc-global>
  #include <cc-local>

  in vec3 a_position;
  in vec4 a_color;
  out vec4 v_color;

  #if USE_TEXTURE
  in vec2 a_uv0;
  out vec2 v_uv0;
  #endif

  void main () {
    vec4 pos = vec4(a_position, 1);

    #if CC_USE_MODEL
    pos = cc_matViewProj * cc_matWorld * pos;
    #else
    pos = cc_matViewProj * pos;
    #endif

    #if USE_TEXTURE
    v_uv0 = a_uv0;
    #endif

    v_color = a_color;

    gl_Position = pos;
  }
}%


CCProgram fs %{
  precision highp float;
  
  #include <alpha-test>
  #include <texture>

  in vec4 v_color;
  
  #if USE_TEXTURE
  in vec2 v_uv0;
  uniform sampler2D texture;
  #endif

  uniform Factor {
      float angle;
      float offset;
      float uvRatio;
  };

  uniform Constant {
      vec4 beginColor;
      vec4 endColor;
  };

  void main () {
    vec4 o = vec4(1, 1, 1, 1);

    #if USE_TEXTURE
      CCTexture(texture, v_uv0, o);
    #endif

    o *= v_color;

    ALPHA_TEST(o);

    float angleInRadians = radians(angle); 
  	float ratio = clamp((v_uv0.y * cos(angleInRadians) + v_uv0.x * sin(angleInRadians) + offset) * uvRatio, 0.0, 1.0);
	  float beginRatio = 1.0 - ratio;
  	float endRatio = ratio;
  
  	gl_FragColor = vec4(
  		o.r * (beginColor.r * beginRatio + endColor.r * endRatio),
  		o.g * (beginColor.g * beginRatio + endColor.g * endRatio),
  		o.b * (beginColor.b * beginRatio + endColor.b * endRatio),
  		o.a * (beginColor.a * beginRatio + endColor.a * endRatio)
  	);
    
  }
}%