如何在画布上的webGL中绘制透明背景

Question

https://codepen.io/anon/pen/zMRjwv

在该页面中，我想绘制一个透明的背景，但是当我使用gl.clearColor(0, 0, 0, 0)时它不起作用。

 const gl = canvas.getContext('webgl', {alpha: false});

设置alpha:false也不能，因为2D上下文 属性：alpha：布尔值，指示画布是否包含alpha通道。

如果设置为false，浏览器将知道背景始终是不透明的，这可以加快绘制透明内容和images.WebGL上下文的速度。

attributes:
alpha: Boolean that indicates if the canvas contains an alpha buffer.

Answer 1

您链接到的样本的问题在于样本本身不透明。它绘制背景，然后绘制樱花花瓣，然后应用发光着色器使花瓣发光。这样会生成不透明的图像，因此将画布的alpha设置为true（或不全部设置）不会有任何效果。

要使其透明，请注释掉以下几行并更改背景颜色

// gl.bindFramebuffer(gl.FRAMEBUFFER, renderSpec.mainRT.frameBuffer);
// gl.viewport(0, 0, renderSpec.mainRT.width, renderSpec.mainRT.height);
gl.clearColor(0, 0, 0, 0);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

// renderBackground();
renderPointFlowers();
// renderPostProcess();

然后您可以更改此行来调整花瓣亮度

col *= mix(0.8, 1.0, pow(abs(coord.x), 0.3));

例如

col *= mix(1.8, 3.0, pow(abs(coord.x), 0.3));