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);

现在我正在查看生成的画布的颜色：

rvba = 222,8,33,255

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

公式是什么？（final_R，final_V，final_B，final_A）=函数（bg_R，bg_V，bg_B，bg_A，ccR，ccV，ccB，ccA）？

此外，如果将premultipliedAlpha设置为false，则此函数如何更改？

谢谢！

编辑：oups ...我在屏幕截图中读取画布的结果颜色......但每次都会改变值，现在我有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。由于α为0.5，因此在R，G或B中可以具有的最高数为0.5，因为premultipliedAlpha: true表示0.0 < - > 1。 1.0值乘以alpha。 1.0（可能的最高值）* 0.5 alpha = 0.5因此gl.clearColor中的0.8红色值无效

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

至于premultiplyAlpha: true vs premultiplyAlpha: false会发生什么，它并不是由WebGL真正定义的。对于有效颜色，您可以假设使用premultiplyAlpha: true

dstColor = srcColor + dst * (1 - srcAlpha)

premultiplyAlpha: false对于有效颜色，结果应为

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

但它实际上是如何得到这个结果是未定义的。例如，它可能首先将纹理或着色器中的alpha乘以复合，然后使用相同的预乘alpha。

对于无效颜色，您无法承担任何责任。也许它会将超出范围的颜色过程发布到品红色。它没有指定。

至于调用gl.readPixels，它只会给你画布中的值，而不是显示的值（根据大量的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>

即使该画布的背景颜色为红色gl.readPixels，也会返回0,0,0,0

webgl

1 个答案: