gpt4 book ai didi

WebGL:为什么透明 Canvas 在 alpha 为 0 时显示 clearColor 颜色分量?

转载 作者:行者123 更新时间:2023-11-30 23:49:04 25 4
gpt4 key购买 nike

这是一个显示我的问题的简单尖峰:

<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

为什么我看到的是浅粉色 Canvas ,而不是 CSS 声明的灰色?粉红色显然来自我的 clearColor,但是为什么当 alpha 分量为 0 时它显示为红色?

最佳答案

默认情况下,WebGL 要求您使用颜色 预乘 alpha . 1,0,0,0 是无效颜色,因为 (1,0,0) 的 rgb * (0) 的 alpha = 0,0,0 而不是 1,0,0 所以它是无效颜色,并且规范未定义无效的颜色。结果在不同的浏览器上会有所不同。

你有几个选择

  • 告诉 WebGL 你的颜色没有预乘
    gl = canvas.getContext("experimental-webgl", { premultipliedalpha: false });
  • 摆脱 Alpha channel
    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 时使用,当 Canvas 与背景合成时不使用它们。

    关于WebGL:为什么透明 Canvas 在 alpha 为 0 时显示 clearColor 颜色分量?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20362023/

    25 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com