时间戳

首页 > 解决方案 > 如何在画布上的 webGL 中绘制透明背景

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

问题描述

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.

标签： csswebglshader

解决方案

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

推荐阅读