0

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.

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:

https://codesandbox.io/s/interesting-wozniak-povk1?file=/src/App.js

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.

Turmolt
  • 113
  • 9
  • This looks to me like a mismatch with [premultiplied alpha](https://gitplanet.com/project/premulalpha): either the image has it and the material/texture isn't [configured](https://threejs.org/docs/#api/en/materials/Material.premultipliedAlpha) to use it, or the image doesn't have it but the material/texture is assuming it does. – z0r Jan 29 '22 at 10:08

1 Answers1

0

You need to increase the resolution of the image, the mesh at half the scale looks better with that resolution on the png

Epiczzor
  • 377
  • 2
  • 13