Question

是否可以使用透明背景的 WebGL画布？我希望通过画布显示网页内容。

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

如您所见，WebGL画布背后的文本不可见。当我在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>

请注意，浏览器假定画布中的像素表示PRE-MULTIPLIED-ALPHA值。这意味着，例如，如果您将清除颜色更改为（1,0,0,0.5），则会在HTML中看到其他任何其他内容。

我的意思是预乘的alpha意味着RGB部分已经已经乘以alpha值。因此，如果您为RGB启动1,0,0并且您的alpha为0.5。然后，如果你将RGB乘以alpha，你就会得到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>

请注意，即使您认为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程序都期望非预乘alpha，因为HTML5的所有其他部分都需要预先存在的alpha，因此WebGL为您提供了两种选择。

Answer 2

默认情况下，WebGL支持Alpha透明度，但您必须使用它。最基本的是，确保在gl.clearColor(0, 0, 0, 0)操作之前将透明色设置为透明gl.clear。

如果你想要绘制半透明对象，它会进入混合操作和排序绘图，但看起来你只想让未绘制区域透明，上面就足够了。

如何使WebGL画布透明

2 个答案: