使 webgl canvas 透明

Question

我想让我的 webgl canvas 透明，但问题是我在 codepen 上选择了代码： here并在论坛上看到了相同的内容，他们也在讨论如何更改颜色，但没有任何答案。

我说的唯一一件事是编写canvas.fillStyle = "#ffffffff"不起作用，因为gl.clearColor(0, 0, 0, 0) 。 他们说颜色来自着色器，但我对 webgl 还是很陌生，我现在还不太了解着色器是如何工作的。

我也看了这个问题： How to make Webgl canvas transparent并没有帮助我。

Answer 1

gl_FragColor = texture2D(uTexture, vUv);

这条线说明 fragColor 女巫是 vec4 将通过采样纹理着色。

在这种情况下，基本上您可以将 vec4 视为 RGBA 向量，因此如果您执行以下操作：

gl_FragColor = vec4(0.0f, 0.0f, 0.0f, 1.0f);

在这个像素颜色将是黑色但不透明

gl_FragColor = vec4(1.0f, 1.0f, 1.0f, 0.0f);

将是一个白色但透明的像素

所以通过这样做：

 gl_FragColor = dissipation * texture2D(uSource, coord);
        gl_FragColor.a = 1.0;

您基本上是在删除透明度信息

要使其透明，您必须在通道之间保持和保持 alpha。 简单的解决方法是设置

gl_FragColor.a = gl_FragColor.r

否则，您也可以例如从 rgb 计算亮度并将其用作 alpha。

那么gl.clearColor(0, 0, 0, 0)就可以了

PS 几句话着色器的工作原理：您可以想象有两种类型的效果，一种称为屏幕空间（thouse 是后期处理）和 3d 的。 因此，对于屏幕空间效果，您将平面应用于您的视图，而该平面的 uv 线是屏幕的线，gpu 按像素数量插值 uv 并并行计算二维像素数组，然后通过 uv 坐标或掩码等...您每秒计算屏幕上每个像素的颜色 60 次...不知道这是否有意义，但考虑它的最简单方法是您的 vUv 是像素网格，您必须通过检查或移动 vUv 来找到颜色