Математическая формула для цвета и альфа в 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);

Теперь я смотрю цвет полученного холста:

рвба = 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, как эта функция изменяется?

Спасибо!

edit: 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,0 было умножено на альфа. 1,0 (максимально возможное значение) * 0,5 альфа = 0,5, поэтому ваше значение красного 0,8 в gl.clearColor является недействительным

Недопустимые цвета не определены в соответствии со спецификацией WebGL, что означает, что результат может отличаться для каждого браузера.

Что касается того, что происходит с premultiplyAlpha: true против premultiplyAlpha: false это не совсем определяется WebGL. Для действительных цветов вы можете предположить, что с premultiplyAlpha: true его

dstColor = srcColor + dst * (1 - srcAlpha)

За premultiplyAlpha: false Вы для правильных цветов результат должен быть

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

Но как это на самом деле приводит к такому результату, неизвестно. Например, возможно, он собирается сначала умножить альфа в текстуре или шейдере, используемом для компоновки, а затем использовать то же самое, что и предварительно умноженную альфа.

Для недопустимых цветов вы не можете ничего принять. Может быть, он собирается отправить процесс из диапазона цветов в пурпурный. Это не указано

Что касается звонка 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