Rendering 10k textures

[Albert2]

Hello everyone,

 

I am doing a sort of online planetarium with 10k stars where each one has a texture to it. I am running into performance issues especially when zooming. The optimizations I am already doing:

-> Drawing only the stars that are on the screen (making all others .visible = false). In general there are around 1000 stars in screen.

-> If a use only one or a few textures ( < 100) to all stars, I do not run into performance issues. However 10k different ones lags a lot. So I have decided to draw the same texture when the stars are far away, and when the user zooms in to replace to its actual texture. This actually solves the performance issues but there is a lot of lag when I am zooming in, that is swapping textures. In order to solve that I have tried uploading to GPU with Pixi prepare, but actually uploading 10k textures to the gpu beforehand makes the app have pretty bad performance overall (maybe I am not doing right?)

 

What strategies could I do or what could be the problems in my code? 

 

This is my code to upload to the gpu. My 10k textures are =150mb. 

this.app.stop()

for (let res in resources) {

this.app.renderer.plugins.prepare.add(resources[res].texture)

}

this.app.renderer.plugins.prepare.upload(() => {

console.log("uploading")

this.app.start()

})

 

Thank you,

 

 

[Exca]

What format / resolution are your textures? If for example they would be 512x512 32 bit png then the actual memory usage on gpu would be about 10 gigabytes. You could try using a compressed textures to make the memory requirements when unpacked smaller. Also using spritesheets might help depending on what kind of textures you have.

[Albert2]

Hi thank you for your reply!

 

So each image is 1081x1081 8-bit png pixels having around ~28kb each. So how come the gpu memory usage comes to 10 gigabytes? I am new to game development in general and do not know much about gpu rendering. How could I compress further the images? (I need transparency tough). I will try spritesheets to see if performance improves. 

 

Thank you,

 

[Albert2]

So sprite sheets I am having a bit of trouble with softwares to make a single spritesheet. Does having for example 10 different spritesheets may help in performance agains?

Also, my 10k textures are all built of 50 different image pieces put together. Is there a way to build this 10k textures from 50 only with Pixi? And thus doing so will increase performance as the gpu would only need to have 50 textures instead of 10k? (Even tough there would be 10k sprites).

 

Thank you,

[Exca]

1081 x 1081 x 8 is the amount of memory gpu requires to have the image data in memory. GPU doesnt know how to unpack png, so it will be unpacked by cpu and uploaded as raw image data. So each image takes about 1.1 megabytes of data (my calculations might be a bit off). Using compressed textures would help as then  the gpu receives compressed data that it knows how to unpack. https://www.npmjs.com/package/@pixi/compressed-textures

Swapping from 10k textures to 50 and doing 50xsprites might help or it might have another bottleneck. Would require some profiling & testing both to see which is better.

I've used texturepacker to use spritesheets. Though if you have 1081x1081 images (without being surrounded by lots of transparent area) then sheet wouldnt help that much.

Also if you can resize the images to be 1024x1024 then they would use much less gpu memory as it could allocate only 1024x1024 vs. 2048x2048 (nearest power of two that fits). Though my knowledge of modern gpu internals is pretty bad and this might not be the case nowadays.