前言
看标题挺牛逼的，那么到底是个啥玩意呢。往下读
效果展示
正文
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 - 微信公众号：搬砖小菜鸟
扫码关注公众号，更多内容任你看
