Hello, I’m writing the issue for anyone who might face it while using Basis Universal files.
Problem
There is a Chromium bug that causes crash on some textures.
Here is what happens in console:
.WebGL-0x19e8b2d6ca00]GL ERROR :GL_INVALID_OPERATION : glCompressedTexImage2D: width or height is not a multiple of four
Solution
Currently, due to Chromium bug, you have to resize the textures for dimensions to be divided by 4. You have to resize your images yourself and then again convert to basis format. And then textures will be loading with no errors across both Firefox and Chrome
As an aside. You generally do want your textures to be a power-of-two, so if your texture is 1x1 or 2x2 pixels - there’s no point in compression, but starting from 4x4 - it will always be multiples of 4 in size.
Why “power-of-two”? Because of mip maps. Mips are generated using half the size of the original texture, then next level is half of that and so on.
Compressed textures typically come with their own mips, but I’m not sure how well your tooling deals with those non-power-of-two textures.
Another point is about caching, power-of-two textures tend to do better with GPU cache, because that’s the most common use-case so most of the hardware is optimized for it.
How is this 4x relevant to basis? If your basis texture is to be decoded into DXT - you might encounter problems, i’m not sure how a non-multiple of 4 texture would be handled here, because the format is explicitly based around 4x4 blocks. Maybe someone has more knowledge on that.
In short - it’s a pain that you (usually) don’t have to subject yourself and your pipeline to.
Another side note: If you’re targeting iOS, you will need to have square textures when using basis (PVRTC1 on iOS does not support non square textures).
In general I recommend using power of two square textures (512x512, 1024x1024, …). Also, iOS has problems with basis transparency, so there are quite a few limitations you will need to consider with basis.