How can I improve my transparent textures?

Questions
, ,
1

I am working on a project for a client and we are finding that some of the transparent logos have a very ugly looking dark border around them when they are used in threejs. I have tried so many things with no luck so I would love help getting the alpha to look nicer.

Threejs vs the supplied image:

enter image description hereenter image description here

It is very faint but when you zoom in (which they can to an extent in the application) you can see the border:

enter image description here

Things I have tried:

  • Setting texture’s min + mag filters to LinearFilter/NearestFilter. This is the most common suggestion but you can see in my codesandbox that this does not help. If I set it to NearestFilter then the logos start to become pixelated and alias when the camera moves around.

  • I changed the blend modes of the standard material and I got weird colors on the edges.

  • I wrote my own custom shader that blends between the image color and white based on the supplied image’s alpha but I still get a weird color leaking through. If I crank up the alpha cutoff the edges start to look aliased and not so great.

  • I played with the alphaTest value but this ends up causing the edges to end abruptly/not look great.

I demonstrate all of my approaches here:

I think that my shader is close but not perfect. I would really appreciate any advice on the right way to approach and solve this problem.

Thank you!

2

There is no perfect solution for cutout textures, choose your poison.

My personal trick is using higher textures resolution, then drowning the black borders into boosted antialiasing. You do this by overscaling render at 1.5 pixel ratio.

renderer.setPixelRatio( window.devicePixelRatio * 1.5 );

1 Like
3

I haven’t dealt with this a lot myself so I can’t necessarily give in depth guidance on dealing with this but it looks like an issue with the source image and the stored RGB color of the transparent pixels. Take a look at this article on these types of issues with transparent textures:

Specifically the section on fixing it and flooding the RGB color of the transparent background. The article suggests some Photoshop or Gimp plugins but they should have a way to control the pixel value for each channel manually without any plugins.

1 Like