graphics123
graphics123

Reputation: 1271

WebGL Error : ArrayBuffer not big enough for request in case of gl.LUMINANCE

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?

Upvotes: 3

Views: 3313

Answers (1)

Columbo
Columbo

Reputation: 6766

I suspect the problem textures have a width that doesn't divide by 4, and you're not accounting for UNPACK_ALIGNMENT.

Try

gl.pixelStorei(gl.UNPACK_ALIGNMENT, 1);

Upvotes: 6

Related Questions