Как разрешить прозрачный оверлей в WebGL? [Дубликат]

WebGL по умолчанию является прозрачным. Вот пример

const gl = document.getElementById("c").getContext("webgl");
gl.clearColor(0.5, 0, 0, 0.5);
gl.clear(gl.COLOR_BUFFER_BIT);

pre {
    padding-left: 50px;
    font-family: sans-serif;
    font-size: 20px;
    font-weight: bold;
}

canvas {
    z-index: 2;
    position: absolute;
    top: 0px;
    border: 1px solid black;
}

<pre>
Some 
text
under
the
canvas
</pre>
<canvas id="c"></canvas>

Обратите внимание, что браузер предполагает, что пиксели на холсте представляют значения PRE-MULTIPLIED-ALPHA , Это означает, например, если вы изменили прозрачный цвет на (1, 0, 0, 0,5), вы получили бы что-то, чего вы больше не видите в HTML.

Что я имею в виду, умноженная альфа означает, что части RGB таковы, что они уже были умножены на альфа-значение. Итак, если вы начали 1,0,0 для RGB, а ваша альфа - 0,5. Затем, если вы умножаете RGB на альфа, вы получите 0,5, 0, 0 для RGB. Это то, что браузер ожидает по умолчанию.

Если пиксели в WebGL равны 1,0,0,0,5, что не имеет смысла для браузера, и вы получите странные эффекты.

См., например,

const gl = document.getElementById("c").getContext("webgl");
gl.clearColor(1, 0, 0, 0.5);
gl.clear(gl.COLOR_BUFFER_BIT);

pre {
    padding-left: 50px;
    font-family: sans-serif;
    font-size: 20px;
    font-weight: bold;
}

canvas {
    z-index: 2;
    position: absolute;
    top: 0px;
    border: 1px solid black;
}

<pre>
Some 
text
under
the
canvas
</pre>
<canvas id="c"></canvas>

Обратите внимание, что черный текст стал красным, даже если вы 'd думаю, что альфа 0,5 = 50% черного текста и 50% красного холста WebGL. Это потому, что красный не был предварительно умножен.

Вы можете решить эту проблему, убедившись, что значения, которые вы создаете в WebGL, представляют собой предварительно умноженные значения. Или вы можете сообщить браузеру, что ваши пиксели WebGL не являются предварительно умноженное при создании контекста webgl с помощью

const gl = canvas.getContext("webgl", { premultipliedAlpha: false });

Теперь снова работают 1,0,0,0,5 пикселя. Пример:

const gl = document.getElementById("c").getContext("webgl", {
  premultipliedAlpha: false,
});
gl.clearColor(1, 0, 0, 0.5);
gl.clear(gl.COLOR_BUFFER_BIT);

pre {
    padding-left: 50px;
    font-family: sans-serif;
    font-size: 20px;
    font-weight: bold;
}

canvas {
    z-index: 2;
    position: absolute;
    top: 0px;
    border: 1px solid black;
}

<pre>
Some 
text
under
the
canvas
</pre>
<canvas id="c"></canvas>

Как вы это делаете, зависит ваше приложение. Многие программы GL ожидают, что непремультиплексная альфа, поскольку все остальные части HTML5 ожидают премультиплексированную альфу, поэтому WebGL дает вам оба варианта.