CODEWITHSUNDEEP
javascriptimagewebgl
mur
mur

Reputation: 931

Can you/how to use textures that are larger than MAX_TEXTURE_SIZE?

I have a PNG file generated on the server that is 1536 by 47616 Pixels. The PNG is paletted, and has 20 entries. The size of the PNG is 2.5MB - i dont see why memory can be an issue for the GPU.

This big image file basically contains a combination of a lot of small textures. Each of the texture inside this big file, is 128px width by 512px height each. Meaning that basically this big image contains 3*372 = 1116 images (1536/512 = 3 image every row, 47616/128 = 372 every column)

I put them in the same image because otherwise the end user will need to request 1116 images seperately, and with requesting and processing headers - this is a lot of images to process. Much faster to request a single massive image.

gl.getParameter(gl.MAX_TEXTURE_SIZE);  // this gives me 16384 for my browser. My texture's height of 47616 is a lot higher than this.

Currently i try to bind the texture to the buffer as: 

this.texture_image = new Image();
var parent = this;
this.texture_image.addEventListener("load", function(e) {
        parent.tinfo.width = parent.texture_image.width;
        parent.tinfo.height = parent.texture_image.height;
        parent.gl.bindTexture(parent.gl.TEXTURE_2D, parent.tinfo.texture);
        parent.gl.texImage2D(parent.gl.TEXTURE_2D, 0, parent.gl.RGB, parent.gl.RGB, parent.gl.UNSIGNED_BYTE, parent.texture_image);
});
this.texture_image.src= texture_image_url;

However this results in Google Chrome complaining:

main.js:5118 WebGL: INVALID_VALUE: texImage2D: width or height out of range

Which is obviously the case, since my height is way outside the MAX_TEXTURE_SIZE range.

So now, is there someway on the client that i can refer to smaller parts of the image? Maybe make my own smaller Image objects out of the large this.texture_image Image object?

I guess i can use Canvas and drawImage, but would prefer a WebGL based solution. Since i will be doing some other effects on it with WebGL later on.

Thanks.

Upvotes: 1

Views: 1525

Answers (1)

LJᛃ
LJᛃ

Reputation: 8153

The size of the PNG is 2.5MB - i dont see why memory can be an issue for the GPU

PNG is a compressed file format not optimized for random realtime access, GPUs don't support encodings like that, without the use of any extensions GPUs only support raw pixel data thus your image will be expanded to WIDTHxHEIGHTx4 => 1536x47616x4 = 292552704 Bytes which are a hefty 292.553 Megabyte, even with the use of extensions you would be bound to fixed width block encoding schemes. That being said MAX_TEXTURE_SIZE is not so much about memory but the addressability of it, there is no way around that(in WebGL), your only option is to use a 2D canvas to split your texture atlas into suitable chunks.

Upvotes: 3

Related Questions