CocosCreator-设置ENABLE_TRANSPARENT_CANVAS后Spine渲染异常-自定义材质

问题背景

引擎版本CocosCreator3.8.4
因为项目需要显示Cocos下方内容，所以设置ENABLE_TRANSPARENT_CANVAS为true。然后就出现了很尴尬的问题。
比如设置web背景色为红色，然后spine下方有一张不透明的图片，发现spine竟然能透过不透明的图片跟web背景色进行混合，也就是spine会变红。
然后就去CocosCreatro社区找答案，发现很多人都遇到了这个问题，官方的回答大概就是这不是引擎的问题，如果想避免可以使用预乘后的spine，然后勾选sp.Skeleton的预乘选项就好了。我让动画重新导出了一份预乘后的spine，发现确实好了。但问题是我们之前有大量的美预乘的spine，如果让动画全部返工，可能就被打成狗头。。。

解决方案

既然这是预乘的问题，那我们或许可以通过自定义材质的方式解决。
已知预乘的spine和不预乘的spine区别在于颜色值是否预乘了透明度。
我们先用不预乘的spine，但是勾选sp.Skeleton的Premultiplied Alpha属性。这时候creator就会认为spine时已经预乘过的，不会跟web背景色进行颜色混合。当然这时候spine渲染出来肯定是不正常的，没事，接下来就交给自定义材质来解决！
1、首先创建一个材质

2、然后需要给材质指定一个着色器程序。我们找到creator内置的spine着色器程序，internal/effects/for2d/builtin-spine，然后拷贝一份到自己的工程里。

将拷贝好的着色器程序指给刚才创建好的材质

3、接下来修改拷贝的着色器程序里的片元着色器，只需要加上一行代码o.rgb *= o.a;4、然后spine使用新的材质渲染

最后完美解决了！！！