Webgl中颜色和Alpha的数学公式 [英] math formula for color and alpha in webgl

问题描述

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

现在我正在寻找生成的画布的颜色:

Now i am looking the color of the resulting canvas :

rvba = 222,8,33,255

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)吗?

What is the formula ? (final_R,final_V,final_B,final_A) = function ( bg_R,bg_V,bg_B,bg_A,ccR,ccV,ccB,ccA) ?

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

and furthermore, if premultipliedAlpha is set to false, how this function change ?

谢谢！

edit:哎呀...我在屏幕截图中读取了画布的结果颜色...但是值每次都更改，现在我的rvba = 227,0,20,255

edit : oups...i read the result color of the canvas in a screenshot...but the values change each time, now i have rvba = 227,0,20,255

好的..截图是一个非常奇怪的主意...现在我使用的是gl.readpixel， 我有:[204，0，0，128]

OK..the screenshot was a very strange idea...now i use gl.readpixel, and i've got : [204, 0, 0, 128]

所以，结果截然不同，我的问题已经过时了.

So, with this very different result, my question is out of date.

对不起！

推荐答案

您的示例无效.使用premultipliedAlpha: true(顺便说一下，这是默认设置)，就没有像这样的颜色了

Your example is invalid. With premultipliedAlpha: true (which is the default by the way) there's no such thing as a color that's

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红色值无效

Why? Because colors go from 0.0 to 1.0. Since alpha is 0.5 the highest number you can have in R, G, or B, is 0.5 since premultipliedAlpha: true means the 0.0 <-> 1.0 value was multiplied by alpha. 1.0 (the highest value possible) * 0.5 alpha = 0.5 therefore your 0.8 red value in gl.clearColor is invalid

根据WebGL规范未定义无效的颜色，这意味着结果因浏览器而异.

Invalid colors are undefined according to the WebGL spec which means the result can be different per browser.

关于premultiplyAlpha: true与premultiplyAlpha: false会发生什么，WebGL并未真正定义.对于有效颜色，您可以假定premultiplyAlpha: true是

As for what happens with premultiplyAlpha: true vs premultiplyAlpha: false it's not really defined by WebGL. For valid colors you can assume that with premultiplyAlpha: true it's

dstColor = srcColor + dst * (1 - srcAlpha)

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

For premultiplyAlpha: false you for valid colors the result should be

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

但是实际上如何获得结果是不确定的.例如，也许它将首先在用于合成的纹理或着色器中将Alpha相乘，然后使用与预乘Alpha相同的值.

But how it actually gets to that result is undefined. For example maybe it's going to first multiply the alpha in the texture or shader used to composite and then use the same as premultiplied alpha.

对于无效的颜色，您不能承担任何责任.也许它将过色后的处理发布到品红色.未指定.

For invalid colors you can't assume anything. Maybe it's going to post process out of range colors to magenta. It's not specified.

至于调用gl.readPixels只会给您画布中的值，而不是显示的值(取决于吨的CSS设置，这几乎是什么.)

As for calling gl.readPixels that will only give you the value in the canvas, not the value displayed (which could be pretty much anything depending on tons of CSS settings.)

作为一个简单的例子

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

Even though that canvas's background color is red gl.readPixels returns 0,0,0,0

这篇关于Webgl中颜色和Alpha的数学公式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！