Dynamic Textures on iOS are distorted when generating mipmaps

I’ve found a weird behavior in 4.2 (didn’t check earlier versions) where Dynamic textures are distorted when setting generateMipMaps to true and using a non square or non power of 2 resolution. It’s fine for 1024x1024 canvases or when not generating mipmaps. This problem seems to be confined to iOS as far as i can tell.

My current work around is to generate the original texture in a separate off screen canvas and then scaling that to the 2d context of the dynamic texture. This is no particularly elegant imho. some advice on how to say the least. Any suggestion on how to fix this would be appreciated.

Hey and welcome!

That should already happen actually (i mean internally)

can you share a tiny repro in the Playground so @Cedric or @sebavan can have a look?

I’ve modified this playground to illustrate the problem: https://playground.babylonjs.com/#5ZCGRM#834

This is what it looks like on my desktop firefox (just as i would expect):

This is what it looks like on iOS (it’s an iPhone SE with iOS 14.2, a more recent model has the same issue)

I’m taking a look!

1 Like

The issue is with WebGL1, not iOS. I can repro on PC with forced webgl. Investigating …

I can confirm WebGL 1 has limitied support for non-power of two textures and mipmaps:

The textures is resized to PoT before creating mipmaps with black border for missing texels.
You can either:

  • require webgl2
  • resize your dynamic texture to power of 2

I don’t see any other choice :confused:

1 Like

Thank you for investigating. Afaik requiring WebGL2 would exclude most iOS devices. My current workaround is to compose everything in the format i was originally using, since i’m rendering fonts at runtime which would get distorted otherwise, and then scaling that to the canvas originally created for the dynamic texture which has a power of 2 format. Has surprisingly little performance impact.

Now that i think of it, maybe it would be cleaner to use the original canvas with power of 2 measurements only use the area that i originally wanted to use and adjust the UVs of the mesh accordingly. Any thoughts on that?

I’d like to see a note about this gotcha in the documentation somewhere. Can i write something up and send a pull request to the github repo or do you guys prefer to write something yourself?