Currently, I am tackling a project for a client and encountering an issue with transparent logos in threejs. When utilized in the application, these logos exhibit an unattractive dark border that does not align with our desired aesthetic. Despite several attempts to rectify this problem, I have yet to find a successful solution and would greatly appreciate assistance in enhancing the alpha channel of these logos.
Comparison between Threejs and the supplied image:
https://i.sstatic.net/zjqYf.pnghttps://i.sstatic.net/1qLnR.png
The presence of a subtle border becomes more apparent upon zooming in within the application, impacting the overall visual appeal:
https://i.sstatic.net/d9z6q.png
Various methods have been tested in an attempt to resolve this issue:
I manipulated the texture's min + mag filters to LinearFilter/NearestFilter, however, this failed to produce the desired outcome as seen in my codesandbox. Implementing NearestFilter resulted in pixelated logos with aliasing effects when the camera is in motion.
Changing the blend modes of the standard material generated unexpected colors along the edges.
A custom shader was developed to blend the image color with white based on the alpha channel, yet issues persisted with color leakage.
Adjusting the alphaTest value caused abrupt edge endings and compromised visual quality.
All approaches are demonstrated here:
https://codesandbox.io/s/interesting-wozniak-povk1?file=/src/App.js
While progress has been made with the custom shader, further refinement is needed. Any insights or guidance on the optimal strategy to address and overcome this challenge would be highly valued.