Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

I am trying to render a image using a Uint8Array and getting WebGL: INVALID_OPERATION: texImage2D: ArrayBufferView not big enough for request .

var gl = currentImage.gl;
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.LUMINANCE, columns, rows, 0, gl.LUMINANCE, gl.UNSIGNED_BYTE, Buffer);
On few images, it works fine, but it throws ArrayBuffer not big enough for request error for few images.
But if I subtract 1 from columns and rows , it works fine but image gets tilted.
I can however maintain a 2d canvas and push it to GPU but I don't want to maintain it as it kills some performance and I need to take care of a canvas unnecessarily.
This is what works after subtracting from 1.
var gl = currentImage.gl;
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.LUMINANCE, columns-1, rows-1, 0, gl.LUMINANCE, gl.UNSIGNED_BYTE, Buffer);
Am I doing anything wrong or missing anything?
I suspect the problem textures have a width that doesn't divide by 4, and you're not accounting for UNPACK_ALIGNMENT.
gl.pixelStorei(gl.UNPACK_ALIGNMENT, 1);
                I'm having a similar issue with code that looks just like this. Don't have this issue with textures that are 1920x1080, 1280x720, and 640x360, but 854x480 is a problem.
– reedog117
                Sep 5, 2018 at 3:35
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.