webgl - 如何通过片段着色器透明 WebGL 对象？

Question

如果我有这样的矩阵：

1 1 1 0 0 1
1 1 1 0 0 1
1 1 0 0 0 1
1 0 0 0 0 1
1 1 0 0 0 1
1 1 1 0 0 1

它代表6x6像素图像的 alpha 值，我想知道是否可以在0s 位置透明该图像？

我注意到gl_FragColor可能有用，但我不知道如何。

=== 注意 === 我需要这样做，因为客户端为我播种了这个矩阵并且想要透明图像的某个地方，我无法更改客户端的代码。

Answer 1

gl_FragColor期望 vec4 即rgba，其中第 4 个浮点数是 Alpha 通道并且正在接受 Alpha 值。
因此，在您的片段着色器中，您首先需要根据纹理坐标获取像素。如果您从客户端获取的 alpha 矩阵在纹理中，则只需使用texture2D，如果它是单维浮点数组，则您必须根据纹理坐标自行提取它。
假设二维数组的宽度和高度为 6x6：

float alpha = alphaMat[floor(uv.y * 6) * 6 + floor(uv.x * 6)];

在这里，您根据 alpha 数组的宽度和高度将 UV 转换为整数。alphaMat - 是包含 alpha 值的一维数组，如果是 6x6 地图，它应该有 36 个浮点数。

使用纹理而不是数组会更有效，因为它允许您应用片段的插值（纹理过滤）。