power of 2, but non-square, compressed textures with provided mipmaps do not render

[bunnybones1]

Some tools like BinomialLLC's crunch, or Google's ETC2Comp, don't create all the miplevels up to 1x1, for nonsquare textures.

WebGL seems to fail on textures that don't have all the mip levels up to 1x1.

This isn't really an issue with three.js necessarily, but when textures with mipmaps are loaded, but are missing the highest levels, could three.js be made to patch in some dummy levels to make them not break WebGL?

For instance, a texture with mip resolutions of 16x4, 8x2 and 4x1, could be made to work by adding in the missing 2x1 and 1x1.

Some related discussions:

BinomialLLC/crunch#40

google/etc2comp#31

To Reproduce

Steps to reproduce the behavior:

1. load the attached test texture
   test-missing-mip-levels.s3tc.COMPRESSED_S3TC_DXT_EXT.ktx.zip
2. try to use it in a material
3. See WebGL error

Expected behavior

The texture should render with supplied mipmaps

Screenshots

Platform:

• Device: Desktop
• OS: MacOS
• Browser: Chrome
• Three.js version: 134.0

[donmccurdy]

Unfortunately, this is a limitation of WebGL 1.0 – to use mipmaps with compressed textures, the textures must have square, power-of-two dimensions. Those mipmaps must be included with the texture, because we can't generate compressed mipmaps at runtime.

If I understand correctly WebGL 2.0 does allow more flexibility here, and KhronosGroup/WebGL#3117 is the relevant issue. I'm not sure if there's work we would need to do in three.js to get this working with WebGL 2.0 or if that's all under the hood.

Related:

• WebGL warns about width/height for generated mipmaps KhronosGroup/KTX-Software#345

[bunnybones1]

Yeah, completely understandable.

Interestingly though, Binomial's crunch has its own bug, where if you compress a texture that is wider than it is tall, it DOES generate the rest of the mips to 1x1, and those textures do load and render fine, even though they're nonsquare.

For our project, I'll try loading in a compressed line of pixels with mipmaps, that I can copy levels from, as other loaded textures exhibit the problem.

[Mugen87]

I'm not sure if there's work we would need to do in three.js to get this working with WebGL 2.0 or if that's all under the hood.

Indeed 👍 .