How do I create a texture with internal format `RG8UI` in WebGL2?

Question

The code snippet below attempts to create a texture and then checks gl.getError(). When the internal format is set to RG8 the creation succeeds. I want to set the internal format to RG8UI, but this results in the creation failing. In firefox a warning is also printed to the console: Mismatched internalFormat and format/type: 0x8238 and 0x8227/0x1401 where 0x8238=RG8UI, 0x8227=RG, and 0x1401=UNSIGNED_BYTE.

As far as I can tell, MDN's documentation on texImage2D indicates the pairing of internal format RG8UI with format RG is allowed though it is not "texture filterable" whatever that means. What am I doing wrong here?

const gl = document.createElement('canvas').getContext('webgl2');
const GL = WebGL2RenderingContext;
const w = 8;
const h = 8;
let texture = gl.createTexture();
gl.bindTexture(GL.TEXTURE_2D, texture);
gl.texParameteri(GL.TEXTURE_2D, GL.TEXTURE_MAG_FILTER, GL.NEAREST);
gl.texParameteri(GL.TEXTURE_2D, GL.TEXTURE_MIN_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.texImage2D(GL.TEXTURE_2D, 0, GL.RG8UI, w, h, 0, GL.RG, GL.UNSIGNED_BYTE, null);

if (gl.getError() != GL.NO_ERROR) {
    throw new Error("Failed");
}
console.log("passed");

GL.RG8UI is an integral internal format, hence the format has to be integral, too. Change GL.RG to GL.RG_INTEGER — Rabbid76
@Rabbid76 Yup, that was the issue! Put that as the answer and I'll accept it. — Craig Gidney
"not filterable" means you must set TEXTURE_MIN_FILTER and TEXTURE_MAX_FITLER to NEAREST. NEAREST = not filtered. Any other setting is filtered. — gman

Rabbid76 Rabbid76 · Accepted Answer · 2020-05-24T20:52:07

If the imageformat is an integral format, then the format has to be integral, too. Either an INVALID_OPERATION error is generated.
Note, there the allowed combinations of internalformat, format and type are specified: Valid combinations of format, type, and sized internalformat. A valid combination is RG8UI, RG_INTEGER, UNSIGNED_BYTE.

Change the format argument from GL.RG to GL.RG_INTEGER:

~~gl.texImage2D(GL.TEXTURE_2D, 0, GL.RG8UI, w, h, 0, GL.RG, GL.UNSIGNED_BYTE, null);~~

gl.texImage2D(GL.TEXTURE_2D, 0, GL.RG8UI, w, h, 0, GL.RG_INTEGER, GL.UNSIGNED_BYTE, null);

How do I create a texture with internal format `RG8UI` in WebGL2?

1 Answers