Basis texture torn (mipmaps?)

I have an .obj model with UVs. And a PNG texture, which looks perfect.
When i convert texture to .basis, it looks torn on UV edges like this:


Notes:
0. the code im using is from basis three.js example

let basisLoader = new BasisTextureLoader();
basisLoader.setTranscoderPath( 'basis/' );
basisLoader.detectSupport( renderer );
basisLoader.load( URL, function ( t ) {
	t.magFilter = THREE.NearestFilter;
	t.minFilter = THREE.NearestFilter;
	t.wrapS = THREE.RepeatWrapping;
	t.wrapT = THREE.RepeatWrapping;
	t.repeat.y = -1;
	t.anisotropy = 16;
	material.map = t;
	material.needsUpdate = true;
});
  1. I do basis conversion with -mipmap flag, which makes my basis file 30% larger. But doesnt fix it.
  2. three.js version is 121.

I’d be happy if someone has idea/experience on debugging such behaviour.

This could be a bug with either the BasisTextureLoader or basisu. Maybe you should open issues on the respective repos?

1 Like

Seems completely normal to me.

Basis produces block-compressed textures. Depending on block size - you end up with artifacts larger or smaller in size. At the very least - I suggest you have margins around your UV patches, otherwise these artifacts will bleed through the edges. Such as in your case, I believe.

By the way, you could remove some guess-work on our part by providing the texture image and the model.

3 Likes

Thank you guys!
Turned out Basis has two types of compression one focused on quality – UASTC, and another on file size, which is default, ETC1S.
The problem occurs only with ETC1S. Its ok with basis-UASTC.
The issue is, UASTC is almost 10 times bigger than ETC1S, and there is nothing in between them to balance this tearing =(.
So for now, i will think its just basis-specific encoding problem, like @Usnul just said.
I cant share this exact model, but uv and texture looks somewhat like this, and tearing happens on the edges of those patches:

2 Likes

To get full benefit (and quality) from ETC1S you may have to author your UV maps and textures with some consideration for issues like those @Usnul mentions. UV seams probably need to minimized, padded, and located somewhere inconspicuous — and this model appears to have lots of them.

Another option might be to increase the resolution of the texture a bit before compressing with ETC1S, as an “in between” as you mention.

2 Likes

Thank you @donmccurdy!
So, the screenshot was made with 1024px texture. With 2048 (3 times bigger file size than 1024) textures the edges are hardly seen. I didnt expect such a drastic change.
Also bleeding texture helps a little bit. Also it’s color dependant, like the same quality of texture looks much worse if its red, for example.

Still ongoing research for me, i will hopefully post the final solution i did for this particular case.

2 Likes

Found a bit more good information about UV padding here:

2 Likes

just to post the final solution: bleeding textures saved the day for basis compression in the end.
It was either bleeding or doubling texture size(1k->2k).

Thank you @donmccurdy @Usnul @looeee for help!

3 Likes