这是一个简单的尖峰，显示了我的问题：
<html>
<head>
<title>Clear Color</title>
<style type="text/css">
#stage {
background-color: rgba(127,127,127,1);
}
</style>
</head>
<body>
<canvas id="stage" width="100", height="100"></canvas>
<script type="text/javascript">
var options = {
alpha: true,
premultipliedAlpha: true
};
var ctx = document.getElementById("stage").getContext("webgl", options);
ctx.clearColor(1, 0, 0, 0);
ctx.enable(ctx.BLEND);
ctx.blendFuncSeparate(
ctx.SRC_ALPHA, ctx.ONE_MINUS_SRC_ALPHA,
ctx.ONE, ctx.ONE_MINUS_SRC_ALPHA
);
ctx.clear(ctx.COLOR_BUFFER_BIT);
</script>
</body>
</html>
BlendFunc 是这样的：
(sR*sA) + (dR*(1-sA)) = rR
(sG*sA) + (dG*(1-sA)) = rG
(sB*sA) + (dB*(1 -sA)) = rB
(sA*1) + (dA*(1-sA)) = rA
...这意味着（我认为）：
(1*0) + (0.5*(1-0)) = 0.5
(0*0) + (0.5*(1-0)) = 0.5
(0*0 ) + (0.5*(1-0)) = 0.5
(0*1) + (1.0*(1-0)) = 1.0
为什么我看到的是浅粉色画布，而不是 CSS 声明的灰色？粉色显然来自我的clearColor，但为什么当alpha分量为0时它会显示红色？
默认情况下，WebGL 要求您的颜色使用预乘 alpha。1,0,0,0 是无效颜色，因为 (1,0,0) * alpha (0) = 0,0,0 的 rgb 不是 1,0,0，所以它是无效颜色，并且规格未定义无效的颜色。在不同的浏览器上结果会有所不同。
你有几个选择
告诉 WebGL 你的颜色没有预乘
gl = canvas.getContext("experimental-webgl", { premultipliedalpha: false });
摆脱 Alpha 通道
gl = canvas.getContext("experimental-webgl", { alpha: false });
预乘你的阿尔法
var r = 1;
var g = 0;
var b = 0;
var a = 0;
gl.clearColor(r * a, g * a, b * a, a);
类似地，在着色器中要么传入预乘颜色，要么在最后预乘。
gl_FragColor = vec4(color.rgb * color.a, color.a);
您的混合设置没有效果。它们仅在调用时使用gl.drawXXX，当画布与背景合成时不使用它们。
| 归档时间： |
|
| 查看次数： |
4465 次 |
| 最近记录： |