如何使用texelFetch在着色器上不过滤使用一维纹理

Question

我想将一堆浮点数传递给片段着色器，并按索引访问它们。

基本上在此答案中提到的1D Textures方法： 将值列表传递给片段着色器

我尝试这样：

javascript code

  gl.pixelStorei(gl.UNPACK_ALIGNMENT, 1);
  const data = new Uint8Array([
    255, 64, 192,
    0, 192, 0
  ]);

  let texture = gl.createTexture();
  gl.bindTexture(gl.TEXTURE_2D, texture);
  gl.texImage2D(gl.TEXTURE_2D,
                0,
                gl.R8,
                3,
                2,
                0,
                gl.RED,
                gl.UNSIGNED_BYTE,
                data);

    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);

  gl.activeTexture(gl.TEXTURE0);
  gl.bindTexture(gl.TEXTURE_2D, texture);

我在碎片着色器中访问此制服：

uniform sampler2D u_texture;

void main() {    
  vec2 trans = texelFetch(u_texture, ivec2(0, 0), 0);
}

我使用glTexImage2D是因为我看到了一个例子，这部分起作用，但是有两个问题：

我想摆脱所有过滤选项gl.texParameteri因为我不需要它们。 但是，如果我删除那些，我不会得到数据。

此texelFetch方法返回[1，0]范围内的值（例如：1表示255）。 为什么会这样呢？

基本上我需要一个提到的方法的例子。

Answer 1

我想摆脱所有过滤选项gl.texParameteri，因为我不需要它们。 但是，如果我删除那些，我不会得到数据。

纹理参数存储在纹理对象中。 参数的初始值TEXTURE_MIN_FILTER是NEAREST_MIPMAP_LINEAR ，对于TEXTURE_MAG_FILTER它是LINEAR和TEXTURE_WRAP_S分别TEXTURE_WRAP_T它是REPEAT 。
如果需要不同的参数值，则必须为每个纹理对象显式设置它们。 没有办法。

在你的情况下，问题是参数的初始值TEXTURE_MIN_FILTER （如上面提到它是NEAREST_MIPMAP_LINEAR ）。
如果缩小过滤器需要mipmap（不是NEAREST和LINEAR ），但是纹理没有mipmap，则纹理不是“ mipmap complete”。
请注意，如果纹理不完整，则纹理提取的结果为（0，0，0，1）。 请参阅WebGL 2.0-5.12 Texel提取 。

---

此texelFetch方法返回[1，0]范围内的值（例如：1表示255）。 为什么会这样呢？

这是由于用于指定像素数据的像素格式（ gl.texImage2D ）引起的。

格式类型组合gl.RED ， gl.UNSIGNED_BYTE指定规范化整数格式。 整数数据类型的完整范围被映射到无符号归一化整数（例如UNSIGNED_BYTE ， UNSIGNED_SHORT ， UNSIGNED_INT ）的浮点范围[0，1]，并被映射到有符号归一化整数的范围[-1，1]（例如BYTE ， SHORT ， INT ）。

---

在WebGL 2.0 （分别为OpenGL ES 3.0 ）中，可以通过gl.RED_INTEGER ， gl.UNSIGNED_BYTE组合指定图像格式，该组合指定整数像素格式并对应于内部图像格式R8UI （请参阅WebGl 2.0-3.7。 6个纹理对象 ）：

gl.texImage2D(gl.TEXTURE_2D,
              0,
              gl.R8UI,
              3,
              2,
              0,
              gl.RED_INTEGER,
              gl.UNSIGNED_BYTE,
              data);