cocos图片的预乘以及图片混合渲染模式

 

传统的后乘alpha算法在shader或者混合配置中的代码如下：

blend(source, dest) = (source.rgb * source.a) + (dest.rgb * (1 – source.a))

经过预乘后的图片在shader或者混合配置中的代码如下：

blend(source, dest) = (source.rgb * 1) + (dest.rgb * (1 – source.a))

相当于预乘后的图片在进行混合渲染时就不需要再乘以图片的alpha值了，少了一层计算，可以略微提高渲染效率。

上述代码可以source就是当前要渲染的图片颜色，dest是目标图片颜色，也就是当前已经渲染在该位置的图片颜色，可以理解为是背景图的颜色。就相当于两个图片在同一个位置都有自己的颜色，如果两个图片都不透明，那么肯定是只显示上面的图片颜色，下面的被覆盖，如果图片未透明或者半透明，就需要有一个算法可以根据两个图片对应颜色的具体色值，来计算出混合后的最终颜色，也就是blend算法。传统算法是blend(source, dest) = (source.rgb * source.a) + (dest.rgb * (1 – source.a))

当前要渲染的颜色*当前颜色alpha值(alpha为0就是全透明，为1是完全不透明) + 背景颜色 * (1 - 当前颜色alpha值)。这是一种根据当前要渲染的颜色alpha值来线性的让两个颜色混合累加，当前颜色透明度越高，那么当前颜色对最终颜色的影响就越小。

cocos creator中sprite组件可以调整混合模式，如下图：