WebGL透明像素Alpha通道泄漏：如何避免透传至画布缓冲区

问题根源 #

你使用的默认混合模式gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA)会同时作用于颜色通道和Alpha通道。绘制半透明红色矩形时，不仅红色会与下方灰色混合，画布缓冲区的Alpha值也会被修改为红色的Alpha（0.5）。这导致画布背后的蓝色CSS背景会透过半透明的Alpha区域，与混合后的颜色再次叠加，最终出现粉红色。

解决方法 #

使用分离混合函数gl.blendFuncSeparate()，分别控制颜色和Alpha通道的混合规则，让颜色正常混合的同时，保持画布Alpha通道完全不透明：

代码修改 #

将原有的混合模式设置替换为：

gl.enable(gl.BLEND);
gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ZERO, gl.ONE);

参数说明 #

• 前两个参数（gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA）：控制颜色混合逻辑，保持你需要的半透明叠加效果——源颜色（红色）乘以自身Alpha，目标颜色（灰色）乘以1-源Alpha，混合后得到暗红色。
• 后两个参数（gl.ZERO, gl.ONE）：控制Alpha通道混合逻辑，直接保留目标（灰色背景）的Alpha值（1.0），完全忽略源（红色矩形）的Alpha，确保画布缓冲区的每个像素Alpha始终为1，避免背后的CSS背景穿透。

额外说明 #

如果你的场景中存在多层半透明元素需要叠加，且最终仍需画布保持不透明，这个方案依然适用——只要底层已经是完全不透明的背景，后续所有半透明绘制都不会修改画布的Alpha通道，只会正确混合颜色。

内容的提问来源于stack exchange，提问作者Frank Weindel