Max texture size for WebGL?

[ChubbRck]

Hi all,

 

Having a weird problem where a spritesheet animation appears as a black box in Firefox when rendering with WebGL. When I switch to Canvas, the spritesheet plays. I'm assuming I'm over the max texture size? (I have a giant, 32 frame animation that weighs in at a colossal 4560 × 4800. I know, I know, it's ridiculous, but I need to run basically a full screen animation for a few seconds). 

 

I tried switching to a 'power of 2' size (e.g. 4225 x 4225) but this still doesn't work. Can anyone confirm that I'm barking up the wrong tree?

 

Nick

[lewster32]

That is indeed a huge animation! I believe 4096x4096 is the maximum realistic size (some devices can manage 8192) however on some devices it can be 2048x2048 and I think this is a safe limit. I'd recommend splitting it into several sheets. TexturePacker has a multipack feature which should let you do this.

[ChubbRck]

Thanks for the advice Lewster - quick question, how would you go about 'playing' two animations as one in Phaser? 

[rich]

 

I tried switching to a 'power of 2' size (e.g. 4225 x 4225)

 

That isn't a power of 2 size

 

The maximum WebGL texture size is GPU dependant. My top of the line GeForce card in my desktop can handle a 4560 × 4800 texture without breaking a sweat. On the other hand, I can't think of a single mobile browser that would render it at all. And cheaper / integrated GPUs won't load it either.

 

Make it smaller, or break it up into smaller pieces, or drop a frame or two, or up-scale it perhaps. Whatever you do, shrink it down though.

[lewster32]

For the record, by powers of two we mean 2*2, 2*2*2, 2*2*2*2 etc, so 4, 8, 16, 32, 64, 128, 256, 512, 1024, 2048, 4096 etc etc. Having matching width and height isn't the same thing.

 

Thanks for the advice Lewster - quick question, how would you go about 'playing' two animations as one in Phaser? 

 

Not sure I understand? If you mean how to add frames from more than one image into a single animation - well I actually don't know, that's a good question!

[rich]

You can't yet basically, you'd need to use 2 sprites and check the animation complete event from the first in order to make the second visible and start playing.

[ChubbRck]

Thanks for the help guys, my bad regarding the 'power of 2' -- for some reason I thought of the number had a whole square root it was a 'power of 2', but of course, that is wrong. I ended up halving the size of the texture and scaled it up by two. Since it's pixel art and anti-aliasing is turned off, it still looks good. 

[ForgeableSum]

I'm more interested in figuring out the "optimal largest texture size" instead of the max texture size which we all know, is GPU-specific and usually maxes around 8K.

For instance, if you have an 8k x 8k game world filled up with rendertextures, is it more optimal to use 1024 or 2048? Is 512 even more optimal?

I can tell from testing that 2048 outperforms textures at around 4K, so there is a clear benefit to small size at that scale. But where is the "sweet spot" so to speak? Is it better to have more smaller textures or fewer larger textures? obviously small, but how small? These are the questions people should be asking but all I ever find is stuff "what is the max texture size" via google searches. 

[lewster32]

It's unfortunately entirely device dependent. Generally speaking, GPUs perform better when they have everything they need in one place, and so one large texture atlas is many times better than several smaller ones. What you're usually interested in is the amount of 'draw calls' a GPU is doing per frame. You can debug this easily, and it's a good metric to use and try to reduce. Simplifying somewhat, but every distinct texture used typically constitutes a draw call, so having all of your textures crammed into one texture atlas means that all of the sprites drawn on screen (no matter how many) will theoretically use just one draw call. In practice, tinting, alpha and other things may raise that number but generally speaking you can do a massive amount of optimisation just by reducing draw calls. I did this on a project a while back and the results were pretty astonishing: http://www.rotates.org/2012/11/11/optimisation/

The answer to your question therefore is 'as big as the max texture size for your intended audience's devices', as when all things are considered, even if in a test it seems that 2k outperforms 4k, it may be that in the real world a 4k atlas will reduce your draw calls and give you more fps to play with elsewhere.

[hexus]

On 9/29/2016 at 1:11 AM, feudalwars said:

Is it better to have more smaller textures or fewer larger textures?

Yeah, as Lewster said, the largest the device can support will be the best. Less to send to the GPU and potentially less draw calls needed.

http://www.adriancourreges.com/blog/2016/09/09/doom-2016-graphics-study/

I've always found articles like this enlightening. For Doom, they throw everything into these mega textures! iD have done it that way for ages, apparently.

[ForgeableSum]

6 hours ago, hexus said:

Yeah, as Lewster said, the largest the device can support will be the best. Less to send to the GPU and potentially less draw calls needed.

http://www.adriancourreges.com/blog/2016/09/09/doom-2016-graphics-study/

I've always found articles like this enlightening. For Doom, they throw everything into these mega textures! iD have done it that way for ages, apparently.

I don't think the largest always being best is always true (or even normally true), at least according to my tests. Weaker GPUs really struggle with extremely large textures, even if they technically support them. For example, ever try loading a 4K texture on a mac build before 2010? Just a few of those and the FPS drops dramatically. Strong GPUs will struggle with 8K textures, despite technically supporting them. I think there is a reason there is a max size in the first place (bigger != better). And I think the real sweet spot, speaking in a very general sense for ALL software environments, is around 1024 x 1024. I'd have to do some more scientific tests to prove that. 

But yeah, it all depends on implementation. What if you make a single 4K texture and it takes the place of 100 smaller textures? In that scenario, the benefits would outweigh the cons. 

[lewster32]

5 hours ago, feudalwars said:

But yeah, it all depends on implementation. What if you make a single 4K texture and it takes the place of 100 smaller textures? In that scenario, the benefits would outweigh the cons. 

This is really the essence of it. I'd like to see the tests you do, as it does seem to make sense that throwing around a gigantic image is going to be more difficult for a GPU than a smaller one, but I'm often surprised by what actually turns out to work well in these kinds of cases.