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:
It is very faint but when you zoom in (which they can to an extent in the application) you can see the border:
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.