How to create texture arrays efficiently?

Questions
1

Hey there,

I found this PG for creating texture arrays programatically: https://playground.babylonjs.com/#HBWKYN#3

If I already have png files with the same size, is there a way to create a texture array from those instead of creating the buffer data by hand?

2

Edit: sorry, I missed the word arrays, so this doesn’t apply.

const texture = new BABYLON.Texture(url, scene);
1 Like
3

I do not think we do at the moment, do not hesitate if you want to create a PR or a feature request in the forum ?

4

Decode the images with browser api, like createImageBitmap or ImageDecoder, and use the underlying api to update the texture manually.
See here for an example

1 Like
5

I will probably make some kind of

RawTexture2DArray.FromBitmapArray(images: ImageBitmap[], otherOptions ...): RawTexture2DArray

I will be happy to contribute it :wink:

6

I made this prototype:

But I am not satisfied because bitmaps need to be loaded in an offscreen canvas, then read back to the CPU, then uploaded back with the array to the GPU: quite inefficient.

Do we have a texture gpu copy mechanism in the engine? The solution from @kzhsw uses raw WebGL calls, while I am more interested in a WebGPU solution and ideally a backend agnostic solution if it is to be integrated in the engine :thinking:

7

I made a WebGPU only version:

Let me know if there is backend agnostic solution :wink:

8

It’s browser dependent.
Seems firefox makes ImageBitmap from pixels on cpu, and chromium makes a more complex impl.

Also, chromium seems only making the gpu-gpu copy for 2d textures, not texture arrays.

9

That’s crazy I had no idea it was that complicated x) I hope at least WebGPU copy on Chromium is gpu-gpu. Looks like there isn’t a best solution for all browsers then :confused:

10

Btw is there a way to create mip maps for the layers? If I understand correctly they can be generated at construction time, but since I am copying the textures after construction, I don’t have any mip map :thinking: