math formula for color and alpha in webgl

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

Now i am looking the color of the resulting 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>

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

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

Thanks !

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

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.

Sorry !

Many factors come into play when coming up with a formula. Going through the specification should clear up some things: https://www.khronos.org/registry/gles/specs/3.2/es_spec_3.2.pdf — gaitat, Jul 28 '16 at 13:03
thanks but i have already ready this specs and i gave a very concrete example, what other factor may come into play ? — oceanGermanique, Jul 28 '16 at 15:14
the most obvious one is with the `alpha` value. You specify 1 for the document background, then 0.5 for the canvas background and you clear your canvas with 0.5 and yet in the end you get a 1 (i.e. 255). So the whole story is not present. — gaitat, Jul 28 '16 at 15:58
ok, the value were wrong ! But i dont know how read the result color of the canvas : if i make a screenshot, alpha are always 1 — oceanGermanique, Jul 28 '16 at 16:18
yes ! now, i use gl.readpixel and i get rvba = (204,0,0,128) — oceanGermanique, Jul 28 '16 at 16:37

score 1 · Accepted Answer · edited Oct 04 '21 at 17:28

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

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

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

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 + dstColor * (1 - srcAlpha)

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

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

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.

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

As a simple example

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>

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

math formula for color and alpha in webgl

1 Answers1

Linked