请教，颜色渐变effect效果不太对

[450958824 (SpriteWing)]

• Creator 版本：3.3.2

• 目标平台：Chrome

自己写了一个颜色渐变的Effect，编辑器里看效果是对的，但是到Chrome上预览效果不太对，请问是我哪里写的有问题吗，不太会

CCEffect %{
  techniques:
  - name: opaque
    passes:
    - vert: vs:vert
      frag: fs:frag
      properties: &props
        beginColor:      { value: [1, 1, 1, 1], editor: { type: color } }
        endColor:      { value: [1, 1, 1, 1], editor: { type: color } }
}%

CCProgram vs %{
  precision highp float;
  #include <cc-global>
  in vec3 a_position;
  in vec2 a_texCoord;

  out vec4 color;
  out vec2 v_uv;

  vec4 vert () {
    vec4 pos = vec4(a_position, 1);
    pos = cc_matViewProj * pos;
    v_uv = a_texCoord;

    return pos;
  }
}%

CCProgram fs %{
  precision highp float;
  #include <output>

  in vec2 v_uv;

  uniform Constant {
    vec4 beginColor;
    vec4 endColor;
  };

  vec4 frag () {
    vec4 col = vec4(1,1,1,1);
    col.r = beginColor.r + (endColor.r - beginColor.r)*v_uv.y;
    col.g = beginColor.g + (endColor.g - beginColor.g)*v_uv.y;
    col.b = beginColor.b + (endColor.b - beginColor.b)*v_uv.y;
    return CCFragOutput(col);
  }
}%

[971586529 (ivanup)]

如果是2d 上使用的图片 需要取消 packable， 不知道3D是不是相同的原因。

[muxiandong]

这个问题，大概率是用到了引擎的默认资源，图片的package 检查一下，需要去除勾选的。

[450958824 (SpriteWing)]

修改了一下，效果一致了，但是跟我期望的还是不一样

 CCEffect %{
      techniques:
      - name: opaque
        passes:
        - vert: vs:vert
          frag: fs:frag
          properties: &props
            beginColor:      { value: [1, 1, 1, 1], editor: { type: color } }
            midColor:      { value: [1, 1, 1, 1], editor: { type: color } }
            endColor:      { value: [1, 1, 1, 1], editor: { type: color } }
    }%

    CCProgram vs %{
      precision highp float;
      #include <cc-global>
      in vec3 a_position;

      out vec4 color;
      out vec2 v_uv;

      vec4 vert () {
        vec4 pos = vec4(a_position, 1);
        pos = cc_matViewProj * pos;
        v_uv = pos.xy;

        return pos;
      }
    }%

    CCProgram fs %{
      precision highp float;
      #include <output>

      in vec2 v_uv;

      uniform Constant {
        vec4 beginColor;
        vec4 midColor;
        vec4 endColor;
      };

      vec4 frag () {
        vec4 col = vec4(1,1,1,1);
        if(v_uv.y>=0.5){
          col.rgb = midColor.rgb + (beginColor.rgb - midColor.rgb)*(2.0*v_uv.y-1.0);
        }else{
          col.rgb = endColor.rgb + (midColor.rgb - endColor.rgb)*v_uv.y*2.0;
        }
        return col;
      }
    }%

我希望是一个三色线性渐变，比如从R->G->B，但是实际效果是只有半个屏幕是3色渐变，另外半个是一个纯色，哪里的问题啊…

[450958824 (SpriteWing)]

@czt.saisam
召唤大佬

[siying.huang (LanniF)]

这里你的v_uv获取有问题，

这里用cc_matViewProj算出来的pos不是在你这个纹理的uv坐标系，我参考了一下默认sprite用的effect，这部分uv的获取是用a_texCoord，这样效果就没错。

CCProgram vs %{

  precision highp float;

  #include <cc-global>

  in vec3 a_position;

  in vec2 a_texCoord;

  out vec4 color;

  out vec2 v_uv;

  vec4 vert () {

    vec4 pos = vec4(a_position, 1);

    pos = cc_matViewProj * pos;

    v_uv = a_texCoord;

    return pos;

  }

}%

[450958824 (SpriteWing)]

@siying.huang

in vec2 a_texCoord;

我去试试，先谢过大佬

[450958824 (SpriteWing)]

大佬，用你的方式没有问题，但是还需要咨询一下，就是感觉渐变不自然，尤其是绿色那里，这个是我写的有问题吗，或者有什么更好的渐变方式吗

[siying.huang (LanniF)]

我不是大佬，我也是刚刚接触shader的，这部分你看下用mix这个函数会不会好一些
可以看看这个 The Book of Shaders: color

[450958824 (SpriteWing)]

是会自然一些，但是会跟美术期望的效果有些区别

[siying.huang (LanniF)]

这个就得你自己调了，你可以将y坐标的阈值，和mix的比例设置为uniform，然后去调