Power-of-two textures performance benefits with modern WebGL

Question

We're using PIXI.js for games which internally uses WebGL for rendering. Every now and then I'm stumbling across mentions of power-of-two and possible performance benefits of avoiding NPOT textures (https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL#Non_power-of-two_textures, https://github.com/pixijs/pixi.js/blob/master/src/core/textures/BaseTexture.js#L116). Confusingly there are also mentions that it doesn't make a difference anymore (OpenGL - Power Of Two Textures). With webgl and browser development moving so fast it's hard to tell which of these bits of information is accurate.

Specifically I'm wondering whether the overhead of padding images to create POT textures (longer downloads, increased memory usage) are worth the performance benefits (if they indeed exists). I couldn't find any comparison or performance benchmarks comparing POT vs NPOT textures and I sadly don't really know how I would go about creating one myself.

Does anyone have experience in that regard or some up-to-date numbers? Is there a good way of measuring webgl performance?

Answer 1

I think most of the answers you are going to get is "depends on hardware/driver/gpu", "you have to test it yourself" or "it wouldnt be much slower (but with caveat you have to test across all gpus to make sure)".

Rather than worry about padding your images to POT you should use a texture alias (sprite sheet) instead. Or request the people behind Pixi to implement it. By using a texture alias with POT dimensions, you really get the best of both worlds: minimal padding wastage, a guarantee that POT texture will perform no slower than NPOT texture, AND reduced GL state changes.

I cant stress how big of an improvement you can get with reduced GL state changes. By implementing the texture aliasing and draw batching I can basically draw as much 2D sprites as required in a realistic setting; that is ~150k moving, rotating and resizing sprites at 60fps (bound by CPU to calc the new transform for each sprite every frame)