webgl 中颜色和 alpha 的数学公式

Question

body {
    background-color:black;
}
#myCanvas {
    background-color:rgba(55,23,88,0.5); // (bg_R,bg_V,bg_B,bg_A)
}

var myCanvas= document.getElementById("myCanvas");
gl = myCanvas.getContext("webgl", {
         premultipliedAlpha: true ,
         alpha:true
});


gl.clearColor(0.8, 0, 0, 0.5); // (ccR,ccV,ccB,ccA)
gl.clear(gl.COLOR_BUFFER_BIT);

现在我正在查看结果的颜色 canvas :

rvba = 222,8,33,255

var myCanvas= document.getElementById("myCanvas");

gl = myCanvas.getContext("webgl", {
  premultipliedAlpha: true ,
  alpha:true
});

gl.clearColor(0.8, 0, 0, 0.5);
gl.clear(gl.COLOR_BUFFER_BIT);
var pixels = new Uint8Array( 4);
gl.readPixels(0, 0, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
console.log(pixels); // Uint8Array

* {
  margin:0;
}
body {
  background-color:black;
}
#myCanvas {
  background-color:rgba(55,23,88,0.5);
}

<canvas id="myCanvas"  ></canvas>

公式是什么？ (final_R,final_V,final_B,final_A) = 函数 (bg_R,bg_V,bg_B,bg_A,ccR,ccV,ccB,ccA) ?

此外，如果 premultipliedAlpha 设置为 false，该函数将如何变化？

谢谢！

编辑：哎呀...我在屏幕截图中读取了 canvas 的结果颜色...但值每次都在变化，现在我有 rvba = 227,0,20,255

好的..屏幕截图是一个非常奇怪的想法...现在我使用 gl.readpixel, 我有：[204, 0, 0, 128]

所以，由于这个非常不同的结果，我的问题已经过时了。

对不起！

Answer 1

您的示例无效。使用 premultipliedAlpha: true（顺便说一下，这是默认设置）没有颜色是

gl.clearColor(0.8, 0, 0, 0.5);

为什么？因为颜色从 0.0 到 1.0。由于 alpha 是 0.5，因此 R、G 或 B 中的最大数字是 0.5，因为 premultipliedAlpha: true 表示 0.0 <-> 1.0 值乘以 alpha。 1.0（可能的最高值）* 0.5 alpha = 0.5 因此 gl.clearColor 中的 0.8 红色值无效

根据 WebGL 规范未定义无效颜色，这意味着每个浏览器的结果可能不同。

至于 premultiplyAlpha: true 与 premultiplyAlpha: false 的对比，WebGL 并未真正定义。对于有效颜色，您可以假设 premultiplyAlpha: true 是

dstColor = srcColor + dstColor * (1 - srcAlpha)

对于premultiplyAlpha: false你对于有效颜色结果应该是

dstColor = srcColor * srcAlpha + dstColor * (1 - srcAlpha)

但是它实际上是如何得到那个结果的还不确定。例如，它可能会首先乘以用于合成的纹理或着色器中的 alpha，然后使用与预乘 alpha 相同的值。

对于无效的颜色，您不能假设任何东西。也许它将 post 将超出范围的颜色处理为洋红色。未指定。

至于调用 gl.readPixels，它只会为您提供 canvas 中的值，而不是显示的值（根据大量 CSS 设置，它几乎可以是任何值。 )

举个简单的例子

var gl = document.querySelector("canvas").getContext("webgl");
var pixel = new Uint8Array(4);
gl.readPixels(0, 0, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, pixel);
log("color:", pixel);

function log() {
  var pre = document.createElement("pre");
  pre.appendChild(document.createTextNode(Array.prototype.join.call(arguments, " ")));
  document.body.appendChild(pre);
}

<canvas style="background-color: rgb(255, 0, 0);"><canvas>

即使 canvas 的背景颜色是红色 gl.readPixels returns 0,0,0,0

webgl 中颜色和 alpha 的数学公式

math formula for color and alpha in webgl

webgl

premultiplied-alpha