canvas 如何在 webGL 中绘制透明背景

Question

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

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

设置alpha:false也是不行的，因为二维上下文属性： alpha：布尔值，指示 canvas 是否包含 alpha 通道。

如果设置为 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));

canvas 如何在 webGL 中绘制透明背景

How to draw transparent background in webGL on canvas

css

shader

webgl