将图像数组传递到计算着色器

Question

我目前正在使用WebGL 2.0中的Compute shader的草稿进行项目开发。 [draft]。不过，我认为我的问题不是WebGL特有的，而是OpenGL问题。目标构建要在计算着色器中使用的图像金字塔。每个级别应为2 ^（n级）值的平方（低至1x1），并包含简单的整数/浮点值...

我已经拥有此金字塔所需的值，存储在不同的位置OpenGL图像及其尺寸。我的问题是：如何将我的图像数组传递给计算着色器。我没有限制传递给我们的图像数量，比如说14或16 ...，但是至少需要12。如果有一种机制可以将图像存储在Texture中，然后使用textureLod解决了问题，但是我无法理解如何使用“图像”来做到这一点。

谢谢您的帮助，我很确定应该有一个明显的方法来做到这一点，但是对于OpenGL来说，我一般还是比较陌生。

Answer 1

传递“图像金字塔”是WebGL中的正常操作。它们被称为mipmap。

gl.texImage2D(gl.TEXUTRE_2D, 0, gl.R32F, 128, 128, 0, gl.RED, gl.FLOAT, some128x128FloatData);
gl.texImage2D(gl.TEXUTRE_2D, 1, gl.R32F, 64, 64, 0, gl.RED, gl.FLOAT, some64x64FloatData);
gl.texImage2D(gl.TEXUTRE_2D, 2, gl.R32F, 32, 32, 0, gl.RED, gl.FLOAT, some32x32FloatData);
gl.texImage2D(gl.TEXUTRE_2D, 3, gl.R32F, 16, 16, 0, gl.RED, gl.FLOAT, some16x16FloatData);
gl.texImage2D(gl.TEXUTRE_2D, 4, gl.R32F, 8, 8, 0, gl.RED, gl.FLOAT, some8x8FloatData);
gl.texImage2D(gl.TEXUTRE_2D, 5, gl.R32F, 4, 4, 0, gl.RED, gl.FLOAT, some4x4FloatData);
gl.texImage2D(gl.TEXUTRE_2D, 6, gl.R32F, 2, 2, 0, gl.RED, gl.FLOAT, some2x2FloatData);
gl.texImage2D(gl.TEXUTRE_2D, 7, gl.R32F, 1, 1, 0, gl.RED, gl.FLOAT, some1x1FloatData);

第二列中的数字是Mip级别，后跟内部格式，然后是Mip级别的宽度和高度。

您可以使用texelFetch(someSampler, integerTexelCoord, mipLevel)从着色器访问任何单个纹理像素，如

uniform sampler2D someSampler;

...

   ivec2 texelCoord = ivec2(17, 12);  
   int mipLevel = 2;
   float r = texelFetch(someSampler, texelCoord, mipLevel).r;

但是您说您需要12、14或16级。 16级是2（16-1）或32768x32768。那是1.3 GB的内存，因此您需要一个具有足够空间的GPU，并且必须祈祷浏览器可以使用1.3 GB的内存。

您可以通过使用texStorage2D分配纹理，然后使用texSubImage2D上载数据来节省一些内存。

您提到使用图像。如果您的意思是<img>标签或Image标签，那么您将无法从其中获取Float或Integer数据。它们通常是每个通道8位的值。

或者当然也可以不使用Mip级别而将数据排列为纹理图集