前言

看标题挺牛逼的，那么到底是个啥玩意呢。往下读

效果展示

image

正文

1.说明

看完效果大家知道是啥玩意了嘛。实际效果就是利用shader实现一个透明度变化的效果，变化规则是根据摄像机的距离，透明度从1到0的一个变化过程

2.实现

先给大家上代码：

CCEffect %{
  techniques:
  - name: opaque
    passes:
    - vert: general-vs:vert # builtin header
      frag: unlit-fs:frag
      properties: &props
        mainTexture:    { value: white }
        mainColor:      { value: [1, 1, 1, 1], editor: { type: color } }
  - name: transparent
    passes:
    - vert: general-vs:vert # builtin header
      frag: unlit-fs:frag
      blendState:
        targets:
        - blend: true
          blendSrc: src_alpha
          blendDst: one_minus_src_alpha
          blendSrcAlpha: src_alpha
          blendDstAlpha: one_minus_src_alpha
      properties: *props
}%

CCProgram unlit-fs %{
  precision highp float;
  #include <output>
  #include <cc-global>

  in vec2 v_uv;
  in vec3 v_position;
  uniform sampler2D mainTexture;

  uniform Constant {
    vec4 mainColor;
  };

  vec4 frag () {
    float dis=distance(cc_cameraPos.xyz,v_position);
    //随着距离增大，透明度变小
    float apha=1.0-(dis-5.0)/50.0;;
    vec3 color=mainColor.xyz;
    return CCFragOutput(vec4(color,apha) * texture(mainTexture, v_uv));
  }
}%

看完代码，是不是会发现，以上代码和你新创建的一个effec文件相比，只有4行代码不一样。

  //cc_cameraPos  creator内部提供的，相机的位置，注意需要导入#include <cc-global>
  //逐个顶点判断与摄像机的距离
  float dis=distance(cc_cameraPos.xyz,v_position);
  //随着距离增大，透明度变小
  //5.0  表示从距离摄像机5.0后开始透明度变化
  //50.0表示透明度从1-0的距离为50
  //两个参数大家都可以修改
  float apha=1.0-(dis-5.0)/50.0;;
  vec3 color=mainColor.xyz;
  return CCFragOutput(vec4(color,apha) * texture(mainTexture, v_uv));

注：
大家注意了，从代码中发现我们是有两个pass：opaque和transparent，两个的区别在于transparent继承了opaque的特性，但是transparent开启了混合模式，在这里也就是允许改变透明度，而opaque是不可以设置透明度的。

3.地址

• gitee：
  玩游戏时发现的，不在计划之内，所以这节没有体验demo
• 微信公众号：搬砖小菜鸟