首页 > 分享 > cocos图片的预乘以及图片混合渲染模式

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

萌宠菠菠乐园
2026-03-13 12:09

传统的后乘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组件可以调整混合模式，如下图：

其中Blend就是混合方法，src blend factor是源图片混合因子，这里取值SRC_ALPHA其实就相当于公式里的source.a，就是源图片颜色需要乘以source.a。dst blend factor是目标图片混合因子，也就是背景图片混合因子，这里的取值ONE_MINUS_SRC_ALPHA其实就是字面意思:1 - source.a，很好理解。那么取值为ONE就是1，这真的是我见过最通俗易懂的命名方式了。

有时候cocos creator渲染半透明图片，会出现黑边问题，解决方案就是给图片资源设置预乘，然后src blend factor调整为ONE。出现黑边其实主要还是因为图片在实际屏幕上进行渲染要进行一定比例的缩放导致的。假设图片本身是100 * 100像素，也就是由100*100的矩阵描述的数据。现在要渲染在1000 * 1000像素的屏幕区域，那就需要放大10倍，那么就需要进行空白像素的颜色填补工作，也就是计算机自动脑补缺少的像素是什么颜色，一般使用linear方法进行线性插值，假设像素点(10, 10)的颜色是rgb(10, 10, 10)，像素点(20, 20)的颜色是rgb(20, 20, 20)。假设从像素点(11, 11)到像素点(19, 19)都是空白像素，则gpu脑补出来的颜色分别是(11, 11, 11)，(12, 12, 12)...(19, 19, 19)。一般情况下图片显示区域的边缘是全透明的，颜色是rgba(0, 0, 0, 0)，和它进行平均的中间色值也会是偏深色，这就出现了黑边或者说是灰边。至于为什么使用图片预乘外加设置src blend factor为ONE可以解决黑边问题，还有待深入研究