Uploading an RED_INTEGER R8UI UNSIGNED_BYTE texture

[Philip Taylor]

I am having trouble uploading an R8UI texture.

(RED_INTEGER, R8UI, UNSIGNED_BYTE)

 The MDN docs are a bit vague if it's supported in WebGL 2.

I am setting the unpack alignment. 

gl.pixelStorei(gl.UNPACK_ALIGNMENT, 1)

Then uploading...
const data = Uint8Array(...)

gl.texSubImage2D(gl.TEXTURE_2D, 0, x, y, w, h, format, type,  data)

I get errors from pixelStorei
WebGL: INVALID_VALUE: pixelStorei: invalid parameter for alignment

But if I remove it, I get the following error. 
WebGL: INVALID_OPERATION: texSubImage2D: ArrayBufferView not big enough for request

I understand that the default unpack alignment is 4, so I need to set the alignment to 1, which is one of the supported values.


Any tips? I could upload an RGBA array and then select the right channel based on the pixel % 4, but just hoping the R8UI texture will work.

Thanks for any tips.

--

Philip TAYLOR

Zea Inc.

Montréal, Québec

[Kelsey Gilbert]

Does it happen in all browsers? This sounds like it might be a browser bug.

--
You received this message because you are subscribed to the Google Groups "WebGL Dev List" group.
To unsubscribe from this group and stop receiving emails from it, send an email to webgl-dev-lis...@googlegroups.com.
To view this discussion visit https://groups.google.com/d/msgid/webgl-dev-list/CAC7g9xQDC_r7%3D9PT4xM2AanvTzLCW_FyQKHx3d5GoKJtngOmjQ%40mail.gmail.com.

[Ken Russell]

Hi Philip,

Can you provide a test case? The following works fine in Chrome, Firefox and Safari on macOS. It's suspicious that the pixelStorei call would fail with that reason. This doesn't have the shaders and draw calls to draw the texture to the screen, but changing it to an R8 and RED type texture allows blitting to the default back buffer, and that works.

---- contents of "r8ui.html" -----

<canvas id="c" width="16" height="16">
</canvas>
<div id="output">
</div>
<script>
function output(str) {
  document.getElementById("output").innerHTML += "<br>" + str;
}

let c = document.getElementById("c");
let gl = c.getContext("webgl2", { antialias: false });

let t = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, t);
const textureWidth = 15;
const textureHeight = 15;
gl.texStorage2D(gl.TEXTURE_2D, 1, gl.R8UI, textureWidth, textureHeight);
//gl.texStorage2D(gl.TEXTURE_2D, 1, gl.R8, textureWidth, textureHeight);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
const data = new Uint8Array(textureWidth * textureHeight);
for (yy = 0; yy < textureHeight; ++yy) {
  for (xx = 0; xx < textureWidth; ++xx) {
    data[textureWidth * yy + xx] = textureWidth * yy + xx;
  }
}
gl.pixelStorei(gl.UNPACK_ALIGNMENT, 1);
gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, textureWidth, textureHeight, gl.RED_INTEGER, gl.UNSIGNED_BYTE, data);
//gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, textureWidth, textureHeight, gl.RED, gl.UNSIGNED_BYTE, data);
let err = gl.getError();
if (err) {
  output("OpenGL Error: " + err);
} else {
  output("No OpenGL errors!");
}

// This doesn't work when blitting an integer texture to a non-integer texture
//let fb = gl.createFramebuffer();
//gl.bindFramebuffer(gl.READ_FRAMEBUFFER, fb);
//gl.framebufferTexture2D(gl.READ_FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, t, 0);
//gl.blitFramebuffer(0, 0, textureWidth, textureHeight, 0, 0, textureWidth, textureHeight, gl.COLOR_BUFFER_BIT, gl.NEAREST);

</script>

---- end contents of "r8ui.html" -----

Thanks,

-Ken

To view this discussion visit https://groups.google.com/d/msgid/webgl-dev-list/CAJDzEsVtRk3r%2BLZHbGFDjOF3KOmTqS0zF4QQDx31ZUOjrgh9JA%40mail.gmail.com.

[Philip Taylor]

Thanks Kelsey and Ken, 

@Ken Russell The code sample works just fine, which indicates I am doing something wrong on my end. 

I was looking for a webgl2 conformance test that uploaded to a R8UI texture but didn't find it if it exists.

I am quite happy to know this should work as the work around was going to make a mess of my code.

Thanks again, I am always surprised how quickly I get responses on this list.

To view this discussion visit https://groups.google.com/d/msgid/webgl-dev-list/CAMYvS2cN6d2hxbe0r1sA-1JOaEbPHMSu0Ct30NXQ2r_SeHi-gw%40mail.gmail.com.

[Ken Russell]

Hi Philip,

https://github.com/KhronosGroup/WebGL/blob/main/sdk/tests/conformance2/textures/image_data/tex-2d-r8ui-red_integer-unsigned_byte.html is one conformance test verifying the R8UI upload path (runnable online with the harness at https://registry.khronos.org/webgl/sdk/tests/webgl-conformance-tests.html ), but as I'm looking back through all of these texture-related tests in e.g. https://github.com/KhronosGroup/WebGL/tree/main/sdk/tests/conformance2/textures , I'm not immediately finding tests which upload from raw typed arrays.

I think it might be https://github.com/KhronosGroup/WebGL/blob/main/sdk/tests/conformance2/textures/misc/tex-new-formats.html which verifies that.

Anyway, please tell us if it looks like there's a bug in a WebGL implementation.

Thanks,

-Ken

--

I support flexible work schedules, and I’m sending this email now because it is within the hours I’m working today.  Please do not feel obliged to reply straight away - I understand that you will reply during the hours you work, which may not match mine. (credit: jparent@)

[Philip Taylor]

I found the problem and it was 50cm in front of the screen. thanks for the help.

[Ken Russell]

Those are also my most common kinds of bugs! You're welcome.