WebGl 是否支持图像单元

Question

我正在研究快速 glsl 模糊效果，无论大小如何都能快速渲染。这让我想到 this article，它描述了使用框模糊来模拟高斯模糊。

由于可以使用加权平均值，因此大内核的框模糊速度更快。但是，要使用加权平均值，您需要从纹理中单独读取像素。

我以为那是不可能的！直到我在第 7 行的片段着色器中看到这行代码：

imageStore( uTex1, ivec2( x, y ), vec4( colourSum * recKernelSize, 1.0 )

我查看了 openGL wiki 并找到了 this page，它描述了使用像 2d 数组这样的图像，您可以在其中任意访问像素。

但是设置它你需要使用图像单元而不是纹理单元。我试图为 webgl 找到这方面的文档，但即使 google 也一无所获。

那么可以在 webgl 中使用图像单元吗？如果可以，我将如何设置一个？

编辑：也可以将现有纹理转换为图像单元吗？

Answer 1

Image Load/Store 不适用于 WebGL 2.0，但您不需要 Image Load/Store 就可以获取特定纹素的数据。 texelFetch indexes the texture by integer texels 而不是浮点纹理坐标，WebGL 2.0 可用。

但实际上，从整数坐标获取 texture 并不难，只要您使用 nearest 过滤并通过 uniform 向着色器提供纹理分辨率.

仅供参考：

Also can an existing texture be converted into an image unit?

纹理包含一个或多个图像。图像单元是一个索引位置，您可以将存储在纹理中的图像之一绑定到该位置。你只是说 "access mipmap layer X of this texture as an image";没有 "conversion" 发生。

Answer 2

这个问题之前可能已经回答了至少 12 次，但我太懒了 S.O。搜索不好所以...

在 WebGL1 中，您可以通过将过滤设置为 NEAREST 并使用

来查找纹理中的像素

vec4 color = texture2D(someSampler, (pixelCoord + 0.5) / textureResolution);

例如，如果您的纹理是 75x35 并且您想要查找像素 15,31，那么

vec2 textureResolution = vec2(75, 35);
vec2 pixelCoord = vec2(15, 31);
vec4 color = texture2D(someSampler, (pixelCoord + 0.5) / textureResolution);

当然，通常你可能会制作 textureResolution 制服，这样你就可以将它传入并 pixelCoord 基于某些公式或数据

在 WebGL2 中，您可以使用 texelFetch，它采用整数坐标和 mip 级别

ivec2 pixelCoord = ivec2(15, 31);
int mipLevel = 0;
vec4 color = texelFetch(someSampler, pixelCoord, mipLevel);

至于模糊 this article 做 3x3 内核。

Are image units supported in WebGl