Control pixel bleeding through uv seams

A simple cube with Lightmap pack looks perfect when zoomed into.
I see a set of black lines showing up when zoomed out.

Is there anything I can do from threejs to control the black pixels bleeding through the uv seams.
Thanks! :slightly_smiling_face:

It’s hard to see from your pic, but this looks like it might be aliasing. Do you have antialiasing turned on?

@looeee Thanks the quick reply!
I am loading the cube with light map bakes in the threejs editor. Even with antialiasing on I can still see the line. Just that its a little smooth.

Its a little difficult to see with black on white; So, I inverted the image. See if that helps.
image

I tried to increase the margin between the uv islands.
That helped to some extent. Now, am seeing these lines only on extreme zoom out.

Looks like its a mipmapping issue. There’s a couple of things you can try.

First, is your texture a power of 2? i.e 256x256, 1024x1024 etc? If not mipmaps won’t work.

You can also try setting the texture mag filtering:

texture.magFilter = THREE.NearestFilter;

Other options are described here.

For good measure, you can also play around with

texture.minFilter

and set

texture.anisotropy = renderer.getMaxAnisotropy()

If none of that works, you probably need to adjust the texture to allow some bleed between UV seems.
See this article for details.

1 Like

Thanks for the input.
All the textures are perfectly power of two. I will try out texture filters and see if it helps. :slightly_smiling_face: