WebGL2 2D Texture Arrays

I am interested in implementing 2D texture arrays. I’ve pretty much got the code part down (I think), but I am a little lost as far as how to create the actual images.

This example: https://threejs.org/examples/webgl2_materials_texture2darray.html uses this zipped image file: head256x256x109.zip (3.9 MB)

Is this the only way to do this? If so, how would one create a file like this from a set of PNG’s?

Can raw images be downloaded separately and passed as array in this line var texture = new THREE.DataTexture2DArray( array, 256, 256, 109 );?

And down the question that would allow me to test that; How does one create a raw image file from a PNG?

I tried saving as a 32bit BMP (photoshop will not let me save as 8bit like the example), but I looked at the saved file in notepad++ and it seems to be a different format than the data from the three.js example.

Any pointers?

I’ve never used the method employed by that example. I can’t even see what’s inside the .zip file because I get a binary file without an extension. Maybe you can reach out to the creator directly via Twitter (Divine Augustine) and ask how it was created?

I’ve had luck creating spritesheets in grid format with TexturePacker which gives you lots of compression options. You could potentially use this via Texture.repeat and Texture.offset. Not sure if this applies to your case, but hopefully it helps find a solution.

I’m actually moving away from the atlas method due to mipmap bleed issues on some models. Padding really isn’t an option when dealing with textures that take up a full grid slot.

At this point I’m really looking as to how to convert a PNG into raw data that I can pass to a THREE.DataTexture object. I’m assuming… that I can use an array of these and pass it to THREE.DataTexture2DArray.

1 Like