css - 如何使 WebGL Canvas 透明

Question

WebGL canvas 有透明背景吗？ 我想让网页内容通过 Canvas 可见。

这是我现在拥有的:http://i50.tinypic.com/2vvq7h2.png

如您所见，WebGL Canvas 后面的文本是不可见的。当我在 CSS 中更改 Canvas 元素的样式并添加

opacity: 0.5;

该页面将如下所示: http://i47.tinypic.com/302ys9c.png

这几乎是我想要的，但不完全是 - 由于 CSS alpha 设置，文本的颜色当然不是黑色，蓝色形状的颜色也不是第一张图片中的蓝色。

感谢您的帮助!

Answer 1

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>

请注意，浏览器假定 Canvas 中的像素表示 PRE-MULTIPLIED-ALPHA 值。这意味着，例如，如果您将透明颜色更改为 (1, 0, 0, 0.5)，您将获得在 HTML 中其他任何地方都看不到的东西。

我的意思是预乘 alpha 意味着 RGB 部分已经乘以 alpha 值。因此，如果您开始为 RGB 设置 1,0,0 并且您的 alpha 为 0.5。然后，如果您将 RGB 乘以 alpha，您将得到 RGB 的 0.5、0、0。这是浏览器默认的预期。

如果 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>

请注意，即使您认为 0.5 的 alpha = 50% 的黑色文本和 50% 的红色 WebGL Canvas ，黑色文本也会变成红色。那是因为红色没有预乘。

您可以通过确保您在 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 程序期望非预乘 alpha，而 HTML5 的所有其他部分都期望预乘 alpha，因此 WebGL 为您提供这两种选择。