演示demo：https://gitee.com/szrpf/ShaderDemo
新建一个2D空项目，放入一张图片
资源管理器搜“builtin-sprite”，复制粘贴到assets目录下，改个名字
创建一个材质，名字改成和effect同名
材质属性面板，绑定同名effect
点一下保存，这样一个绑定effect的材质(.mtl文件)就制作完成。
把.mtl材质文件拖到Sprite的自定义材质
这样修改Test.effect的代码，就会影响Test.mtl材质，从而影响Sprite
找到Sprite图片下面的Test.mtl，勾选USE TEXTURE就能显示正常的Sprite
vscode里打开Test.effect，先搜索并安装插件Cocos Effect，代码上色很关键
添加一行代码发现图片全变红了，因为glsl语言中vec4(1, 0, 0, 1)代表color(255,0,0,255)
材质面板勾选USE ALPHA TEST，开启alpha测试，就能过滤透明像素
什么是alpha测试呢？
这里引入了alpha-test脚本，想要看这个脚本里的内容，只要复制名字在资源管理器搜索
原来只是对颜色的a进行判断，小于某个临界值就discard（丢弃）
既然这么简单，那就不需要alpha-test了
自己实现alpha-test有很多好处，这里暂不展开。
加个判断条件发现只红了左半，因为uv0.x和uv0.y分别是u和v
UV坐标系跟XY坐标系的区别：
1、左上(0, 0)，右下(1, 1)
2、与图片尺寸无关，取值范围都是 0 ~ 1
符合uv0.x < 0.5这个条件的是图片左半像素点，因此只有他们红了
增加V坐标的判断条件，完全符合预期
现在声明一个变量tx，让uv0.x < tx，这样在外面就能控制红色区域的大小
声明变量分2步：
step 1：最上面，properties里
step 2：frag上面加个uniform，Fs是随便取的名字，不重要
用tx来控制判断条件，发现属性面板并没有出现tx
原来是Test.effect报错了，复制报错信息，粘贴到百度翻译里
意思是uniform漏了一个分号;
记住这个排查effect报错的方法，经常会用到
成功添加了tx，并且修改tx的值，红色区域会跟着改变
tx声明里稍作修改，range数组分别是最小值、最大值、步长
tx属性面板变成可滑动
ty如法炮制
不变红了，改成discard（丢弃）
恭喜你拿到Shader小学毕业证书，拯救世界的任务就交给你了~~
Gitee地址：https://gitee.com/szrpf
EMail地址：27185709@qq.com
推荐链接：
1、【包教包会】Promise?async?await?终于有人把异步解释清楚了
4、【包教包会】CocosCreator3.x全局单例最优解
5、【包教包会】节点扩展（支持原生，附引擎源码查询教程、skew翻页教程）
