数据如何在 RGBA WebGL 纹理中布局？

Question

我正在尝试将整数列表传递给片段着色器，并且需要随机访问它的任何位置。我不能使用制服，因为索引必须是常量，所以我使用通过纹理传递数据的常用技术。

事情似乎可行，但调用 texture2D 获取特定像素的行为与我预期的不同。

我的数据是这样的：

this.textureData = new Uint8Array([
    0,  0,  0,  10,    0,  0,  0,  20,    0,  0,  0,  30,    0,  0,  0,  40,                                   
    0,  0,  0,  50,    0,  0,  0,  60,    0,  0,  0,  70,    0,  0,  0,  80,
]);

然后我通过纹理复制它：

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

            this.gl.texImage2D(
                this.gl.TEXTURE_2D,
                0,
                this.gl.RGBA,
                4,  // width: using 4 since its 4 bytes per pixel
                2,  // height 
                0,
                this.gl.RGBA,
                this.gl.UNSIGNED_BYTE,
                this.textureData);

所以这个纹理是 4x2 像素。

当我调用 texture2D(uTexture, vec2(0,0)); 时，我得到一个具有正确值 (0,0,0,10) 的 vec4 像素。

但是，当我调用诸如 (1,0)、(2,0)、(3,0)、(4,0) 等位置时，它们都是 return 一个像素 ( 0,0,0,30).

第二行也一样。如果我用 (0,1) 调用，我会得到第二行的第一个像素。

X 坐标大于 1 的任何数字 return 是第二行的最后一个像素。

我希望坐标为：

this.textureData = new Uint8Array([
    // (0,0)                (1,0)              (2,0)              (3,0)
    0,  0,  0,  10,    0,  0,  0,  20,    0,  0,  0,  30,    0,  0,  0,  40,     
    // (0,1)                (1,1)              (2,1)              (3,1)                              
    0,  0,  0,  50,    0,  0,  0,  60,    0,  0,  0,  70,    0,  0,  0,  80,
]);

我错过了什么？如何正确访问像素？

谢谢！

Answer 1

纹理坐标不是整数，它们在[0.0, 1.0]范围内。它们将几何体的顶点映射到纹理图像中的一个点。纹理坐标指定纹理的哪一部分放置在几何体的特定部分，并与纹理参数（参见 gl.texParameteri）一起指定几何体如何被纹理包裹。一般情况下，贴图左下点用贴图坐标(0.0, 0.0)寻址，贴图右上点用(1.0, 1.0)寻址。
纹理坐标在 OpenGL、OpenGL Es 和 WebGL 中的工作方式相同。参见 How do opengl texture coordinates work?

数据如何在 RGBA WebGL 纹理中布局？

How does data get laid out in am RGBA WebGL texture?

textures

glsl

webgl