Cocos Shade 方便的颜色滤镜库

上一期，我们介绍了 转场效果
https://forum.cocos.org/t/topic/149116/26

有同学就问了，如何结合转场和褪色等效果呢？紧接着，3.0 系列就来了！

体验地址：learncocos.com/shader2
老规矩 13 楼后 上源码

二喵的AIGC 卡牌接近尾声了！
链接：
AIGC制作卡牌1
AIGC制作卡牌2

1. 置灰
引擎内置的也有Grayscale，为了方便我把他加入了Filters的chunk

const vec3 weight = vec3(0.2126, 0.7152, 0.0722);

vec3 Grayscale(in vec3 o){
  float lumin = dot(o, weight);
  vec3 final = vec3(lumin);
  return final;
}

我们用颜色的rgb 和 灰色的系数点乘即可

  vec4 frag () {
    vec4 mainColor = texture(cc_spriteTexture, uv0);
    vec4 mixed = vec4(Grayscale(mainColor.rgb),mainColor.a);
    mainColor = LinearTransition(mainColor,mixed,uv0,1.-color.r,true);
    return mainColor;
   }

配合上期的线性过度，就可以实现褪色的效果

2.0 黑白

黑白的同理

const vec3 bw = vec3(0.3, 0.6, 0.1);

vec3 Blackwhite(in vec3 o){
  vec3 final = vec3(dot(o,bw));
  return final;
}

混合黑白的点乘系数

 vec4 mainColor = texture(cc_spriteTexture, uv0);

    vec4 mixed = vec4(Blackwhite(mainColor.rgb),mainColor.a);

    mainColor = LinearTransition(mainColor,mixed,uv0,1.-color.r,false);
    return mainColor;

调成线性渐变的方向

3.0 反相

vec3 Inverted(in vec3 o){
  vec3 final = vec3(1.)-o;
  return final;
}

求颜色的rgb分别被255相减之后的值

 vec4 frag () {
    vec4 mainColor = texture(cc_spriteTexture, uv0);

    vec4 mixed = vec4(Inverted(mainColor.rgb),mainColor.a);

    mainColor = CircleTransition(mainColor,mixed,uv0,1.-color.r);

    return mainColor;
   }

配合圆形过度

4.0 复古

rgb 和复古的mat3 系数相乘

const mat3 vintage = mat3(0.393, 0.769, 0.189,
                          0.349, 0.686, 0.168,    
                          0.272, 0.534, 0.131);

vec3 Vintage(in vec3 o){
  vec3 final = o*vintage;
  return final;
}

 vec4 frag () {
    vec4 mainColor = texture(cc_spriteTexture, uv0);
    float progression = 1.-color.r;
    vec3 mixed = Vintage(mainColor.rgb);
    mainColor = BurnOut(mainColor, uv0, progression);
    mainColor.rgb = mix(mainColor.rgb,mixed,1.-mainColor.a);
    mainColor.a = 1.;
    return mainColor;
   }

配合燃烧的转场

5.0 曝光

把颜色和曝光系数（计算2次幂）

vec3 Exposure(in vec3 o,float value){
  vec3 final = o*pow(2.0,value);
  return final;
}

6.0 对比度

颜色和灰度系数对比并混合

vec3 Saturation(in vec3 o,float value){
  vec3 final = mix(Grayscale(o),o,value);
  return final;
}