webgl 纹理格式、类型和 internalFormat 的无效组合

Question

我正在尝试将平铺地图渲染到单个四边形上。为此，我尝试使用纹理，其中包含要从瓦片集中采样的瓦片的列/行。列/行是无符号的 8 位整数。

问题是，我不知道要使用哪种格式/类型组合。我查看了规范，但似乎没有任何效果。

这是我上传数据的方式：

// Some data, representing a 2x2 tile grid
const columns = 2;
const rows = 2;
const data = [
//  col, row, -, -,
    205, 205, 0, 0,
    104, 104, 0, 0,
    104, 104, 0, 0,
    205, 205, 0, 0,
];
const buffer = new Uint8Array(data);
// pretend this creates a HTMLImageElement from the data
const image = Image.from(buffer, columns, rows);

const texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texImage2D(gl.TEXTURE_2D, 
    /* internalformat */ gl.RGBA8UI, 
    /* format */ gl.RGBA,
    /* type */ gl.UNSIGNED_BYTE,
    /* data */ image);
gl.texParameteri(target, gl.TEXTURE_WRAP_S, gl.REPEAT);
gl.texParameteri(target, gl.TEXTURE_WRAP_T, gl.REPEAT);
gl.texParameteri(target, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
gl.texParameteri(target, gl.TEXTURE_MAG_FILTER, gl.NEAREST);

// ... then at some point
gl.activeTexture(gl.TEXTURE0 + 0);
gl.bindTexture(gl.TEXTURE_2D, texture);
tileMapShader.uniforms.uTILEMAP.set(0); // pretend this exists

这就是我尝试渲染数据的方式（没有任何瓦片集采样）：

#version 300 es
precision mediump float;
precision mediump usampler2D;

uniform usampler2D uTILEMAP;

in vec2 vTEXCOORD;

out vec4 oFRAG;

void main()
{
    uvec4 data = texture(uTILEMAP, vTEXCOORD);
    oFRAG = vec4(data.r / 255u, data.g / 255u, data.b / 255u, data.a / 255u);
}

着色器的顶点着色器工作正常，我通过渲染纯色对其进行了测试。 使用上面的片段着色器，我看到黑屏，并收到警告：

GL_INVALID_OPERATION: Invalid combination of format, type and internalFormat.

什么是有效的组合？

Answer 1

我继续尝试了尽可能多的组合，然后暴力破解了它，看起来就像是

gl.texImage2D(gl.TEXTURE_2D, 
    /* internalformat */ gl.RGBA8UI, 
    /* format */ gl.RGBA_INTEGER,
    /* type */ gl.UNSIGNED_BYTE,
    /* data */ image);

有效，所以问题是提供的格式必须是RGBA_INTEGER。