如何使WebGL画布透明

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操作之前将透明色设置为透明.

如果你想要绘制半透明对象,那么它会进入混合操作和排序绘图,但看起来你只是希望未绘制区域是透明的,上面就足够了.