cocos creator effect 学习3

这次实现圆形头像遮罩效果
新建effect和material，命名为circleMask

image.png

修改一下代码，让图片左半边为白色，右半边为图片的色彩

image.png

image.png

按照这个思路，以图片中心为原点，画一个圆

image.png

看一下效果，发现是个椭圆，是因为图片的宽高不同，而且搜索了一圈也没找到获取图片长宽的办法，只能手动输入

image.png

和上一节一样，添加两个变量，通过面板赋值

image.png

image.png

修改一下main中的代码，查看效果，变成了圆形，不过中心点有点问题，需要调整一下

image.png

image.png

修改成下方代码，中心正了

image.png

image.png

现在剩下最后有一个问题，圆圈之外应该是透明，而不是白色

image.png

image.png

现在就ok了
下面看看能不能用smoothstep函数替换if，因为现在的效果看起来有一点锯齿，之前看过不知道谁的文章，说 smoothstep(min, max, x)这个方法能减少锯齿

上面的代码可以改成

image.png

看一下smoothstep函数

image.png

修改一下，效果好了很多

image.png

image.png