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

Question

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

问题是，我不知道使用哪个 format/type 组合。我查看了规范，但似乎没有任何效果。

这是我上传数据的方式：

// 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

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

#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。

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

webgl texture invalid combination of format, type and internalFormat

javascript

textures

webgl