css - 如何在 Canvas 上的webGL中绘制透明背景

Question

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

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

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

设置 alpha:false 也是不能的，因为 2D context 属性: alpha:指示 Canvas 是否包含 alpha channel 的 bool 值。

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

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

Answer 1

您链接到的示例的问题是示例本身不透明。它绘制背景，然后绘制樱花花瓣，然后应用辉光着色器使花瓣发光。这会生成一个不透明的图像，因此将 Canvas 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));